/* ==========================================================================
   Why SOLD? Page - Scoped Styles (css/why-sold.css)
   All classes prefixed with ws- to avoid conflicts with other pages.
   ========================================================================== */

/* --- Hero Breadcrumb --- */
.ws-hero-breadcrumb {
  position: absolute;
  bottom: 4.1667cqi;
  /* Anchored to bottom */
  left: 7.2222cqi;
  /* 104/1440 */
  width: 16.3889cqi;
  /* 236/1440 */
  height: 2.0139cqi;
  /* 29/1440 */
  display: flex;
  align-items: center;
  gap: 0.5556cqi;
  /* 8/1440 */
}

.ws-hero-breadcrumb .ws-breadcrumb-home {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25cqi;
  /* 18/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  color: #FFFFFF;
  text-decoration: none;
}

.ws-hero-breadcrumb .ws-breadcrumb-icon {
  width: 1.5972cqi;
  /* 23/1440 */
  height: 1.0417cqi;
  /* 15/1440 */
  object-fit: cover !important;
}

.ws-hero-breadcrumb .ws-breadcrumb-current {
  position: relative;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25cqi;
  /* 18/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  /* or baseline if adjusted later */
}

.ws-yellow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #FFA726;
  border-radius: 50%;
  margin: 0 4px;
  position: relative;
  top: -1px;
  /* Align slightly off the baseline to act as a period */
}

/* ============================
   SECTION LABEL (shared pattern)
   ============================ */
.ws-section-label-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 50px;
}

.ws-section-label-bar {
  width: 5px;
  height: 35px;
  background: #FFA726;
  border-radius: 2px;
}

.ws-section-label-text {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #FFA726;
  letter-spacing: 0;
}

.ws-section-label-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  display: inline-block;
}

/* ============================
   ABOUT SOLD SECTION
   ============================ */
.ws-about-section {
  background: #FFFFFF;
  padding: 60px 0;
  /* Mobile default */
}

.ws-about-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
  /* Mobile default */
}

.ws-about-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ws-about-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
}

.ws-about-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.01em;
  color: #555;
  margin: 0;
}

/* Mobile text styling for About SOLD */
@media (max-width: 767px) {

  /* UNIVERSAL MOBILE BREADCRUMB OVERRIDES */
  .ws-hero-breadcrumb {
    margin-left: 0 !important;
    gap: 11px !important;
  }

  .ws-hero-breadcrumb a,
  .ws-hero-breadcrumb .current,
  .ws-hero-breadcrumb .ws-breadcrumb-current,
  .ws-hero-breadcrumb .ws-breadcrumb-home {
    font-size: 13px !important;
    line-height: 29px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    opacity: 1 !important;
  }

  .ws-hero-breadcrumb img.breadcrumb-icon,
  .ws-hero-breadcrumb img.ws-breadcrumb-icon {
    width: 23px !important;
    height: 15px !important;
    object-fit: fill !important;
  }

  .ws-hero-content {
    margin-bottom: 24px !important;
    /* True Figma Mobile Gap to Breadcrumb */
    gap: 10px !important;
  }

  .ws-hero-title {
    font-size: 34.2px !important;
    line-height: 43px !important;
  }

  .ws-hero-subtitle {
    font-size: 16px !important;
    line-height: 30px !important;
  }

  .ws-about-text-mobile {
    display: flex;
    flex-direction: column;
    gap: 3.82vw;
    /* 15px */
    width: 89.57vw;
    /* 352px */
    max-width: 100%;
  }

  .ws-about-text-mobile p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 4.07vw;
    /* 16px */
    line-height: 5.60vw;
    /* 22px */
    letter-spacing: 0.01em;
    color: #0B0B0B;
    margin: 0;
  }

  /* Mobile specific overrides for About SOLD label based on user specifications */
  .ws-about-left .ws-section-label-wrap {
    gap: 1.99vw;
    /* 7.84px */
  }

  .ws-about-left .ws-section-label-bar {
    width: 0.96vw;
    /* 3.76px */
    height: 7.89vw;
    /* 31px */
  }

  .ws-about-left .ws-section-label-text {
    font-size: 5.09vw;
    /* 20px */
    line-height: 7.63vw;
    /* 30px */
  }

  .ws-about-left .ws-section-label-logo {
    height: 5.09vw;
    /* 20px, matches label text */
  }
}

.ws-about-right {
  display: flex;
  flex-direction: column;
}

/* Web-only layout overrides */
@media (min-width: 768px) {
  .ws-about-section {
    padding: 8.125cqi 0 5.6944cqi;
  }

  .ws-about-container {
    max-width: 100cqi;
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  #about-sold .ws-about-content {
    flex-direction: row;
    width: 82.7083cqi !important;
    /* 1191px */
    margin: 0;
    margin-left: 7.2222cqi !important;
    /* 104px */
    margin-right: 10.0694cqi !important;
    /* 145px */
    gap: 11.3194cqi !important;
    /* 163px */
    position: relative;
  }

  .ws-about-left {
    flex: 0 0 40cqi;
    max-width: 40cqi;
    margin-top: 2.3611cqi;
    height: 51.3889cqi;
    /* From Figma layout */
    position: relative;
    display: block;
    /* Reset from flex to allow absolute positioning */
  }

  .ws-about-left .ws-section-label-wrap {
    position: absolute;
    top: 0;
    left: 2.0833cqi;
    width: 20cqi;
    height: 2.4437cqi;
    margin: 0;
    gap: 0.7028cqi;
  }

  .ws-about-left .ws-section-label-bar {
    width: 0.3937cqi;
    height: 2.4437cqi;
  }

  .ws-about-left .ws-section-label-text {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    line-height: 2.0833cqi;
    color: #FFA726;
  }

  .ws-about-left .ws-section-label-logo {
    height: 2.0833cqi;
    /* matches label text line-height */
  }

  .ws-about-text {
    position: absolute;
    top: 6.9444cqi;
    left: 2.0833cqi;
    width: 36.1806cqi;
    height: 10.6944cqi;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.25cqi;
    line-height: 1.5278cqi;
    letter-spacing: 0.01em;
    color: #504B4B;
  }

  /* Matches the "Get in touch" button in the Our Founders section below
     (.ws-founder-btn): same 282.1 x 67.3 pill, same 55px radius, same
     44 x 43 icon at the same inset, same 30px text line-height. Web only -
     the mobile rules further down are untouched.

     Selectors are .ws-about-section-scoped so they outrank the base
     .ws-btn-dark-pill rule, which is declared later in this file and was
     otherwise winning on border-radius and padding. */
  .ws-about-section .ws-about-btn {
    position: absolute;
    top: 21.1111cqi;
    left: 1.9444cqi;
    width: 19.5924cqi;
    /* 282.1px - same as .ws-founder-btn */
    height: 4.6771cqi;
    /* 67.3px */
    border-radius: 3.8194cqi;
    /* 55px */
    background: #263238;
    display: inline-flex;
    align-items: center;
    /* icon sits 14.9px in from the left edge, as on the founder button */
    padding: 0 0 0 1.0347cqi;
    /* 19.2px, puts the text 78.1px from the left edge */
    gap: 1.3333cqi;
    box-sizing: border-box;
  }

  .ws-about-section .ws-about-btn .ws-btn-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.7361cqi;
    line-height: 2.0833cqi;
    /* 30px - matches .ws-founder-btn .ws-btn-text */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

  .ws-about-section .ws-about-btn .ws-btn-icon {
    width: 3.0556cqi;
    /* 44px */
    height: 2.9861cqi;
    /* 43px */
    border-radius: 1.6667cqi;
    background: #FFA726;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ws-about-right {
    flex: 0 0 31.3889cqi;
    max-width: 31.3889cqi;
    margin-top: 0;
    height: 53.75cqi;
    /* Force height from Figma */
  }

  /* Info Card Web Overrides (Exact absolute coordinates) */
  .ws-about-right .ws-info-card {
    display: block;
    padding: 2.0139cqi 3.4722cqi 2.5cqi 3.4722cqi;
    box-sizing: border-box;
  }

  .ws-about-right .ws-info-icon {
    position: absolute;
    top: 2.0139cqi;
    left: 13.4028cqi;
    width: 4.5833cqi;
    height: 4.3056cqi;
    margin: 0;
  }

  .ws-about-right .ws-info-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }

  .ws-about-right .ws-info-title {
    position: absolute;
    top: 7.5cqi;
    left: 3.4722cqi;
    width: 24.4444cqi;
    height: 2.2222cqi;
    margin: 0;
    font-size: 1.9444cqi;
    line-height: 2.2222cqi;
  }

  .ws-about-right .ws-info-desc {
    position: absolute;
    top: 10.9028cqi;
    left: 3.4722cqi;
    width: 24.4444cqi;
    height: 3.5417cqi;
    margin: 0;
    font-size: 1.0417cqi;
    line-height: 1.1806cqi;
    letter-spacing: 0.01em;
  }

  .ws-about-section .ws-map-container {
    position: absolute;
    top: 28.8194cqi;
    left: -0.2083cqi;
    width: 40cqi !important;
    height: 22.5694cqi !important;
    margin-top: 0 !important;
  }

  /* --- Web-only overrides for Our Founders --- */
  .ws-founders-section {
    padding-top: 5.6944cqi;
    padding-bottom: 6.9444cqi;
    background: #FFFFFF;
  }

  #our-founders .ws-founders-container {
    width: 82.7083cqi;
    height: 40.5556cqi;
    /* Sized for the single remaining founder card */
    margin-left: 7.2222cqi;
    margin-right: 10.0694cqi;
    max-width: none;
    padding: 0;
    position: relative;
  }

  #our-founders .ws-founders-container>.ws-section-label-wrap {
    position: absolute;
    top: 0;
    left: 0.8333cqi;
    width: 14.8611cqi;
    height: 2.4306cqi;
    display: block;
    gap: 0;
    /* Remove flex gap */
  }

  .ws-founders-container>.ws-section-label-wrap .ws-section-label-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.4167cqi;
    height: 2.4306cqi;
    margin: 0;
  }

  .ws-founders-container>.ws-section-label-wrap .ws-section-label-text {
    position: absolute;
    top: 0.3472cqi;
    /* 0.3569cqi rounded */
    left: 1.1806cqi;
    /* 1.1569cqi rounded */
    width: 14.5139cqi;
    height: 2.0833cqi;
    line-height: 2.0833cqi;
    font-size: 2.0833cqi;
    font-weight: 600;
    color: #FFA726;
    /* Figma fill exported as background */
    margin: 0;
  }

  #our-founders .ws-founder-card {
    margin-bottom: 0;
    border-radius: 0.9028cqi;
    background: #E9EAEB;
  }

  /* Founder 1 */
  .ws-founder-1 {
    position: absolute;
    top: 6.7361cqi;
    left: 0;
    width: 100%;
    height: 30.9722cqi;
    display: block;
  }

  .ws-founder-1 .ws-founder-info {
    position: absolute;
    top: 3.8194cqi;
    left: 3.5417cqi;
    width: 39.375cqi;
    height: 20.6944cqi;
    padding: 0;
    display: block;
    /* To support absolute children */
  }

  .ws-founder-1 .ws-founder-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 11.3889cqi;
    height: 2.0833cqi;
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 2.1528cqi;
    line-height: 1.3194cqi;
    letter-spacing: 0.02em;
    color: #263238;
    display: flex;
    align-items: center;
  }

  .ws-founder-1 .ws-founder-subtitle {
    position: absolute;
    top: 2.5694cqi;
    left: 0;
    width: 11.3889cqi;
    height: 2.2542cqi;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1875cqi;
    line-height: 2.0833cqi;
    letter-spacing: 0.05em;
    color: #FFA726;
    display: flex;
    align-items: center;
  }

  .ws-founder-1 .ws-founder-bio {
    position: absolute;
    top: 6.1431cqi;
    left: 0;
    width: 36.7361cqi;
    height: auto;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    /* italic removed on web to match mobile, which was never italic */
    font-style: normal;
    font-size: 1.5278cqi;
    line-height: 1.7361cqi;
    letter-spacing: 0px;
    /* Figma specifies 0.01em (1%, matching the "Our Vision" card's own
       letter-spacing) - client explicitly asked for 0 here instead,
       overriding Figma. Web only (this rule lives in the
       @media (min-width:768px) block); mobile's own .ws-founder-bio
       positioning override doesn't touch letter-spacing, so it is
       untouched, matching "mobile is fine" from the client. */
    color: #0F0F0F;
  }

  /* Figma wraps this bio in curly quotes as a structural part of the quote
     styling, not typed content - generated here instead of relying on an
     editor to type the Unicode quote characters into the ACF field (which
     was the actual bug: the live database value has no quotes at all,
     unlike the design). ".d-lg-block" (not just ".ws-founder-bio") keeps
     this from ever matching the separate mobile paragraph
     (".d-lg-none"), which has no quotes in Figma's own mobile design. */
  .ws-founder-1 .ws-founder-bio.d-lg-block::before {
    content: '\201C';
  }

  .ws-founder-1 .ws-founder-bio.d-lg-block::after {
    content: '\201D';
  }

  .ws-founder-1 .ws-founder-btn {
    position: absolute;
    top: 18.4215cqi;
    left: 0.1458cqi;
    width: 19.5924cqi;
    height: 4.6771cqi;
    margin: 0;
    padding: 0;
    border-radius: 3.8194cqi;
    background: #263238;
    display: block;
    /* To support absolute children */
  }

  .ws-founder-btn .ws-btn-icon {
    position: absolute;
    top: 0.8146cqi;
    left: 1.0347cqi;
    width: 3.0556cqi;
    height: 2.9861cqi;
    border-radius: 1.6667cqi;
    background: #FFA726;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ws-founder-btn .ws-btn-text {
    position: absolute;
    top: 1.1111cqi;
    left: 5.4222cqi;
    width: 13.375cqi;
    height: 2.5375cqi;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.7361cqi;
    line-height: 2.0833cqi;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: center;
  }

  .ws-founder-1 .ws-founder-photo-wrap {
    position: absolute;
    top: 3.8889cqi;
    left: 52.7778cqi;
    width: 24.1667cqi;
    height: 23.125cqi;
    border-radius: 0.6944cqi;
    padding: 0;
    margin: 0;
    overflow: hidden;
    /* Ensures child image respects the border-radius */
  }

  .ws-founder-1 .ws-founder-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.6944cqi;
  }

  /* Founder Typography */
  .ws-founder-name {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 2.1528cqi;
    line-height: 1.3194cqi;
    letter-spacing: 0.02em;
    color: #263238;
    margin: 0 0 0.4861cqi 0;
  }

  .ws-founder-subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1875cqi;
    line-height: 2.0833cqi;
    letter-spacing: 0.05em;
    color: #FFA726;
    margin: 0 0 1.3194cqi 0;
  }

  .ws-founder-bio {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.3889cqi;
    line-height: 1.7361cqi;
    letter-spacing: 0.02em;
    color: #0F0F0F;
    margin: 0;
  }

  .ws-founder-btn {
    position: absolute;
    width: 18.8194cqi;
    height: 4.0896cqi;
    border-radius: 3.8194cqi;
    padding: 0;
  }

  .ws-founder-1 .ws-founder-btn {
    top: 16.5972cqi;
    left: 0;
  }

  /* --- Web-only overrides for Clients Section --- */
  .ws-clients-section {
    position: relative;
    width: 100cqi;
    height: 64.8611cqi;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    display: block;
    overflow: hidden;
  }

  .ws-clients-section .ws-clients-container {
    width: 100%;
    max-width: none;
    height: 100%;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .ws-clients-section .ws-section-label-wrap {
    position: absolute;
    top: 4.8611cqi;
    left: 6.1111cqi;
    width: 20.9722cqi;
    height: 2.4306cqi;
    display: block;
    margin: 0;
  }

  .ws-clients-section .ws-section-label-wrap .ws-section-label-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.4167cqi;
    height: 2.4306cqi;
    margin: 0;
  }

  .ws-clients-section .ws-section-label-wrap .ws-section-label-text {
    position: absolute;
    top: 0.2778cqi;
    /* 4.14 rounded */
    left: 1.1806cqi;
    /* 16.66 rounded */
    width: max-content;
    /* was 19.7917cqi (285px), sized to the old "What our Client say" - the
       corrected "What Our Clients Say" is longer and wrapped to 2 lines. */
    white-space: nowrap;
    height: 2.0833cqi;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    line-height: 2.0833cqi;
    color: #FFA726;
    margin: 0;
  }

  /* Mask wrapper — pass-through on desktop, functional on mobile */
  .ws-clients-arc-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .ws-clients-arc-container {
    position: absolute;
    top: 13.6806cqi;
    left: 7.2917cqi;
    width: 85cqi;
    height: 42.1528cqi;
    padding: 0;
    margin: 0;
  }

  .ws-clients-arc-container .ws-client-logo {
    position: absolute;
    width: 9.8611cqi;
    /* 142px / 1440px */
    height: 9.8611cqi;
    margin: 0;
  }

  .ws-clients-arc-container .ws-client-inner {
    top: 0.6944cqi;
    /* 10px / 1440px */
    left: 0.625cqi;
    /* 9px / 1440px */
    width: 8.5417cqi;
    /* 123px / 1440px */
    height: 8.5417cqi;
  }

  /* Logo positioning calculated relative to arc container (offset: top 197, left 105) */
  .ws-clients-arc-container .ws-logo-1 {
    top: 0px;
    left: 38.0556cqi;
  }

  .ws-clients-arc-container .ws-logo-2 {
    top: 4.3056cqi;
    left: 25.3472cqi;
  }

  .ws-clients-arc-container .ws-logo-3 {
    top: 11.0417cqi;
    left: 14.1667cqi;
  }

  .ws-clients-arc-container .ws-logo-4 {
    top: 20.9028cqi;
    left: 4.9306cqi;
  }

  .ws-clients-arc-container .ws-logo-5 {
    top: 32.9861cqi;
    left: 0.625cqi;
  }

  .ws-clients-arc-container .ws-logo-6 {
    top: 4.3056cqi;
    left: 50.4167cqi;
  }

  .ws-clients-arc-container .ws-logo-7 {
    top: 11.0417cqi;
    left: 60.9722cqi;
  }

  .ws-clients-arc-container .ws-logo-8 {
    top: 20.9028cqi;
    left: 70.2083cqi;
  }

  .ws-clients-arc-container .ws-logo-9 {
    top: 32.2917cqi;
    left: 75.1389cqi;
  }

  /* Central Testimonial Block inside Section */
  .ws-clients-section .ws-client-testimonial {
    position: absolute;
    top: 35.2778cqi;
    left: 27.2917cqi;
    width: 45cqi;
    height: 25.625cqi;
    padding: 0;
    margin: 0;
    display: block;
    /* Override global flex */
    pointer-events: none;
    /* This text block sits centred ON TOP of the rotating logo wheel. Without
       this, hovering/dragging anywhere inside its box (the wheel's own
       centre) never reaches .ws-clients-arc-container underneath - it just
       silently swallows the mouse events, so the newly added web hover-pause
       and mouse-drag (js/why-sold-scroll.js) never fired there. Matches the
       mobile rule below, which already solved this identical problem the
       same way for touch. */
  }

  .ws-clients-section .ws-client-testimonial .ws-quote-icon {
    position: absolute;
    top: 0;
    left: 19.7222cqi;
    width: 7.5cqi;
    height: 5.3472cqi;
    margin: 0;
  }

  .ws-clients-section .ws-client-testimonial .ws-testimonial-text {
    position: absolute;
    top: 8.5417cqi;
    left: 0;
    width: 45cqi;
    height: 7.2917cqi;
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.5972cqi;
    line-height: 2.4306cqi;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0F0F0F;
  }

  .ws-clients-section .ws-client-testimonial .ws-testimonial-line {
    position: absolute;
    top: 20.7639cqi;
    left: 8.6111cqi;
    width: 28.1944cqi;
    height: 0;
    margin: 0;
    border-top: 1px solid #FFA726;
    /* Equivalent to height 0 with border */
  }

  .ws-clients-section .ws-client-testimonial .ws-testimonial-stars {
    position: absolute;
    top: 23.8194cqi;
    left: 17.9167cqi;
    width: 9.5833cqi;
    height: 1.8056cqi;
    margin: 0;
  }
}


@media (max-width: 767px) {
  /* REVERTED (again) back to zero-crop. v1.0.79 tried a fixed 57vw height +
     object-fit:cover to make this taller, accepting a ~24px/side crop - the
     client then saw it live and asked for the left side not to be cut,
     on every phone width, even if that means less height. aspect-ratio
     locks the box to the image's own 2162:1206 shape, so object-fit has
     nothing left to crop - whatever the width is (89.82vw, unchanged), the
     height that exactly fits it with zero crop is calculated automatically
     at every viewport, not just the ones that happened to be tested.
     Hard geometric fact, confirmed multiple rounds now: with THIS width and
     THIS source image, "taller AND zero-crop" are mutually exclusive - one
     needs either a wider container (less side margin) or a differently-
     cropped/more-square source image, not a CSS-only value. */
  .ws-map-container {
    width: 89.82vw;
    /* 353px */
    aspect-ratio: 2162 / 1206;
    margin-top: 20px;
  }

  .ws-map-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain !important;
  }
}

@media (min-width: 768px) {
  .ws-map-container {
    width: 100%;
    margin-top: 20px;
  }

  .ws-map-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover !important;
  }
}

/* --- Info Cards --- */
#about-sold .ws-info-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.4583cqi !important;
  /* Exactly 21px */
}

.ws-info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #24323A;
  border-radius: 13px;
  width: 452px;
  height: 244px;
  padding: 29px 50px 36px 50px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.ws-info-card::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #FFA726;
  transition: height 0.4s ease-out;
  z-index: 0;
}

.ws-info-card:hover::before {
  height: 100%;
}

.ws-info-icon,
.ws-info-content {
  position: relative;
  z-index: 1;
}

.ws-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 17px;
}

.ws-icon-img-1 {
  width: 66px;
  height: 62px;
  object-fit: cover !important;
  transition: filter 0.4s ease-out;
}

.ws-icon-img-2 {
  width: 70px;
  height: 62px;
  object-fit: cover !important;
  transition: filter 0.4s ease-out;
}

.ws-icon-img-3 {
  width: 70px;
  height: 56px;
  object-fit: cover !important;
  transition: filter 0.4s ease-out;
}

.ws-info-card:hover .ws-info-icon img {
  filter: brightness(0);
}

.ws-info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  width: 352px;
}

.ws-info-title {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: #FFFFFF;
  margin: 0;
  width: 352px;
  height: 32px;
  line-height: 32px;
  letter-spacing: -0.04em;
  text-align: center;
  transition: color 0.4s ease-out;
}

.ws-info-desc {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 17px;
  color: #FFA726;
  margin: 0;
  width: 352px;
  height: 51px;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color 0.4s ease-out;
}

.ws-info-card:hover .ws-info-title,
.ws-info-card:hover .ws-info-desc {
  color: #000000;
}

/* --- Dark Pill Button (shared) --- */
.ws-btn-dark-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #263238;
  border-radius: 30px;
  padding: 10px 28px 10px 10px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.ws-btn-dark-pill:hover {
  background: #374850;
}

.ws-btn-icon {
  width: 44px;
  height: 44px;
  background: #FFA726;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ws-btn-text {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ============================
   OUR FOUNDERS SECTION
   ============================ */
.ws-founders-section {
  background: #F4F5F5;
  padding: 60px 0;
}

@media (min-width: 768px) {
  .ws-founders-section {
    background: #FFFFFF;
  }
}

.ws-founders-container {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 95px;
}

.ws-founder-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #EDEDED;
  border-radius: 26px;
  overflow: hidden;
  margin-bottom: 40px;
}

.ws-founder-card-reverse {
  flex-direction: row-reverse;
}

.ws-founder-photo-wrap {
  flex: 0 0 320px;
  max-width: 320px;
  background: #D8D8D8;
}

.ws-founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ws-founder-info {
  flex: 1;
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.ws-founder-name {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #263238;
  margin: 0;
}

.ws-founder-bio {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: #555;
  margin: 0;
}

/* ============================
   WHAT OUR CLIENTS SAY
   ============================ */
.ws-clients-section {
  background: #E9EAEB;
  padding: 60px 0;
  overflow: hidden;
}

.ws-clients-container {
  position: relative;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 20px;
}

.ws-clients-arc-container {
  position: relative;
  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Mobile + tablet: the client arc can be spun by finger (js/why-sold-scroll.js).
   pan-y lets the browser keep owning vertical page scroll natively, while
   horizontal gestures are delivered to JS so the wheel can be dragged.
   992px matches the mobile/tablet cut-off that script's arc maths uses. */
@media (max-width: 991px) {
  .ws-clients-arc-container {
    touch-action: pan-y;
  }
}

.ws-client-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 142px;
  height: 142px;
  border-radius: 50%;
  background: #B7BCBE;
  box-sizing: border-box;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.ws-client-logo:hover,
.ws-client-logo.active {
  background: #FFA726;
}

.ws-client-inner {
  position: absolute;
  top: 10px;
  left: 9px;
  width: 123px;
  height: 123px;
  border-radius: 50%;
  background: #2F2D2B;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-client-inner img {
  max-width: 90%;
  max-height: 90%;
  object-fit: cover !important;
  filter: brightness(0) invert(1);
}



.ws-client-testimonial {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  width: 100%;
}

.ws-quote-icon {
  margin-bottom: 20px;
}

.ws-testimonial-text {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #000000;
  margin: 0 0 30px 0;
}

.ws-testimonial-line {
  width: 337px;
  height: 1px;
  background: #FFA726;
  margin-bottom: 30px;
}

.ws-testimonial-stars {
  display: flex;
  gap: 6px;
}

/* Web-only layout overrides */
@media (min-width: 768px) {
  .ws-hero-breadcrumb .ws-breadcrumb-current {
    align-items: baseline;
  }

  .ws-clients-section {
    padding: 0;
  }

  .ws-clients-container {
    width: 100cqi;
    height: 64.8611cqi;
    max-width: 100cqi;
    padding: 0;
  }

  .ws-clients-label-wrap {
    position: absolute;
    top: 4.8611cqi;
    left: 6.1111cqi;
    width: 20.9028cqi;
  }

  .ws-clients-label-wrap .ws-section-label-text {
    font-size: 2.0833cqi;
  }

  .ws-clients-arc-container {
    position: absolute;
    width: 85cqi;
    height: 42.1528cqi;
    top: 13.6806cqi;
    left: 7.2917cqi;
    margin-top: 0;
    display: block;
    /* Disable flex wrapper for absolute positioning */
    transform-origin: 42.5cqi 41.6667cqi;
    /* Exact mathematical center for the dynamic circle */
    will-change: transform;
  }



  /* Central Testimonial Block */
  .ws-client-testimonial {
    position: absolute;
    top: 35.2778cqi;
    left: 27.2917cqi;
    width: 45cqi;
    height: 25.625cqi;
    padding: 0;
    transform: none;
    display: block;
    /* Allows absolute positioning for children */
    pointer-events: none;
    /* Same fix as the other .ws-client-testimonial rule above - without this,
       this box (the wheel's own visual centre) blocks the web hover-pause
       and mouse-drag from ever reaching the arc container beneath it. */
  }

  .ws-quote-icon {
    position: absolute;
    top: 0;
    left: 19.7222cqi;
    width: 7.5cqi;
    height: 5.3472cqi;
    margin: 0;
  }

  .ws-quote-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
  }

  .ws-testimonial-text {
    position: absolute;
    top: 8.5417cqi;
    left: 0;
    width: 45cqi;
    height: 7.2917cqi;
    font-size: 1.5972cqi;
    line-height: 2.4306cqi;
    letter-spacing: 0.02em;
    color: #0F0F0F;
    margin: 0;
  }

  .ws-testimonial-line {
    position: absolute;
    top: 20.7639cqi;
    left: 8.6111cqi;
    width: 28.1944cqi;
    height: 0px;
    border: 1px solid #FFA726;
    margin: 0;
    background: transparent;
  }

  .ws-testimonial-stars {
    position: absolute;
    top: 23.7681cqi;
    left: 17.8813cqi;
    width: 9.625cqi;
    height: 1.8729cqi;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ws-star-icon {
    width: 1.875cqi;
    height: 1.875cqi;
    flex-shrink: 0;
  }

  .ws-stars-img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
  }

  /* --- Testimonial Click Animations --- */
  .ws-client-testimonial.animating .ws-quote-icon {
    opacity: 0;
    animation: wsFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }

  .ws-client-testimonial.animating .ws-star-icon {
    opacity: 0;
    transform: scale(0.5);
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(1) {
    animation: wsPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.4s;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(2) {
    animation: wsPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.5s;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(3) {
    animation: wsPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.6s;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(4) {
    animation: wsPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.7s;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(5) {
    animation: wsPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.8s;
  }

  .ws-client-testimonial.animating .ws-testimonial-line {
    transform: scaleX(0);
    opacity: 0;
    animation: wsGrowLineCenter 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.0s;
  }

  .ws-client-testimonial.animating .ws-testimonial-text {
    opacity: 0;
    animation: wsFadeUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.0s;
  }

  @keyframes wsFadeUp {
    0% {
      opacity: 0;
      transform: translateY(1.0417cqi);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes wsGrowLineCenter {
    0% {
      transform: scaleX(0);
      opacity: 0;
    }

    5% {
      opacity: 1;
    }

    100% {
      transform: scaleX(1);
      opacity: 1;
    }
  }

  @keyframes wsPop {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* --- Info Cards: static vertical stack (no scroll animation) --- */
  .ws-info-cards {
    position: relative;
    width: 31.3889cqi;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.4583cqi;
    /* 21px */
  }

  .ws-info-card {
    position: relative;
    width: 31.3889cqi;
    height: 16.9444cqi;
    /* Matches Figma size perfectly */
  }

  .ws-info-desc {
    opacity: 1;
    max-height: none;
    margin-top: 0;
  }
}

@media (max-width: 767px) {

  /* Info cards mobile overrides */
  /* Info cards mobile overrides */
  .ws-info-cards {
    gap: 2.54vw !important;
    /* 10px */
    align-items: center !important;
  }

  .ws-info-card {
    /* Stops iOS Safari / Chrome Android silently boosting the text inside these
       cards. That auto-inflation is what pushed the description onto a 4th line
       on some phones while it always measured as three in a desktop browser.
       Inherited, so it covers the title and the description. */
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    position: relative !important;
    width: 90.58vw !important;
    /* 356px */
    height: 44.78vw !important;
    /* 176px */
    border-radius: 3.31vw !important;
    /* 13px */
    background: #24323A !important;
    padding: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  .ws-info-icon {
    position: absolute !important;
    width: 9.41vw !important;
    /* 37px */
    height: 8.91vw !important;
    /* 35px */
    top: 4.83vw !important;
    /* 19px */
    left: 40.58vw !important;
    /* 159.5px */
    margin: 0 !important;
    padding: 0 !important;
  }

  .ws-icon-img-1,
  .ws-icon-img-2,
  .ws-icon-img-3 {
    width: 100% !important;
    height: 100% !important;
  }

  .ws-info-content {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
  }

  .ws-info-title {
    position: absolute !important;
    width: 79.39vw !important;
    /* 312px */
    height: 8.14vw !important;
    /* 32px */
    top: 15.52vw !important;
    /* 61px */
    left: 5.60vw !important;
    /* 22px */
    font-family: 'Mona Sans', var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 6.11vw !important;
    /* 24px */
    line-height: 8.14vw !important;
    /* 32px */
    letter-spacing: -0.04em !important;
    margin: 0 !important;
    text-align: center !important;
    color: #FFFFFF !important;
  }

  .ws-info-desc {
    position: absolute !important;
    width: 79.39vw !important;
    /* 312px */
    height: 12.98vw !important;
    /* 51px */
    top: 26.97vw !important;
    /* 106px */
    left: 5.60vw !important;
    /* 22px */
    font-family: 'Mona Sans', var(--font-body) !important;
    font-weight: 400 !important;
    /* Was 3.56vw (14px @390). At that size the copy filled all three lines
       with ZERO slack - "Collaborate with Us" tipped to a 4th line if the text
       rendered just 1% larger, and "Our Mission" at 6%. Any phone that inflates
       text even slightly (accessibility text scaling, a substituted font) spilled
       a 4th line past the fixed-height box and ate the gap to the card bottom.
       3.15vw (12.3px @390) leaves ~14% headroom, so all three cards stay on
       three lines on every mobile width from 280px up.
       line-height, height, width, top and left are deliberately untouched, so
       the three-line box and the gap below the card are exactly as before. */
    font-size: 3.15vw !important;
    /* 12.3px @390 - was 3.56vw */
    line-height: 4.33vw !important;
    /* 17px */
    letter-spacing: 0.01em !important;
    margin: 0 !important;
    text-align: center !important;
    color: #FFA726 !important;
  }

  /* The mobile rules above set the title/description colours with !important,
     which outranked the unprefixed hover rule - so tapping a card filled it
     orange while the text stayed white and orange (the description turning
     invisible against the panel). Re-assert the hover colours here at the same
     specificity so mobile matches the desktop treatment: orange panel, black
     icon, black text. */
  .ws-info-card:hover .ws-info-title,
  .ws-info-card:hover .ws-info-desc,
  .ws-info-card:active .ws-info-title,
  .ws-info-card:active .ws-info-desc {
    color: #000000 !important;
  }

  .ws-info-card:active::before {
    height: 100% !important;
  }

  .ws-info-card:active .ws-info-icon img {
    filter: brightness(0) !important;
  }
}

@media (max-width: 767px) {

  /* Our Founders Section Mobile Overrides */
  .ws-founders-section {
    padding-top: 0 !important;
    /* Gap handled by previous section's margin-bottom (38px) */
    padding-bottom: 13.48vw !important;
    /* Exactly 53px gap to Clients section */
    background-color: #FFFFFF !important;
  }

  .ws-founders-container {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 36px !important;
    /* 36px gap between cards and label */
    align-items: center;
  }

  /* Section Label override for Founders (similar to About SOLD) */
  .ws-founders-container .ws-section-label-wrap {
    gap: 1.99vw !important;
    /* 7.84px */
    width: 38.68vw !important;
    /* 152px */
    height: 8.91vw !important;
    /* 35px */
    align-self: flex-start;
    margin-left: 5.09vw !important;
    /* 20px left */
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }

  .ws-founders-container .ws-section-label-bar {
    width: 0.96vw !important;
    /* 3.76px */
    height: 7.89vw !important;
    /* 31px */
  }

  .ws-founders-container .ws-section-label-text {
    font-size: 5.09vw !important;
    /* 20px */
    line-height: 7.63vw !important;
    /* 30px */
  }

  /* Founder Cards */
  .ws-founder-card {
    display: flex !important;
    flex-direction: column !important;
    width: 90.58vw !important;
    /* 356px */
    border-radius: 3.30vw !important;
    /* 13px */
    padding: 7.89vw 5.85vw 10.94vw 5.85vw !important;
    /* 31px 23px 43px 23px */
    gap: 8.14vw !important;
    /* 32px */
    background: #E9EAEB !important;
    align-items: center !important;
    height: auto !important;
    /* Let content dictate height, Figma said 621/681 but content fits */
    margin-bottom: 0 !important;
  }

  /* Card 1 order (Info then Photo) */
  .ws-founder-1 .ws-founder-info {
    order: 1;
  }

  .ws-founder-1 .ws-founder-photo-wrap {
    order: 2;
  }

  .ws-founder-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 78.88vw !important;
    /* 310px */
    gap: 3.05vw !important;
    /* 12px */
    height: auto !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
  }

  .ws-founder-name {
    width: 100% !important;
    font-size: 5.09vw !important;
    /* 20px */
    line-height: 4.83vw !important;
    /* 19px */
    letter-spacing: 0.02em !important;
    margin: 0 !important;
    text-align: center !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    height: auto !important;
  }

  .ws-founder-subtitle {
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 3.56vw !important;
    /* 14px */
    line-height: 7.63vw !important;
    /* 30px */
    letter-spacing: 0.05em !important;
    /* 5% */
    color: #FFA726 !important;
    margin: 0 !important;
    text-align: center !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    height: auto !important;
  }

  .ws-founder-bio {
    width: 100% !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.07vw !important;
    /* 16px */
    line-height: 5.34vw !important;
    /* 21px */
    letter-spacing: 0.02em !important;
    /* 2% */
    color: #0F0F0F !important;
    margin: 0 !important;
    text-align: center !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    height: auto !important;
    white-space: nowrap !important;
  }

  .ws-founder-btn {
    width: 44.78vw !important;
    /* 176px */
    height: 10.94vw !important;
    /* 43px */
    border-radius: 13.99vw !important;
    /* 55px */
    background: #263238 !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 1.93vw !important;
    /* 7.58px gap */
    text-decoration: none !important;
  }

  .ws-founder-btn .ws-btn-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.09vw !important;
    /* 20px */
    line-height: 7.63vw !important;
    /* 30px */
    letter-spacing: 0.01em !important;
    /* 1% */
    color: #FFFFFF !important;
  }

  .ws-founder-btn .ws-btn-icon {
    width: 7.38vw !important;
    /* 29px */
    height: 7.38vw !important;
    /* 29px */
    background: #FFA726 !important;
    border-radius: 50% !important;
    /* User said 24px, 50% is safe for circle */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .ws-founder-btn .ws-btn-icon svg {
    width: 4.07vw !important;
    /* ~16px downscaled arrow */
    height: auto !important;
  }

  .ws-founder-photo-wrap {
    width: 78.88vw !important;
    /* 310px */
    border-radius: 2.54vw !important;
    /* 10px */
    position: relative !important;
    top: auto !important;
    transform: none !important;
    left: auto !important;
    margin: 0 !important;
  }

  .ws-founder-1 .ws-founder-photo-wrap {
    height: 75.32vw !important;
    /* 296px */
  }

  .ws-founder-photo {
    border-radius: 2.54vw !important;
    /* 10px */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 767px) {

  /* What Our Clients Say - Mobile Overrides */
  .ws-clients-section {
    padding-top: 0 !important;
    /* Gap handled by previous section's padding-bottom (53px) */
    padding-bottom: 0 !important;
    /* Gap to steps-section now comes solely from its 51px margin-top, matches services.html */
    background: #FFFFFF !important;
    overflow: hidden !important;
    /* Prevent horizontal scrollbar from edge logos */
  }

  .ws-clients-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 83.97vw !important;
    /* Figma height 330px: 330/393*100 */
    background: #E9EAEB !important;
    position: relative !important;
    padding: 0 !important;
    margin: 15vw 0 0 0 !important;
    overflow: visible !important;
    /* Edge logos extend beyond viewport — section clips them */
  }

  /* Section Label */
  .ws-clients-label-wrap {
    position: absolute !important;
    top: -15vw !important;
    left: 6.16vw !important;
    /* 24.24px */
    width: max-content !important;
    /* was 54.10vw (212.59px), sized to the old "What our Client say" - the
       corrected "What Our Clients Say" is longer and wrapped to 2 lines. */
    white-space: nowrap !important;
    height: 8.18vw !important;
    /* 32.14px */
    margin: 0 !important;
    gap: 1.99vw !important;
    display: flex !important;
    align-items: center !important;
  }

  .ws-clients-label-wrap .ws-section-label-bar {
    width: 0.96vw !important;
    /* 3.76px */
    height: 7.89vw !important;
    /* 31px */
  }

  .ws-clients-label-wrap .ws-section-label-text {
    font-size: 5.09vw !important;
    /* 20px */
    line-height: 7.63vw !important;
    /* 30px */
  }

  /* Arc Mask Wrapper — clips rotating logos, NOT testimonial */
  .ws-clients-arc-mask {
    position: absolute !important;
    width: 120vw !important;
    /* Extra wide to fully show edge logos */
    height: 100% !important;
    /* Full height of container to prevent harsh cutoff */
    top: 0 !important;
    left: -10vw !important;
    /* Center the extra 20vw width */
    margin: 0 !important;
    overflow: hidden !important;
    z-index: 1 !important;
    /* Kept behind the testimonial content (z-index 2) */
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50vw, transparent 55vw) !important;
    mask-image: linear-gradient(to bottom, black 0%, black 50vw, transparent 55vw) !important;
  }

  /* Arc Container — rotates inside mask */
  .ws-clients-arc-container {
    position: absolute !important;
    width: 100% !important;
    height: 300% !important;
    /* Tall enough for off-screen logos below */
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    display: block !important;
    transform-origin: 60.38vw 68.14vw !important;
    /* Center of rotation + 10vw for mask shift */
  }

  /* Logo circles */
  .ws-client-logo {
    width: 18.32vw !important;
    /* 72px */
    height: 18.32vw !important;
    /* 72px */
    position: absolute !important;
    margin: 0 !important;
    transition: background-color 0.3s ease !important;
  }

  .ws-client-inner {
    width: 15.52vw !important;
    /* 61px */
    height: 15.27vw !important;
    /* 60px */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .ws-client-inner img {
    max-width: 13.99vw !important;
    /* 55px (was 48px) - wide logos (Better Homes, Cushman, Sobha, Mashriq,
       Knight Frank) were capped small. With the unchanged 26px height cap,
       every logo's corners stay inside the 61px dark circle (radius ~30),
       so nothing is clipped by the circle edge. */
    max-height: 6.62vw !important;
    /* 26px */
    width: auto !important;
    height: auto !important;
  }

  /* Testimonial Block — sits INSIDE the arc, above logos via z-index */
  .ws-client-testimonial {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .ws-quote-icon {
    position: absolute !important;
    top: 44.06vw !important;
    /* Figma y=173.19px → 173.19/393*100 */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 9.41vw !important;
    pointer-events: auto !important;
  }

  .ws-quote-img {
    width: 100% !important;
    height: auto !important;
  }

  .ws-testimonial-text {
    position: absolute !important;
    top: 54.19vw !important;
    /* Figma y=213px → 213/393*100 */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 81.93vw !important;
    /* 322px width → 322/393*100 */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 3.05vw !important;
    /* 12px */
    line-height: 4.33vw !important;
    /* 17px */
    letter-spacing: 0.03em !important;
    text-align: center !important;
    color: #0F0F0F !important;
    white-space: normal !important;
    pointer-events: auto !important;
  }

  .ws-testimonial-line {
    position: absolute !important;
    top: 72.64vw !important;
    /* Figma y=285.5px → 285.5/393*100 */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: 38.42vw !important;
    /* 151px → 151/393*100 */
    height: 0px !important;
    border-top: 1px solid #FFA726 !important;
    background: transparent !important;
  }

  .ws-testimonial-stars {
    position: absolute !important;
    top: 75.57vw !important;
    /* Figma y=297px → 297/393*100 */
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: max-content !important;
    gap: 0.51vw !important;
    /* 2px */
    display: flex !important;
  }

  .ws-star-icon {
    width: 3.05vw !important;
    /* 12px */
    height: 3.05vw !important;
    /* 12px */
  }

  /* --- Mobile Custom Testimonial Animations --- */
  /* Sequence: Quotes (0s) -> Line (0.4s) -> Stars (0.8s) -> Content (1.4s) */
  .ws-client-testimonial.animating .ws-quote-icon {
    opacity: 0;
    animation: wsFadeUpMobile 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
  }

  .ws-client-testimonial.animating .ws-testimonial-line {
    transform: scaleX(0);
    opacity: 0;
    animation: wsGrowLineCenterMobile 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.4s !important;
  }

  .ws-client-testimonial.animating .ws-star-icon {
    opacity: 0;
    transform: scale(0.5);
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(1) {
    animation: wsPopMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.8s !important;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(2) {
    animation: wsPopMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.9s !important;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(3) {
    animation: wsPopMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.0s !important;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(4) {
    animation: wsPopMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.1s !important;
  }

  .ws-client-testimonial.animating .ws-star-icon:nth-child(5) {
    animation: wsPopMobile 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 1.2s !important;
  }

  .ws-client-testimonial.animating .ws-testimonial-text {
    opacity: 0;
    animation: wsFadeUpMobile 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 1.4s !important;
  }

  @keyframes wsFadeUpMobile {
    0% {
      opacity: 0;
      transform: translateY(3vw);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes wsGrowLineCenterMobile {
    0% {
      transform: scaleX(0);
      opacity: 0;
    }

    5% {
      opacity: 1;
    }

    100% {
      transform: scaleX(1);
      opacity: 1;
    }
  }

  @keyframes wsPopMobile {
    0% {
      opacity: 0;
      transform: scale(0.5);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@media (max-width: 767px) {

  /* ABOUT SOLD SECTION - Precise Mobile Coordinates */
  .ws-about-section {
    padding-top: 13.74vw !important;
    /* 54px to hero bottom */
    padding-bottom: 0 !important;
    /* Handled by card margin-bottom */
  }

  .ws-about-container {
    padding: 0 !important;
    /* Remove default padding to use exact left coordinates */
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .ws-about-content {
    gap: 0 !important;
  }

  .ws-about-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* 1. Label */
  .ws-about-left .ws-section-label-wrap {
    margin-left: 5.60vw !important;
    /* 22px left */
    margin-bottom: 7.12vw !important;
    /* 28px below to description */
    margin-top: 0 !important;
    width: 55vw !important;
    /* widened to fit logo alongside "About" */
    height: 8.91vw !important;
    /* 35px height */
    align-self: flex-start !important;
  }

  .ws-about-left .ws-section-label-logo {
    height: 5.09vw !important;
    /* 20px, matches label text */
  }

  /* 2. Mobile Description */
  .ws-about-text-mobile {
    margin-left: 5.34vw !important;
    /* 21px left */
    margin-bottom: 7.65vw !important;
    /* 30px below to the Get in touch button (was 20px, client asked for a
       little more room; was 13px straight to the map before the button was
       shown on mobile) */
    margin-top: 0 !important;
    width: 89.57vw !important;
    /* 352px width */
    display: flex !important;
    flex-direction: column !important;
    gap: 3.82vw !important;
    /* 15px gap between p tags */
  }

  /* 3. Get in touch button - same pill as .ws-founder-btn below (same
     colors/icon/text sizing), just left-aligned instead of centered to
     match this column's text, and placed above the map like the desktop
     version already is. Was d-none on mobile (desktop-only); now shown. */
  .ws-about-btn {
    width: 44.78vw !important;
    /* 176px */
    height: 10.94vw !important;
    /* 43px */
    border-radius: 13.99vw !important;
    /* 55px */
    background: #263238 !important;
    align-self: flex-start !important;
    margin-left: 5.34vw !important;
    /* 21px left - matches the text above */
    margin-bottom: 5.09vw !important;
    /* 20px below to the map */
    margin-top: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 1.93vw !important;
    /* 7.58px gap */
    text-decoration: none !important;
  }

  .ws-about-btn .ws-btn-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.09vw !important;
    /* 20px */
    line-height: 7.63vw !important;
    /* 30px */
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .ws-about-btn .ws-btn-icon {
    width: 7.38vw !important;
    /* 29px */
    height: 7.38vw !important;
    /* 29px */
    background: #FFA726 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .ws-about-btn .ws-btn-icon svg {
    width: 4.07vw !important;
    /* ~16px downscaled arrow */
    height: auto !important;
  }

  /* 4. Map */
  .ws-about-left .ws-map-container {
    margin-left: 5.09vw !important;
    /* 20px left */
    margin-bottom: 5.09vw !important;
    /* 20px below to card container (was 39px, client asked to close up
       the map-to-cards gap) */
    margin-top: 0 !important;
    width: 89.82vw !important;
    /* 353px width */
    aspect-ratio: 2162 / 1206 !important;
    /* REVERTED (again) back to zero-crop, same reasoning as the general
       .ws-map-container rule above: v1.0.79's 57vw fixed height +
       object-fit:cover cropped the left/right edges (~24px/side) to get
       taller - client saw it live and asked for it not to be cut on any
       phone width. aspect-ratio locking to the image's own 2162:1206 shape
       is the only way to guarantee zero crop at EVERY viewport
       automatically, not just the ones tested - a fixed height value
       (vw or px) can only ever be exactly right at one width. This rule
       (more specific, !important) is the one that actually wins over the
       general rule above - keep both in sync. */
    display: block !important;
  }

  /* object-fit back to contain: with the box locked to the image's own
     aspect ratio again, contain and cover render identically (no crop, no
     letterbox) - contain is the safer of the two, since it can never crop
     even if aspect-ratio rounds a sub-pixel differently than the image's
     exact dimensions. */
  .ws-map-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 4. Card Container */
  .ws-about-right .ws-info-cards {
    margin-top: 5.09vw !important;
    /* 20px (was 39px, client asked to close up the map-to-cards gap -
       reduced on both sides: this rule's own top margin AND the map
       container's bottom margin above, since they stack together into
       one combined visible gap) */
    margin-left: 4.58vw !important;
    /* 18px */
    margin-right: 4.83vw !important;
    /* 19px */
    margin-bottom: 9.67vw !important;
    /* 38px */
    width: 90.58vw !important;
    /* 356px width */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Ensure the cards use the exact 356px width to maintain internal pixel gaps */
  .ws-about-right .ws-info-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Exact Coordinates for Founder Card 1 */
  .ws-founder-card.ws-founder-1 {
    height: 158.02vw !important;
    /* 621px total calculated height */
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .ws-founder-1 .ws-founder-info {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }

  .ws-founder-1 .ws-founder-name,
  .ws-founder-1 .ws-founder-subtitle,
  .ws-founder-1 .ws-founder-bio,
  .ws-founder-1 .ws-founder-btn,
  .ws-founder-1 .ws-founder-photo-wrap {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
  }

  .ws-founder-1 .ws-founder-name {
    top: 7.89vw !important;
    /* 31px */
  }

  .ws-founder-1 .ws-founder-subtitle {
    top: 15.01vw !important;
    /* 59px */
  }

  .ws-founder-1 .ws-founder-bio {
    top: 23.16vw !important;
    /* 91px */
  }

  .ws-founder-1 .ws-founder-btn {
    top: 52.67vw !important;
    /* 207px */
  }

  .ws-founder-1 .ws-founder-photo-wrap {
    top: 71.76vw !important;
    /* 282px */
  }
}

/* ============================
   OUR TEAM SECTION (WEB ONLY)
   ============================ */

.ws-team-section {
  padding-bottom: 6.9444cqi;
  /* match spacing logic */
}

@media (min-width: 768px) {
  .ws-team-section {
    background: #FFFFFF;
    position: relative;
    width: 100cqi;
    left: 50%;
    transform: translateX(-50%);
  }

  .ws-team-container {
    width: 82.8472cqi;
    /* 1193px / 1440px */
    margin-left: 7.0833cqi;
    /* 102px */
    margin-right: 10.0694cqi;
    /* 145px */
    position: relative;
  }

  .ws-team-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.7028cqi;
    margin-bottom: 5.625cqi;
    /* 81px gap between label and grid container */
    margin-left: 0.9028cqi;
    /* Pushes exactly 13px right from 102px base, making its absolute viewport offset strictly 115px */
  }

  .ws-team-label-bar {
    width: 0.4167cqi;
    height: 2.4306cqi;
    background: #FFA726;
  }

  .ws-team-label-text {
    font-family: 'Mona Sans', sans-serif;
    font-size: 2.0833cqi;
    font-weight: 600;
    color: #FFA726;
    line-height: 2.0833cqi;
  }

  .ws-team-grid-box {
    background: #E9EAEB;
    border-radius: 0.9028cqi;
    /* 13px */
    padding: 6.1806cqi 3.1944cqi 6.3889cqi 4.5833cqi;
    /* 89px top, 46px right, 92px bottom, 66px left */
  }

  .ws-team-grid-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    /* Stop cards from stretching uniformly, keep strict Figma height */
    /* Maintain strict 43px horizontal gaps */
    gap: 2.9861cqi;
    /* 43px gap */
    margin-bottom: 2.0139cqi;
    /* 29px gap */
  }

  .ws-team-grid-row:last-child {
    margin-bottom: 0;
  }

  .ws-team-grid-row.center-row {
    justify-content: center;
    gap: 2.9861cqi;
  }

  .ws-team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8333cqi;
    /* 12px gap between photo and text */
    flex: 0 0 16.5278cqi;
    width: 16.5278cqi;
    /* 238px */
  }

  .ws-team-photo {
    width: 100%;
    height: 15.8333cqi;
    /* 228px */
    object-fit: cover;
    border-radius: 0.6944cqi;
    /* 10px */
  }

  .ws-team-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .ws-team-name {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 1.3889cqi;
    /* 20px */
    color: #FFA726;
    margin: 0;
    line-height: 2.0833cqi;
    /* 30px */
    white-space: nowrap;
  }

  .ws-team-role {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9028cqi;
    /* 13px */
    color: #1B3834;
    margin: 0;
    line-height: normal;
  }

  /* --- EXPLICIT COMPONENT BOUNDING BOXES FOR FIGMA 1:1 HEIGHT PARITY --- */

  .ws-team-name,
  .ws-team-role {
    margin: 0 auto;
    /* Ensure centered within grid column */
  }

  /* Row 1 */
  /* Card 1 of each row used to get .ws-team-info { width: 7.7778cqi } (112px, sized to "Ben Neve").
     Names are nowrap, so any longer first-card name (Anum Ashfaq, Mike Semmance) overflowed that box
     to the right and sat 10-25px off-centre. Removed (all 3 rows) - the info box now shrinks to its
     content and is centred by .ws-team-member's align-items:center, like every other card. */

  /* Omar Talafha (C2) */
  .ws-team-grid-row:nth-child(1) .ws-team-member:nth-child(2) .ws-team-name {
    width: 9.3056cqi;
    height: 1.8056cqi;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ws-team-grid-row:nth-child(1) .ws-team-member:nth-child(2) .ws-team-role {
    width: 10.4167cqi;
  }

  /* Ruhaan Chandnani (C3) & Sammen Shahid (C4) */
  .ws-team-grid-row:nth-child(1) .ws-team-member:nth-child(n+3) .ws-team-name {
    width: 13.1944cqi;
    height: 1.5972cqi;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ws-team-grid-row:nth-child(1) .ws-team-member:nth-child(n+3) .ws-team-role {
    width: 10.4167cqi;
  }

  /* Row 2 */
  /* Mohnish Vanjani (C2) */
  .ws-team-grid-row:nth-child(2) .ws-team-member:nth-child(2) .ws-team-role {
    width: 10.4167cqi;
  }

  /* Valanni Magalhas (C3) & Ye Man Pyae (C4) */
  .ws-team-grid-row:nth-child(2) .ws-team-member:nth-child(n+3) .ws-team-name {
    width: 13.1944cqi;
    height: 1.5972cqi;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ws-team-grid-row:nth-child(2) .ws-team-member:nth-child(n+3) .ws-team-role {
    width: 10.4167cqi;
  }

  /* Row 3 */
  /* Nyan Moe Wai (C2) */
  .ws-team-grid-row:nth-child(3) .ws-team-member:nth-child(2) .ws-team-role {
    width: 10.4167cqi;
  }
}

/* ============================
   OUR TEAM SECTION - MOBILE
   Auto-scrolling carousel, one member at a time, same behavior/pattern
   as the testimonials carousel (see js/why-sold-scroll.js).
   ============================ */
@media (max-width: 767px) {
  .ws-team-mobile-section {
    background: #FFFFFF;
    padding: 9.92vw 0 13.48vw;
  }

  .ws-team-mobile-container .ws-section-label-wrap {
    margin-left: 5.09vw;
    /* 20px, matches the other section labels on this page */
    margin-bottom: 12.21vw;
    /* 48px - more breathing room above the cards, closer to the desktop
       grid's generous 81px label-to-content gap */
  }

  .ws-team-mobile-carousel-wrapper {
    width: 100%;
    overflow: hidden;
    margin-bottom: 6.6vw;
  }

  .ws-team-mobile-track {
    display: flex;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .ws-team-mobile-card {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 5.09vw;
    /* 20px side gutters */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .ws-team-mobile-photo {
    width: 100%;
    max-width: 89.82vw;
    /* 353px, matches the map image width used earlier on this page */
    height: 76.65vw;
    /* ~301px - keeps roughly the desktop photo's 238:228 aspect ratio */
    object-fit: cover;
    border-radius: 2.54vw;
    /* 10px */
    margin-bottom: 4.83vw;
    /* 19px */
  }

  .ws-team-mobile-name {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 5.09vw;
    /* 20px, matches the desktop name size */
    line-height: 7.63vw;
    /* 30px */
    color: #FFA726;
    margin: 0;
  }

  .ws-team-mobile-role {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 3.31vw;
    /* 13px, matches the desktop role size */
    color: #1B3834;
  }

  /* Dots: the shared carousel dot style (hollow rings flanked by two long
     decorative line segments) was designed for the testimonials carousel's
     handful of dots and looks cramped/messy with 10 team members, so this
     carousel gets its own compact, solid pagination-dot style instead. */
  .ws-team-mobile-controls .carousel-dots-center::before,
  .ws-team-mobile-controls .carousel-dots-center::after {
    display: none !important;
  }

  .ws-team-dots {
    gap: 1.53vw !important;
    /* 6px */
  }

  .ws-team-dots .dot {
    width: 1.53vw !important;
    /* 6px */
    height: 1.53vw !important;
    border: none !important;
    background: #D9D9D9 !important;
    border-radius: 50% !important;
    transition: width 0.25s ease, background-color 0.25s ease;
  }

  .ws-team-dots .dot.active {
    width: 4.58vw !important;
    /* 18px - pill shape for the active dot */
    height: 1.53vw !important;
    border: none !important;
    background: #FFA726 !important;
    border-radius: 3.05vw !important;
  }

  .ws-team-dots .dot.active::after {
    display: none !important;
  }
}

/* =============================================================
   TABLET (768-1199px) - WHY SOLD
   Layout is the desktop one here and scales correctly (all cqi); only the
   type needs a floor so it stays readable when the design sits at ~53%.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  /* About info cards - description (1.0417cqi -> 8px at 768) */
  .ws-about-right .ws-info-desc,
  .ws-info-desc {
    font-size: max(12px, 1.0417cqi);
  }

  /* Founder subtitle (1.1806cqi -> 9.1px at 768) */
  .ws-founder-subtitle {
    font-size: max(12px, 1.1806cqi);
  }

  /* Breadcrumb (two-deep to beat the base rule's specificity) */
  .ws-hero-breadcrumb .ws-breadcrumb-home,
  .ws-hero-breadcrumb .ws-breadcrumb-current,
  .ws-hero-breadcrumb a,
  .services-hero-breadcrumb .ws-breadcrumb-home,
  .services-hero-breadcrumb .ws-breadcrumb-current {
    font-size: max(12px, 1.25cqi);
  }

  /* Our Team - name + role (1.3889cqi / 0.9028cqi) */
  .ws-team-name {
    font-size: max(12px, 1.3889cqi);
  }

  .ws-team-role {
    font-size: max(12px, 0.9028cqi);
  }

  /* Founder bio + client quote */
  .ws-founder-bio,
  .ws-clients-quote {
    font-size: max(12px, 1.1111cqi);
  }
}

/* Why SOLD founder "Get in touch" (web only, 768px+; mobile keeps its own rules) - Figma 1512:3049/3050/3053.
   The button is scaled inside the founder card (Frame 175, 1191x446): its real box is card inset
   71.75% / 74.22% / 14.8% / 4.45% = 254 x 60 at card (53, 320), i.e. (2, 265) from .ws-founder-info
   (Frame 181 at card 51,55). Live was 282 x 67 (the unscaled component size) at (0, 239): bigger and 26px higher.
   Icon 1512:3050: left 4.33% (11px), 16.54% wide (42 x 41), top 50%-1.5px (8px). Text 1512:3053: left 27.68%
   (70.3px), 25px Inter 600, centred at 50%+0.27px. Arrow 60% of the icon width (25.2px). All at /14.4 (1440). */
@media (min-width: 768px) {
  .ws-founder-1 .ws-founder-btn {
    top: 18.4028cqi;
    left: 0.1389cqi;
    width: 17.6389cqi;
    height: 4.1667cqi;
  }

  .ws-founder-1 .ws-founder-btn .ws-btn-icon {
    top: 0.5556cqi;
    left: 0.7639cqi;
    width: 2.9181cqi;
    height: 2.8472cqi;
  }

  .ws-founder-1 .ws-founder-btn .ws-btn-icon svg {
    width: 1.75cqi;
    height: auto;
  }

  .ws-founder-1 .ws-founder-btn .ws-btn-text {
    top: 0.8333cqi;
    left: 4.884cqi;
    width: 12.04cqi;
    height: 2.5372cqi;
  }
}

/* ==========================================================================
   SEO heading structure - Why SOLD (client sheet, 2026-09-29): tags changed, design unchanged.
   :where() = tag-level priority, so every class rule still wins exactly as before; only the browser/Bootstrap
   heading defaults that differ between the old and new tag are put back. (Hero, Success Formula, FAQ: style-v2.css.)
   ========================================================================== */
/* labels About / Our Founders / What Our Clients Say / Our Team: <span> -> <h2> */
h2:where(.ws-section-label-text, .ws-team-label-text) {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* team names (desktop grid) + Mission/Vision/Collaborate: <h4> -> <h3> - keep the h4 default size */
h3:where(.ws-team-name, .ws-info-title) {
  font-size: calc(1.275rem + .3vw);
}

/* team names (phone carousel): <h4> -> <div> - keep the h4 defaults it had */
div:where(.ws-team-mobile-name) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  font-size: calc(1.275rem + .3vw);
  color: var(--bs-heading-color, inherit);
}

/* founder: name (<h3>) + title (<div>) now two lines inside one <h3> that takes no box of its own */
h3:where(.ws-founder-heading) {
  display: contents;
  margin: 0;
}

span:where(.ws-founder-name) {
  display: block;
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  font-size: calc(1.3rem + .6vw);
  color: var(--bs-heading-color, inherit);
}

span:where(.ws-founder-subtitle) {
  display: block;
}

@media (min-width: 1200px) {
  h3:where(.ws-team-name, .ws-info-title),
  div:where(.ws-team-mobile-name) {
    font-size: 1.5rem;
  }

  span:where(.ws-founder-name) {
    font-size: 1.75rem;
  }
}

/* Steps (The SOLD Success Formula) - web/tablet: cards 02 and 03 use exactly
   step 01's card layout (2026-10-01). They had their own padding, heading ->
   text gap and a narrower text column; now all three match 01. Card size,
   position, timeline and the swing animation are unchanged. Why SOLD only
   (this file loads only here); mobile has its own rules. */
@media (min-width: 768px) {
  .why-sold-page-body .step-card-2,
  .why-sold-page-body .step-card-3 {
    padding: 2.3264cqi 3.4722cqi 3.2292cqi 3.4722cqi;
    /* 33.5 / 50 / 46.5 / 50 at 1440 = step 01 */
  }

  .why-sold-page-body .step-card-inner-2,
  .why-sold-page-body .step-card-inner-3 {
    width: 27.9861cqi;
    /* 403/1440 = step 01 */
    gap: 2.5694cqi;
    /* 37/1440 = step 01 */
  }

  .why-sold-page-body .step-desc-2,
  .why-sold-page-body .step-desc-3 {
    width: 27.9861cqi;
    /* 403/1440 = step 01 */
  }
}

/* Why SOLD - mobile: Our Founders bio wraps inside the card (was nowrap: built for text with
   typed line breaks; the admin text has none, so it ran on one line and was cut off). Sizes in vw
   so every phone shows the same lines. Typed line breaks in the admin still work. */
@media (max-width: 767px) {
  .why-sold-page-body .ws-founder-bio.d-lg-none {
    white-space: normal !important;
    box-sizing: border-box !important;
    padding: 0 5.09vw !important; /* 20px @393 */
  }
}

/* Why SOLD - mobile: Our Founders card spacing = Figma 1655:2193 (356 x 621 at 393): name 31 from the top, name ->
   subtitle 7, subtitle -> text 12, text -> Get in touch 32, button -> photo 32, 43 below the photo; text box 310 wide
   (23 each side), centred. Was fixed positions, so the subtitle box (30 tall) sat on the text and the admin's 5-line
   text ran to 11px above the button. Now the parts follow each other, so a longer text just makes the card a little
   taller. Font sizes unchanged. */
@media (max-width: 767px) {
  .why-sold-page-body .ws-founder-card.ws-founder-1 {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 7.888vw 0 10.9415vw !important;
    /* 31 top / 43 bottom */
    gap: 0 !important;
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-info {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-name,
  .why-sold-page-body .ws-founder-1 .ws-founder-subtitle,
  .why-sold-page-body .ws-founder-1 .ws-founder-bio,
  .why-sold-page-body .ws-founder-1 .ws-founder-btn,
  .why-sold-page-body .ws-founder-1 .ws-founder-photo-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-name {
    line-height: 5.3435vw !important;
    /* 21 tall */
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-subtitle {
    margin-top: 1.7812vw !important;
    /* 7 */
    line-height: 5.0891vw !important;
    /* 20 tall */
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-bio.d-lg-none {
    margin-top: 3.0534vw !important;
    /* 12 */
    padding: 0 5.8524vw !important;
    /* 23 each side -> 310 wide */
  }

  .why-sold-page-body .ws-founder-1 .ws-founder-btn {
    margin-top: 8.1425vw !important;
    /* 32 */
  }

  html body.why-sold-page-body .ws-founder-card.ws-founder-1 .ws-founder-photo-wrap {
    margin-top: 8.1425vw !important;
    /* 32 */
    height: 75.3181vw !important;
    /* 296 - same photo size as before */
    flex: 0 0 auto !important;
  }
}

/* TABLET UPRIGHT (768-1023px) - About info cards (2026-10-09): the
   description is floored at 12px but kept the desktop's 9px line-height
   and fixed card height, so the lines squashed together and ran out of
   the card. Readable line-height, a little more width, and cards tall
   enough for the longest text. Desktop / landscape / phones unchanged. */
@media (min-height: 501px) {
@container (min-width: 768px) and (max-width: 1023px) {
  .ws-about-right {
    height: auto !important;
  }

  .ws-about-right .ws-info-card {
    height: calc(16.9444cqi + 34px) !important;
  }

  .ws-about-right .ws-info-desc {
    top: 10.4cqi;
    left: 2.4cqi;
    width: 26.5889cqi;
    height: auto;
    line-height: 1.25;
  }
}
}