/* SOLD Real Estate Website - Custom CSS */

:root {
  --color-primary: #FFA726;
  --color-bg-light: #F4F5F5;
  --color-white: #FFFFFF;
  --color-dark-bg: #1B1E21;
  --color-darker-bg: #141619;
  --color-text-dark: #1E2024;
  --color-text-muted: #6C757D;
  --color-green: #1B3834;

  --font-heading: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
}

* {
  box-sizing: border-box;
}

.mobile-break {
  display: none;
}

html {
  background-color: #1B1E21;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
}

.page-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  container-type: inline-size;
  overflow-x: hidden;
  position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

.text-primary-brand {
  color: var(--color-primary) !important;
}

.bg-primary-brand {
  background-color: var(--color-primary) !important;
}

.logo-dot {
  color: var(--color-primary);
  font-size: 11.5972cqi;
  /* 167px */
  line-height: 5.5555cqi;
  /* 80px */
  vertical-align: baseline;
  letter-spacing: 0.04em;
}

/* ============================
   HEADER
   v1.0.60: back to position:absolute (its original, pre-sticky design) so
   it scrolls away with the page again - web + tablet only, same as before
   the v1.0.58 change that made it position:fixed throughout. The <=767px
   override below is untouched and still forces its own absolute floating
   pill for mobile regardless of any of this.

   Once the user has scrolled well past this tall header, a SEPARATE
   compact fixed bar (.site-header.is-compact, further down this file)
   takes over - same element, JS just toggles the class. See that block's
   comment for the compact bar itself; this one is only ever the tall,
   transparent-over-the-hero state.
   ============================ */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqi;
  /* Every child (logo/nav/cta) is absolutely positioned, so the header box
     has no natural content height - without an explicit one it would be
     0px tall.
     144px (not 113px, which only reached the logo's bottom edge and left the
     whole group sitting flush against the bar's bottom): the logo sits at
     top:31px and is 82px tall, and the nav pill and Book a Call button are
     already centred on that same axis - all three have their centre at 72px.
     31 + 82 + 31 = 144 puts the bar's own centre on 72px too, so the whole
     group is vertically centred without moving a single element off its
     Figma position. */
  height: 10cqi;
  z-index: 100;
  background: transparent;
}

.header-logo {
  position: absolute;
  top: 2.1527cqi;
  /* 31px */
  left: 4.0972cqi;
  /* 59px */
  width: 10.0694cqi;
  /* 145px */
  height: 5.6944cqi;
  /* 82px */
}

.site-logo {
  width: 100%;
  height: 100%;
  display: block;
}

.header-nav {
  position: absolute;
  top: 3.1597cqi;
  /* 45.5px */
  left: 19.0277cqi;
  /* 274px */
  width: 58.9583cqi;
  /* 849px */
  height: 3.6805cqi;
  /* 53px */
  display: block;
}

.main-nav-wrapper {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8.1944cqi;
  /* 118px */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-nav-wrapper nav {
  display: flex;
  align-items: center;
  gap: 4.375cqi;
  /* 63px */
  height: 100%;
}

.nav-link {
  color: #FFFFFF !important;
  font-family: "Inter", var(--font-body);
  font-size: 1.1111cqi;
  /* 16px */
  padding: 0 !important;
  font-weight: 600;
  transition: all 0.3s;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover {
  color: #fff !important;
}

.nav-link.active {
  color: var(--color-primary) !important;
}

/* Services Nav Dropdown */
.nav-item-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2778cqi;
  /* 4px */
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  padding: 0.2778cqi;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.nav-dropdown-toggle:focus {
  outline: none;
}

.nav-dropdown-arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.nav-item-dropdown.open .nav-dropdown-arrow,
.nav-item-dropdown:hover .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 1.25cqi;
  /* 18px gap under the pill nav */
  background: #FFFFFF;
  border-radius: 0.8333cqi;
  /* 12px */
  box-shadow: 0 0.8333cqi 2.2222cqi rgba(0, 0, 0, 0.16);
  padding: 0.5555cqi;
  /* 8px */
  min-width: 15.2777cqi;
  /* 220px */
  display: flex;
  flex-direction: column;
  gap: 0.1388cqi;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 500;
}

.nav-item-dropdown.open .nav-dropdown-menu,
.nav-item-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6944cqi;
  /* 10px */
  padding: 0.5555cqi 0.6944cqi;
  border-radius: 0.4166cqi;
  color: #1E2024;
  text-decoration: none;
  font-family: "Inter", var(--font-body);
  font-size: 0.9722cqi;
  /* 14px */
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-item:hover {
  background: rgba(255, 167, 38, 0.12);
  color: var(--color-primary);
}


.header-cta {
  position: absolute;
  top: 3.1597cqi;
  /* 45.5px */
  right: 2.7777cqi;
  /* 40px */
  width: 14.375cqi;
  /* 207px */
  height: 3.6805cqi;
  /* 53px */
}

.btn-book-call {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-radius: 8.1944cqi;
  /* 118px */
  width: 100%;
  height: 100%;
  font-weight: 600;
  font-size: 1.1111cqi;
  /* 16px */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  text-decoration: none;
  gap: 0.6944cqi;
  /* 10px */
  white-space: nowrap;
}

.btn-book-call:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.btn-book-call svg {
  width: 1.666cqi;
  /* 24px */
  height: 0.694cqi;
  /* 10px */
}

/* ============================
   COMPACT STICKY HEADER (v1.0.60)
   The SAME .site-header element as above - JS (main.js / main-v2.js) adds
   this class once the user has scrolled well past the tall header, and the
   tall header's own rules stop applying (position:fixed here wins over the
   plain position:absolute above). Web (992px+) shows the full logo/nav/CTA
   compact row below; the @container tablet block further down this file
   (768-991px, unchanged by this) keeps hiding .header-nav/.header-cta and
   showing the hamburger instead - same content as the tall header already
   shows at that width, just inside this shorter bar. Mobile is <=767px,
   entirely separate, untouched.

   Every child here was position:absolute for the tall bar's Figma-exact
   layout; that math does not shrink cleanly, so the compact bar resets them
   to a plain flex row instead - same technique the mobile override already
   uses for its own totally different layout.
   ============================ */
@media (min-width: 768px) {
  .site-header.is-compact {
    position: fixed;
    top: 0;
    left: 0;
    width: 100cqi;
    height: 5cqi;
    /* 72px - exactly half the tall header's 144px, and reuses that header's
       own established vertical centre-line (72px) as this bar's full height. */
    z-index: 100;
    background: #263238;
    /* brand dark, matching the pre-footer/footer - this bar has no hero
       behind it to stay transparent over, so it is always solid. */
    box-shadow: 0 0.6944cqi 1.3888cqi rgba(0, 0, 0, 0.15);
    /* 10px 20px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.7777cqi;
    /* 40px - matches the tall header's existing .header-cta right inset */
    box-sizing: border-box;
  }

  .site-header.is-compact .header-logo {
    position: static;
    width: 7.9861cqi;
    /* 115px, down from 145px - same ~1.77:1 aspect ratio */
    height: 4.5138cqi;
    /* 65px, down from 82px */
    flex-shrink: 0;
  }

  .site-header.is-compact .header-nav {
    position: static;
    width: auto;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    margin: 0 1.3888cqi;
    /* 20px breathing room from the logo/button on either side */
  }

  .site-header.is-compact .main-nav-wrapper {
    width: auto;
    /* auto shrinks the pill to hug its own content; header-nav's
       justify-content:center (above) still keeps it centred. */
    height: 2.7777cqi;
    /* 40px - shorter than the tall header's 53px pill, client-requested for
       the sticky/compact bar specifically; padding/gap/font-size and the
       72px outer bar height are all untouched, .main-nav-wrapper's own
       align-items:center keeps the nav items vertically centred at any
       height. */
    padding: 0 3.3333cqi;
    /* 48px - ensures end items 'Home' and 'Insights' don't touch the edges */
  }

  .site-header.is-compact .main-nav-wrapper nav {
    gap: 4.375cqi;
    /* 63px - same spacing as the tall header */
  }

  .site-header.is-compact .header-cta {
    position: static;
    width: auto;
    height: 2.7777cqi;
    /* 40px - matches the nav pill's own reduced height (client-requested,
       confirmed final). .btn-book-call fills this via its own height:100%
       and its base display:flex + align-items:center, so its text/arrow
       icon stay vertically centred (and level with the nav item text,
       since both pills now share the same 40px height and the same parent
       align-items:center) with no extra rule needed. */
    flex-shrink: 0;
  }

  .site-header.is-compact .btn-book-call {
    padding: 0 1.3888cqi;
    /* 20px horizontal padding */
    font-size: 1.1111cqi;
    /* 16px - same as the tall header */
  }
}

.mobile-menu-btn {
  display: none;
}

/* ============================
   HERO SECTION
   ============================ */
.hero-section {
  position: relative;
  width: 100cqi;
  height: 100vh;
  min-height: 500px;
  background: #141619;
  overflow: hidden;
  color: #fff;
}

.hero-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 100%;
  object-fit: fill;
  /* Exact 1440x825 aspect ratio will be maintained */
  z-index: 1;
}

.hero-overlay {
  display: none;
  /* Removing overlay as user wants exact background match */
}

.hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100cqi;
  height: 100%;
  z-index: 3;
}

.hero-text-block {
  position: absolute;
  top: 13.5416cqi;
  /* 195px */
  left: 7.0833cqi;
  /* 102px */
  width: 31.1111cqi;
  /* 448px */
  height: 16.5277cqi;
  /* 238px */
  display: flex;
  flex-direction: column;
  gap: 4.6527cqi;
  /* 67px */
}

.hero-text-block p {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 1.5277cqi;
  /* 22px */
  font-weight: 400;
  line-height: 2.0138cqi;
  /* 29px */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin: 0;
}

.btn-get-started {
  background: #FFFFFF;
  color: #1B3834;
  border-radius: 2.0138cqi;
  /* 29px */
  width: 22.8472cqi;
  /* 329px */
  height: 3.8194cqi;
  /* 55px */
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 2.0833cqi;
  /* 30px */
  letter-spacing: 0.02em;
  padding: 0;
  transition: all 0.3s;
}

.btn-get-started:hover {
  background: #f0f0f0;
  color: #1B3834;
}

.btn-get-started .icon-circle {
  background: #FFA726;
  width: 2.995833cqi;
  height: 2.995642cqi;
  min-width: 2.995833cqi;
  min-height: 2.995642cqi;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.7548cqi;
  margin-right: 1.1673cqi;
  flex-shrink: 0;
}

.btn-get-started .icon-circle svg {
  width: 1.666cqi;
  /* 24px */
  height: 0.694cqi;
  /* 10px */
}

.hero-title-container {
  position: absolute;
  top: 41.5277cqi;
  /* 598px - exact distance from top of hero banner (leaving bottom: 71px) */
  left: 21.3194cqi;
  /* 307px - exact distance from left screen edge (leaving right: 40px) */
  width: 75.9027cqi;
  /* 1093px (1440 - 307 - 40 = 1093px) */
  height: 10.8333cqi;
  /* 156px (825 - 598 - 71 = 156px) */
  pointer-events: none;
}

.hero-title-top {
  position: absolute;
  top: 0;
  /* 0px relative to container (598px from screen top) */
  left: 0;
  /* 0px relative to container (307px from screen left) */
  width: 75.9027cqi;
  /* 1093px */
  height: 5.4166cqi;
  /* 78px */
  margin: 0;
  font-family: "Mona Sans", var(--font-heading);
  font-size: 4.6527cqi;
  /* 67px */
  line-height: 5.4166cqi;
  /* 78px - vertically centered */
  color: #FFA726;
  white-space: nowrap;
  display: block;
  text-align: right;
}

.hero-title-top .orange-text {
  font-family: "Mona Sans", var(--font-heading);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-title-top .orange-space {
  letter-spacing: 0.06em;
}

.hero-title-top .orange-italic {
  font-family: "Mona Sans", var(--font-heading);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline;
}

.hero-title-bottom {
  position: absolute;
  top: 5.4166cqi;
  /* 78px relative to container (676px from screen top) */
  left: 0;
  /* 0px relative to container (307px from screen left) */
  width: 75.9027cqi;
  /* 1093px */
  height: 5.4166cqi;
  /* 78px */
  margin: 0;
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 700;
  font-size: 4.7916cqi;
  /* 69px */
  line-height: 5.4166cqi;
  /* 78px - vertically centered in container */
  letter-spacing: 0.02em;
  color: #FFFFFF;
  white-space: nowrap;
  display: block;
  text-align: right;
}

/* ============================
   SECTION LABEL
   ============================ */
.section-label {
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.0694cqi;
  /* 1px */
  font-size: 0.9722cqi;
  /* 14px */
  margin-bottom: 2.0833cqi;
  /* 30px */
  display: flex;
  align-items: center;
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 0.2083cqi;
  /* 3px */
  height: 1.1111cqi;
  /* 16px */
  background: var(--color-primary);
  margin-right: 0.6944cqi;
  /* 10px */
}

.section-label-light {
  color: var(--color-primary);
}

.section-label-light::before {
  background: var(--color-primary);
}

/* ============================
   WHAT WE DO SECTION
   ============================ */
.what-we-do-section {
  background: #F4F5F5;
  position: relative;
  z-index: 2;
  /* Create stacking context to overlap subsequent sections if needed */
  padding-bottom: 0;
  /* Removed padding to strictly rely on the next container's margin-top of 124px */
}


.what-we-do-container {
  width: 100%;
}

.who-we-work-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5.9027cqi;
  /* 85px (145px top header + 85px gap = exactly 230px top distance for cards below) */
  margin-top: 8.6111cqi;
  /* 124px */
  margin-left: 6.5972cqi;
  /* 95px - exact distance from left screen edge */
  margin-right: 6.5972cqi;
  /* 95px - exact distance from right screen edge */
  width: 86.8055cqi;
  /* 1250px */
  height: 38.4722cqi;
  /* 554px (145px header + 85px gap + 324px cards = exactly 554px) */
}

.who-header-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 83.7500cqi;
  /* 1206px (1250 - 44 = 1206px, leaving exactly right: 0px to main container) */
  height: 10.0694cqi;
  /* 145px (leaving exactly bottom: 409px from 554px main container) */
  gap: 5.1388cqi;
  /* 74px - exact gap between title container (862px) and discover container (270px) */
  flex-shrink: 0;
  margin-top: 0;
  /* 0px top distance to main container */
  margin-left: 3.0555cqi;
  /* 44px left distance to main container */
  margin-right: 0;
  /* 0px right distance to main container */
  margin-bottom: 0;
}

.who-title-wrapper {
  width: 59.8611cqi;
  /* 862px */
  height: 10.0694cqi;
  /* 145px */
  display: flex;
  align-items: flex-end;
}

.who-title {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 5.1388cqi;
  /* 74px */
  font-weight: 700;
  line-height: 5.5555cqi;
  /* 80px */
  color: #263238;
  margin: 0;
  letter-spacing: 0;
}

.who-title .logo-dot {
  color: #FFA726;
}

.btn-discover-now {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 18.7500cqi;
  /* 270px */
  height: 4.2361cqi;
  /* 61px */
  background: #263238;
  border-radius: 2.0138cqi;
  /* 29px */
  padding: 0 2.0833cqi 0 0.5555cqi;
  /* 0 30px 0 8px */
  text-decoration: none;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: 0;
}

.btn-discover-now .icon-circle {
  width: 3.0555cqi;
  /* 44px */
  height: 3.0555cqi;
  /* 44px */
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1.0416cqi;
  /* 15px */
}

.btn-discover-now .btn-text {
  font-family: "Inter", var(--font-body);
  font-size: 1.3888cqi;
  /* ~20px */
  color: #FFFFFF;
  font-weight: 400;
}

.what-we-do-header {
  display: flex;
  align-items: flex-start;
  gap: 7.7777cqi;
  /* 112px */
  margin-top: 5.5555cqi;
  /* 80px */
  margin-left: 3.4027cqi;
  /* 49px */
  width: 91.6666cqi;
  /* 1320px */
  height: 13.8888cqi;
  /* 200px */
}

.what-we-do-label-wrap {
  position: relative;
  flex-shrink: 0;
  width: 15.625cqi;
  /* 225px */
  height: 3.4027cqi;
  /* 49px */
}

.what-we-do-label-wrap::before {
  content: "";
  position: absolute;
  left: 1.3340cqi;
  /* 19.21px */
  top: 0.7520cqi;
  /* 10.83px */
  width: 0.3938cqi;
  /* 5.67px */
  height: 2.4439cqi;
  /* 35.19px */
  background: #FFA726;
  opacity: 1;
}

.what-we-do-label {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 600;
  font-size: 2.0833cqi;
  /* 30px */
  line-height: 2.0833cqi;
  /* 30px */
  letter-spacing: 0;
  color: #FFA726;
  position: absolute;
  top: 0.9322cqi;
  /* ~13.4px (vertically centered with the 35.19px line) */
  left: 2.4305cqi;
  /* ~35px (19.21px line + 5.67px width + 10px gap) */
  width: 11.8055cqi;
  /* 170px */
  height: 2.0833cqi;
  /* 30px */
  margin: 0;
}

.what-we-do-text-wrap {
  flex: 1;
}

.what-we-do-lead {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 2.7083cqi;
  /* 39px */
  line-height: 3.4722cqi;
  /* 50px */
  letter-spacing: 0.01em;
  /* 1% */
  color: #000000;
  margin: 0;
  width: 68.2638cqi;
  /* 983px */
  height: 13.8888cqi;
  /* 200px */
}

/* ============================
   WHAT WE DO - FEATURES GRID
   ============================ */
.what-we-do-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 6.1805cqi;
  /* 89px relative to header/top */
  margin-left: 8.6111cqi;
  /* 124px - exact distance from left screen edge */
  margin-right: 8.7500cqi;
  /* 126px - exact distance from right screen edge */
  width: 82.6388cqi;
  /* 1190px (1440 - 124 - 126 = 1190px) */
  height: 39.7222cqi;
  /* 572px */
  gap: 5.9027cqi;
  /* 85px */
  position: relative;
}

/* Vertical line between logo and content on left side */
.what-we-do-content::before {
  content: "";
  position: absolute;
  top: 4.3750cqi;
  /* 63px */
  left: 8.1250cqi;
  /* 117px */
  width: 0.0694cqi;
  /* 1px */
  height: 35.2777cqi;
  /* 508px */
  background: linear-gradient(180deg, #C8C9C9 0%, #EAEBEB 95.47%);
  z-index: 1;
}

/* Vertical line between left container and right container */
.what-we-do-content::after {
  content: "";
  position: absolute;
  top: 0.9027cqi;
  /* 13px */
  left: 41.7361cqi;
  /* 601px */
  width: 0.0694cqi;
  /* 1px */
  height: 45.2777cqi;
  /* 652px - crosses bottom of container by 93px */
  background: linear-gradient(0deg, #C8C9C9 0%, #EAEBEB 95.47%);
  z-index: 1;
}

@media (max-width: 767px) {
  .what-we-do-content::after {
    background: linear-gradient(180deg, #C8C9C9 0%, #EAEBEB 95.47%);
  }
}

.features-left {
  display: flex;
  flex-direction: column;
  gap: 3.1944cqi;
  /* 46px - exact gap between Design, Launch, and Sell */
  width: 39.6527cqi;
  /* 571px */
  height: 32.5694cqi;
  /* 469px */
  align-self: center;
  /* Locks Top to exactly 51.5px and Bottom to 51.5px */
}

.features-right {
  width: 37.0833cqi;
  /* 534px */
  height: 39.7222cqi;
  /* 572px */
  margin-left: auto;
  /* Locks left offset to exactly 656px (571px + 85px) and right to 0 */
  border-radius: 1.1111cqi;
  /* 16px */
  overflow: hidden;
  /* Ensure rounded corners clip cleanly */
  background: transparent;
  /* Removed white background */
}

.features-grid {
  display: flex;
  flex-direction: column;
  gap: 3.1944cqi;
  /* 46px - exact gap between Design, Launch, and Sell */
  width: 100%;
  position: relative;
}

.feature-grid-item {
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
  gap: 4.5138cqi;
  /* 65px */
}

.feature-icon-cell {
  width: 5.9722cqi;
  /* 86px - exact Figma logo container width (left: 124px, right: 1230px) */
  padding-top: 1.4021cqi;
  /* 20.19px - exact Figma top coordinate offset */
  padding-bottom: 1.4021cqi;
  /* 20.19px - exact Figma bottom coordinate offset */
  padding-left: 0;
  padding-right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* Align logo strictly to left 124px coordinate without centering offset */
  flex-shrink: 0;
}

.placeholder-svg-icon {
  object-fit: cover !important;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Feature 1: Design Logo (75x63) */
.feature-grid-item:nth-child(1) .placeholder-svg-icon {
  width: 5.2083cqi;
  /* 75px */
  height: 4.3750cqi;
  /* 63px */
}

/* Feature 2: Launch Logo (66.31x86.77) */
.feature-grid-item:nth-child(2) .placeholder-svg-icon {
  width: 4.6048cqi;
  /* 66.31px */
  height: 6.0255cqi;
  /* 86.77px */
}

/* Feature 3: Sell Logo (86x84) */
.feature-grid-item:nth-child(3) .placeholder-svg-icon {
  width: 5.9722cqi;
  /* 86px */
  height: 5.8333cqi;
  /* 84px */
}

.feature-content-cell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 29.1666cqi;
  /* 420px */
  max-width: 29.1666cqi;
  min-width: 29.1666cqi;
  flex-shrink: 0;
}

/* Constrain the Design text to 385px so it naturally wraps to exactly 4 lines like Figma */
.feature-grid-item:nth-child(1) .feature-content-cell {
  width: 26.7361cqi;
  /* 385px */
  max-width: 26.7361cqi;
  min-width: 26.7361cqi;
}

/* Horizontal line between items */
.feature-grid-item:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -2.2569cqi;
  /* -32.5px */
  left: -3.8888cqi;
  /* -56px */
  width: 38.3333cqi;
  /* 552px */
  height: 0.5555cqi;
  /* 8px */
  background: url('../assets/images/horizontal-line.png') no-repeat left center;
  background-size: 100% 100%;
}

.feature-content-cell h3 {
  font-family: "Poppins", var(--font-heading);
  font-size: 1.3888cqi;
  /* 20px */
  font-weight: 600;
  line-height: 2.0833cqi;
  /* 30px */
  letter-spacing: 0;
  color: #1E1D42;
  margin-bottom: 1.0416cqi;
  /* 15px */
}

.feature-content-cell p {
  font-family: "Inter", var(--font-body);
  color: #504B4B;
  font-size: 1.25cqi;
  /* 18px */
  font-weight: 500;
  line-height: 1.5277cqi;
  /* 22px */
  letter-spacing: 0.01em;
  margin: 0;
}

.building-img {
  width: 100%;
  height: 100%;
  border-radius: 1.1111cqi;
  /* 16px */
  object-fit: fill;
  /* Shows 100% of the image from top to bottom without cropping or hiding anything */
  background: transparent;
  display: block;
}

/* ============================
   WHY SOLD SECTION
   ============================ */
.why-sold-section {
  background: #F4F5F5;
  padding-top: 6.3888cqi;
  /* 92px */
  padding-bottom: 6.3888cqi;
  /* 92px - so total visible gap from map end (at 553px) to Insights is exactly 110px (18px + 92px) */
  position: relative;
  overflow: hidden;
  width: 100cqi;
}

.why-sold-container {
  width: 93.8472cqi;
  /* 1351.4px */
  height: 39.6527cqi;
  /* 571px - exact container height from Figma */
  margin-left: 3.0555cqi;
  /* 44px */
  position: relative;
}

.why-sold-header {
  position: absolute;
  top: 2.7777cqi;
  /* 40px - so gap to 20 Years container at 121px is exactly 32px */
  left: 3.5416cqi;
  /* 51px to align with .why-sold-inner-content */
}

.why-sold-label {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 600;
  font-size: 2.0833cqi;
  /* 30px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFA726;
  position: relative;
  padding-left: 1.0416cqi;
  /* 15px */
  display: inline-flex;
  align-items: center;
}

.why-sold-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4166cqi;
  /* 6px */
  height: 2.4305cqi;
  /* 35px */
  background: #FFA726;
}

.why-sold-inner-content {
  position: absolute;
  top: 8.4027cqi;
  /* 121px */
  left: 3.5416cqi;
  /* 51px */
  width: 46.2777cqi;
  /* 666.4px */
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.years-header {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 2.2222cqi;
  /* 32px - exact gap to description text */
}

.years-text {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 7.4305cqi;
  /* 107px */
  font-weight: 600;
  line-height: 1;
  color: #263238;
  letter-spacing: 0;
  white-space: nowrap;
  width: 33.3333cqi;
  /* 480px */
  height: 12.9861cqi;
  /* 187px - exact height from Figma node 594-1336 */
  margin: 0;
  display: flex;
  align-items: center;
}

.years-sub {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 2.5777cqi;
  /* 44px (increased from 34px) */
  font-weight: 600;
  line-height: 3.6111cqi;
  /* 52px */
  color: #263238;
  width: auto;
  /* changed to auto to prevent clipping */
  height: auto;
  /* changed to auto to accommodate larger text */
  margin: 0;
  margin-top: -2.5cqi;
  /* -36px - exact Figma overlap */
}

.years-desc {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1.5277cqi;
  /* 22px */
  line-height: 2.2916cqi;
  /* 33px */
  letter-spacing: 0.02em;
  /* 2% */
  color: #757F84;
  width: 43.75cqi;
  /* 630px */
  height: 6.875cqi;
  /* 99px */
  margin: 0;
  margin-bottom: 2.4305cqi;
  /* 35px - exact gap to Our Offices text */
}

.offices-text {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 1.8055cqi;
  /* 26px */
  font-weight: 500;
  line-height: 2.0833cqi;
  /* 30px */
  color: #000000;
  width: 46.2777cqi;
  /* 666.4px */
  height: 2.0833cqi;
  /* 30px */
  margin: 0;
  display: flex;
  align-items: center;
}

.offices-text .text-primary-brand {
  font-weight: 500;
  color: var(--color-primary);
}

.world-map-img {
  position: absolute;
  top: 9.3055cqi;
  /* 134px - Figma exact top */
  right: 0;
  width: 51.5972cqi;
  /* 743px */
  height: 29.0972cqi;
  /* 419px - Figma exact height */
  object-fit: cover !important;
  z-index: 1;
}

.mobile-break {
  display: none;
}

/* ============================
   TESTIMONIALS
   ============================ */
.testimonials-section {
  background: var(--color-bg-light);
  padding: 0 0 5.5555cqi 0;
  /* 80px */
  overflow: hidden;
  /* Enables the bleed effect for partial cards */
}

.testimonials-section .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
}

.testimonials-title {
  width: 87.9166cqi;
  /* 1266px width leaves 87px on each side */
  font-family: "Mona Sans", var(--font-heading);
  font-size: 7.4305cqi;
  /* 107px */
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  letter-spacing: 0.03em;
  line-height: 6.7361cqi;
  /* 97px */
  padding-top: 1.3888cqi;
  /* 20px */
  padding-bottom: 1.3888cqi;
  /* 20px */
  box-sizing: content-box;
  margin-top: -1.3888cqi;
  /* -20px */
  margin-bottom: 1.3194cqi;
  /* 19px (plus 20px padding = 39px gap) */
  background: linear-gradient(180deg, #D2D3D3 13.4%, #F4F5F5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}

.testimonials-carousel-wrapper {
  width: 100%;
  overflow: hidden;
  /* Hide the overflow for partial card visibility */
}

.testimonials-track {
  display: flex;
  gap: 1.1111cqi;
  /* 16px */
  justify-content: center;
  /* Total track: 4 cards (33.4722cqi each) + 3 gaps (1.1111cqi each) = 137.222cqi
     Overflow per side: (137.222cqi - 100cqi) / 2 = 18.611cqi (~268px at 1440px) */
  margin-left: -18.611cqi;
  margin-right: -18.611cqi;
}

.testimonial-card {
  background: #fff;
  border-radius: 0.5555cqi;
  /* 8px */
  width: 33.4722cqi;
  /* 482px */
  min-width: 33.4722cqi;
  /* 482px - prevent shrinking */
  height: 23.8194cqi;
  /* 343px */
  position: relative;
  box-shadow: 0 0.2777cqi 1.3888cqi rgba(0, 0, 0, 0.04);
  /* 0 4px 20px */
  border: 1px solid #f0f0f0;
  flex-shrink: 0;
  overflow: hidden;
}

.testi-header {
  padding: 0;
}

.client-logo {
  object-fit: contain !important;
  object-position: left center;
  position: absolute;
  z-index: 0;
  /* Behind stars and quote box */
}

/* Ellington logo - Figma: x:34, y:20, w:175, h:79 relative to 482x343 card */
/* Cropped image: 191x75 (no whitespace) */
.logo-ellington {
  width: 39.419%;
  /* Client-requested +15px, width only: 175/482=36.307% (Figma) + 15px ->
     190/482=39.419%. Height/left/top ("starting" position) untouched. */
  height: 23.032%;
  /* 79/343 */
  top: 5.831%;
  /* 20/343 */
  left: 7.054%;
  /* 34/482 */
  margin-top: 0;
}

/* Banyan logo - Figma: x:45, y:26, w:139, h:73 relative to 482x343 card */
/* Cropped image: 246x131 (no whitespace) */
.logo-banyan {
  width: 31.9502%;
  /* Client-requested +15px, width only: 139/482=28.838% (Figma) + 15px ->
     154/482=31.9502%. Height/left/top ("starting" position) untouched. */
  height: 21.283%;
  /* 73/343 */
  top: 7.58%;
  /* 26/343 */
  left: 9.336%;
  /* 45/482 */
}

/* Regus logo - Figma: x:49, y:25, w:111, h:60 relative to 482x343 card */
/* Cropped image: 223x116 (no whitespace) */
.logo-regus {
  width: 26.1411%;
  /* Client-requested +15px, width only: 111/482=23.029% (Figma) + 15px ->
     126/482=26.1411%. Height/left/top ("starting" position) untouched. */
  height: 17.493%;
  /* 60/343 */
  top: 7.289%;
  /* 25/343 */
  left: 10.166%;
  /* 49/482 */
}

/* Stars - Figma: x:312.62, y:112.68, w:138.09, h:22.22 relative to 482x343 card */
.testi-stars {
  position: absolute;
  top: 32.852%;
  /* 112.68/343 */
  left: 64.858%;
  /* 312.62/482 */
  z-index: 1;
  /* Above logo */
}

.testi-stars img {
  width: 9.5895cqi;
  /* 138.09px - keep vw for consistent sizing */
  height: 1.5430cqi;
  /* 22.22px */
}

/* Quote box - Figma: x:14.85, y:158.44, w:437.36, h:116.84 relative to 482x343 card */
.testi-quote-box {
  background: #263238;
  position: absolute;
  top: 46.193%;
  /* 158.44/343 */
  left: 3.081%;
  /* 14.85/482 */
  width: 90.738%;
  /* 437.36/482 */
  height: 34.063%;
  /* 116.84/343 */
  margin: 0;
  border-radius: 0.5555cqi;
  /* 8px */
  padding: 2.2916cqi 1.8055cqi;
  /* 33px 26px */
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  z-index: 2;
  /* Above logo and stars */
}

/* Quote text - Figma: Poppins Medium 16px, line-height 20px, letter-spacing 0.05em */
.testi-quote {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.1111cqi;
  /* 16px */
  line-height: 1.3888cqi;
  /* 20px */
  letter-spacing: 0.05em;
  color: #FFFFFF;
  flex: 1;
  margin: 0;
}

/* Quote icon (double quotes) - positioned at bottom-right of quote box */
/* Figma: x:337.15, y:57.56 relative to 437.36x116.84 quote box */
.testi-quote-icon {
  width: 3.8888cqi;
  /* 56px */
  height: 3.8888cqi;
  /* 56px */
  position: absolute;
  bottom: 2.806%;
  /* ~3.28px from bottom of quote box: (116.84-57.56-56)/116.84 */
  right: 10.113%;
  /* ~44.21px from right of quote box: (437.36-337.15-56)/437.36 */
}

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

/* Custom Carousel Controls */
.testimonials-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.6388cqi;
  /* 38px - from Figma gap */
  width: 75.9166cqi;
  /* 1050px - increased length for both sides */
  max-width: 75.1166cqi;
  height: 4.074cqi;
  /* 58.67px - exact Figma height */
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.carousel-btn {
  width: 2.7777cqi;
  /* 40px */
  height: 2.7777cqi;
  /* 40px */
  border: 1px solid #EAEAEA;
  background: #fff;
  border-radius: 0.2777cqi;
  /* 4px */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.carousel-btn:hover {
  background: #f8f8f8;
}

.carousel-track-line {
  flex: 1;
  height: 1px;
  background: #EAEAEA;
  margin: 0 1.3888cqi;
  /* 20px */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-dots-center {
  background: var(--color-bg-light);
  padding: 0 1.0416cqi;
  /* 15px */
  display: flex;
  gap: 0.5555cqi;
  /* 8px */
  align-items: center;
}

.carousel-dots-center .dot {
  width: 0.6944cqi;
  /* 10px */
  height: 0.6944cqi;
  /* 10px */
  border-radius: 50%;
  border: 1px solid #ccc;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dots-center .mobile-only-dot {
  display: none !important;
}

.carousel-dots-center .dot.active {
  width: 0.9722cqi;
  /* 14px */
  height: 0.9722cqi;
  /* 14px */
  border: 1.5px solid #000;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-dots-center .dot.active::after {
  content: "";
  position: absolute;
  width: 0.4166cqi;
  /* 6px */
  height: 0.4166cqi;
  /* 6px */
  background: #000;
  border-radius: 50%;
}

/* ============================
   SERVICES LIST SECTION
   ============================ */
.services-list-section {
  background: #263238;
  color: #fff;
  padding: 0;
  border-radius: 3.125cqi;
  /* 45px - exact Figma border-radius */
  width: 100cqi;
  /* Was a hard height: 94.5138cqi (1361px). The expanded accordion image is
     now shown full-width, so its height varies with each photo's aspect
     ratio - the section has to be able to grow past the Figma height rather
     than let the accordion spill out of its rounded background. */
  min-height: 94.5138cqi;
  height: auto;
  /* 308.08px - the accordion's offset lives here as padding rather than as a
     margin on the accordion itself: with no padding-top the child's margin
     collapsed straight through the section and shoved the whole section down
     instead of placing the accordion. Padding does not move the absolutely
     positioned header, which resolves against the padding box edge. */
  padding-top: 21.3944cqi;
  padding-bottom: 8.4938cqi;
  /* 122.31px - preserves the original gap under the accordion */
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

.services-header-top {
  position: absolute;
  width: 87.2916cqi;
  /* 1257px - exact Figma width (leaves 100px right distance) */
  height: 10.3472cqi;
  /* 149px - exact Figma height (leaves 1136px bottom distance) */
  top: 5.2777cqi;
  /* 76px - exact Figma top distance */
  left: 5.7638cqi;
  /* 83px - exact Figma left distance */
  margin: 0;
  padding: 0;
}

.services-label-wrap {
  position: absolute;
  top: 0.8402cqi;
  /* 12.1px - exact Figma top */
  left: 0;
  width: 10.8105cqi;
  /* 155.67px - exact Figma width */
  height: 2.4951cqi;
  /* 35.93px - exact Figma height */
  display: flex;
  align-items: center;
  gap: 0.9027cqi;
  /* 13px - exact Figma gap */
}

.services-line {
  width: 0.3938cqi;
  /* 5.67px */
  height: 2.4951cqi;
  /* 35.93px */
  background: #FFFFFF;
  flex-shrink: 0;
}

.services-text {
  width: 9.5138cqi;
  /* 137px - exact Figma width */
  height: 2.0729cqi;
  /* 29.85px - exact Figma height */
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 600;
  font-size: 2.0833cqi;
  /* 30px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
}

.services-title {
  position: absolute;
  top: 0;
  left: 22.7034cqi;
  /* 326.93px - exact Figma left */
  width: 42.8472cqi;
  /* 617px - exact Figma width */
  height: 10.3633cqi;
  /* 149.23px - exact Figma height */
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 3.0555cqi;
  /* 44px */
  line-height: 3.4722cqi;
  /* 50px */
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
}

.services-all-btn {
  position: absolute;
  top: 5.2354cqi;
  /* 75.39px - exact Figma top */
  left: 71.4534cqi;
  /* 1028.93px - exact Figma left */
  width: 15.8425cqi;
  /* 228.13px - exact Figma width */
  height: 3.8018cqi;
  /* 54.75px - exact Figma height */
  background: #FFFFFF;
  border-radius: 1.875cqi;
  /* 27px */
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 1.25cqi;
  /* 18px - exact Figma gap */
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.services-all-btn:hover {
  background: #f0f0f0;
}

.services-all-btn .btn-icon {
  width: 3.0506cqi;
  /* 43.93px - exact Figma width */
  height: 2.9698cqi;
  /* 42.77px - exact Figma height */
  background: #FFA726;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.5555cqi;
  /* 8px */
  flex-shrink: 0;
  padding: 1.1805cqi 0.4861cqi;
  /* 17px 7px - exact Figma padding */
  box-sizing: border-box;
}

.services-all-btn .btn-text {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 3.75cqi;
  /* 54px */
  color: #000000;
  width: 9.5833cqi;
  /* 138px - exact Figma width */
  height: 3.75cqi;
  /* 54px - exact Figma height */
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 1;
}

/* Responsive fallbacks for services header */
@media (max-width: 767px) {
  .services-title {
    left: 350px;
    width: 500px;
    font-size: 38px;
    line-height: 44px;
  }

  .services-all-btn {
    left: 900px;
  }
}

@media (max-width: 767px) {
  .services-header-top {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 40px;
  }

  .services-label-wrap,
  .services-title,
  .services-all-btn {
    position: static;
    margin: 0 0 20px 0;
  }

  .services-title {
    width: 100%;
  }
}

/* ============================
   WHO DO WE WORK WITH SECTION
   ============================ */
.who-we-work-section {
  background: #F5F5F5;
  padding-bottom: 5.5555cqi;
  /* 80px */
}


.services-accordion-new {
  /* In flow (not absolute) so the section grows with it when an expanded
     image is taller than the old fixed 930.69px. Margins reproduce the exact
     Figma offsets the absolute top/left used to give. Mobile already does
     exactly this - see the max-width:767px override. */
  position: relative;
  margin-top: 0;
  /* vertical offset now comes from .services-list-section's padding-top */
  margin-left: 5.0756cqi;
  /* 73.09px - was left */
  width: 91.3738cqi;
  /* 1315.78px - exact Figma width */
  min-height: 64.6311cqi;
  /* 930.69px - the old fixed height, now a floor */
  height: auto;
  display: flex;
  flex-direction: column;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  opacity: 1;
}

.service-list-item {
  display: flex;
  align-items: stretch;
  cursor: pointer;
  overflow: hidden;
}

.service-list-item:last-child .service-left {
  border-bottom: none;
}

.service-left {
  width: 44.0909cqi;
  /* 634.91px - exact Figma width */
  flex: 0 0 44.0909cqi;
  display: flex;
  border-top: 1px solid #979DA0;
  box-sizing: border-box;
}

.service-num-col {
  width: 11.0298cqi;
  /* 158.83px - exact Figma left gap of vertical line */
  padding-left: 4.3055cqi;
  /* 62px */
  padding-top: 0.4861cqi;
  /* 7px */
  padding-bottom: 0.4861cqi;
  /* 7px */
  display: flex;
  flex-direction: column;
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
}

.service-num-col .num {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 1.3888cqi;
  /* 20px */
  line-height: 3.75cqi;
  /* 54px - exact Figma height */
  color: #FFFFFF;
  width: 1.6666cqi;
  /* 24px - exact Figma width (leaves 1229.78px right gap) */
  height: 3.75cqi;
  /* 54px */
  display: inline-block;
  box-sizing: border-box;
}

.service-num-col .vertical-line {
  display: block;
  position: absolute;
  top: 0.1888cqi;
  /* 2.72px - exact Figma top offset */
  right: 0;
  width: 0.0694cqi;
  /* 1px */
  height: 4.8214cqi;
  /* 69.43px - exact Figma height */
  background: #979DA0;
}

.service-content-col {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-left: 1.3729cqi;
  /* 19.77px - exact gap between vertical line and heading when closed */
  padding-right: 0;
  padding-top: 0.4861cqi;
  /* 7px */
  padding-bottom: 0.4861cqi;
  /* 7px */
  width: 33.3868cqi;
  /* 480.77px (461px content + 19.77px padding) */
  box-sizing: border-box;
}

.service-content-col .title {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 2.2222cqi;
  /* 32px */
  line-height: 3.75cqi;
  /* 54px - fits within 126px container (54 + 9 gap + 63 desc) */
  color: #FFFFFF;
  display: block;
}

/* Removed opacity fading for active/inactive */

.service-list-item.active .service-content-col {
  padding-top: 6.7305cqi;
  /* 96.92px - exact top position pushing content down */
  padding-left: 1.7201cqi;
  /* 24.77px - exact gap between vertical line and heading/content */
  width: 33.7339cqi;
  /* 485.77px (461px content + 24.77px padding with border-box) */
  overflow: hidden;
}

.service-list-item.active .service-content-col .title {
  margin-bottom: 0.625cqi;
  /* 9px - exact gap between title and description */
}

.service-list-item.active .service-num-col .vertical-line {
  top: 0.2833cqi;
  /* 4.08px - exact Figma top offset in open card */
  height: 4.7076cqi;
  /* 67.79px - exact Figma height in open card (no vertical stretching) */
  width: 0.0701cqi;
  /* 1.01px - exact Figma width in open card */
}

.service-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  overflow: hidden;
}

.service-list-item.active .service-body {
  grid-template-rows: 1fr;
  width: 31.5277cqi;
  /* 454px - exact Figma width */
  height: 24.0583cqi;
  /* 346.44px - exact Figma height */
}

.service-body-inner {
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

.service-list-item.active .service-body-inner {
  padding-bottom: 1.3888cqi;
  /* 20px */
  width: 31.5277cqi;
  /* 454px - exact Figma width */
  height: 24.0583cqi;
  /* 346.44px - exact Figma height */
  box-sizing: border-box;
  overflow: hidden;
}

.service-desc {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.3888cqi;
  /* 20px */
  line-height: 1.4583cqi;
  /* 21px */
  letter-spacing: 0;
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 31.5277cqi;
  /* 454px - matches container width */
}

.service-features {
  list-style: none;
  padding: 0;
  margin-top: 1.4256cqi;
  /* 20.53px - gap so title→features = 77.53px (9px desc-gap + 48px desc-height + 20.53px) */
  margin-bottom: 2.1263cqi;
  /* 30.62px - exact gap from features container to Read More btn */
  margin-left: 0;
  margin-right: 0;
}

.service-features li {
  display: flex;
  align-items: center;
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.3194cqi;
  /* 19px */
  line-height: 0.9722cqi;
  /* 14px */
  letter-spacing: 0.03em;
  color: #FFFFFF;
  margin-bottom: 1.3888cqi;
  /* 20px */
}

.service-features li:last-child {
  margin-bottom: 0;
}

.service-features li .plus-icon {
  width: 1.5277cqi;
  /* 22px */
  height: 1.5277cqi;
  /* 22px */
  margin-right: 1.0416cqi;
  /* 15px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-read-more-pill {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 1.875cqi;
  /* 27px */
  padding-right: 1.7361cqi;
  /* 25px */
  height: 3.75cqi;
  /* 54px */
  margin-top: 1.3888cqi;
  /* 20px - moves ONLY the Read More button down */
  text-decoration: none;
  width: fit-content;
}

.btn-read-more-pill:hover {
  background: #f0f0f0;
}

.btn-read-more-pill .btn-icon-orange {
  width: 3.0555cqi;
  /* 44px */
  height: 3.0555cqi;
  /* 44px */
  background: #FFA726;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0.3472cqi;
  /* 5px */
  margin-right: 1.0416cqi;
  /* 15px */
}

.btn-read-more-pill .btn-text {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 3.75cqi;
  /* 54px */
  letter-spacing: -0.02em;
  color: #000;
}

.service-image-strip {
  flex-grow: 1;
  height: 4.8194cqi;
  /* 69.4px */
  overflow: hidden;
  transition: height 0.4s ease;
  /* Matches the section's own dark background so the letterboxing left by
     object-fit: contain (below) reads as part of the panel, not as a gap. */
  background: #263238;
}

.service-list-item.active .service-image-strip {
  /* Height follows the image now that it is shown at full container width.
     The old fixed 513.36px becomes the floor so a wide/short photo never
     makes the open row shorter than it used to be. */
  height: auto;
  min-height: 35.65cqi;
}

/* Collapsed strip: keep the original cropped landscape band. These are only
   69.4px tall, so letterboxing a whole (near-square) photo in here would
   shrink it to a tiny centred sliver instead of a thumbnail. */
.service-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Expanded item only: the photo spans the full width of the strip - the same
   width the collapsed strip already has - and its height follows naturally,
   so the whole photo is visible with no cropping and no side letterboxing. */
.service-list-item.active .service-image-strip img {
  width: 100%;
  height: auto;
  object-fit: fill;
  display: block;
}

.service-list-item:last-child {
  border-top: none;
  /* Removes horizontal divider above 07 */
}



/* ============================
   WHO WE WORK WITH
   ============================ */
.who-we-work-section {
  padding-top: 1.5972cqi;
  /* 95px */
  padding-bottom: 7.9166cqi;
  /* 114px */
  background: var(--color-bg-light);
}

.who-we-work-container {
  width: 86.8055cqi;
  /* 1250px */
  height: 62.5cqi;
  margin-left: 6.0416cqi;
  /* 87px left screen gap */
  position: relative;
}

.who-title-wrapper {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 59.8611cqi;
  /* 862px */
}

.who-title {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 5.1388cqi;
  /* 74px */
  font-weight: 700;
  line-height: 5.5555cqi;
  /* 80px */
  letter-spacing: 0;
  color: #263238;
  margin: 0;
}

.who-title .logo-spacer {
  display: inline-block;
  width: 14.0cqi;
  /* 202px - aligns WORK directly below DO */
}

.who-title-logo {
  position: absolute;
  top: 4.5833cqi;
  /* 66px - moved up 13px so baseline of SOLD aligns perfectly on the same line as WORK WITH? */
  left: -1.5cqi;
  /* shifted slightly right as requested */
  width: 16.444cqi;
  /* 240px - exact Figma box width */
  height: 5.6944cqi;
  /* 82px - exact Figma box height */
  box-sizing: border-box;
  padding: 0.8333cqi 1.9791cqi;
  /* 12px 28.5px - optical padding so logo letter size matches exact 74px font size of surrounding text */
  object-fit: cover !important;
}

@media (min-width: 768px) {
  .who-title-logo {
    object-fit: contain !important;
  }
}

.who-header-top {
  position: absolute;
  top: 0;
  left: 2.5694cqi;
  /* 37px */
  bottom: 51.3194cqi;
  /* 739px */
  right: 24.3750cqi;
  /* 351px */
  display: flex;
  align-items: flex-end;
  width: 59.8611cqi;
  /* 862px */
  height: 11.1805cqi;
  /* 161px */
  margin: 0;
}

.btn-discover-now {
  position: relative;
  display: block;
  background: #263238;
  border-radius: 2.0138cqi;
  /* 29px */
  text-decoration: none;
  width: 18.7500cqi;
  /* 270px */
  height: 4.2361cqi;
  /* 61px */
  flex-shrink: 0;
  margin-bottom: 0.3472cqi;
  /* 5px */
  padding: 0;
}

.btn-discover-now:hover {
  background: #1f282d;
}

.btn-discover-now .icon-circle {
  position: absolute;
  top: 0.5555cqi;
  /* 8px */
  left: 0.6250cqi;
  /* 9px */
  width: 3.1250cqi;
  /* 45px */
  height: 3.1250cqi;
  /* 45px */
  background: #FFFFFF;
  border-radius: 1.6666cqi;
  /* 24px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-discover-now .btn-text {
  position: absolute;
  top: 0.9833cqi;
  /* 14.16px */
  left: 4.7916cqi;
  /* 69px (9px arrow left + 45px arrow width = 54px + exactly 15px gap) */
  width: 12.8000cqi;
  /* 184.31px */
  height: 2.4962cqi;
  /* 35.94px */
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.6666cqi;
  /* 24px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  margin: 0;
}


/* ============================
   INSIGHTS
   ============================ */
.insights-section {
  padding: 0 0 6.9444cqi;
  /* 100px */
  background: var(--color-bg-light);
}

.insights-header-top {
  display: flex;
  align-items: flex-end;
  /* Align bottom edges */
  gap: 9.4444cqi;
  /* 136px */
  width: 87.2684cqi;
  /* 1256.66px */
  height: 6.5277cqi;
  /* 94px */
  margin-left: 6.1111cqi;
  /* 88px */
  margin-bottom: 3.4722cqi;
  /* 50px */
}

.insights-label-wrap {
  display: flex;
  align-items: center;
  gap: 0.5555cqi;
  /* 8px */
  width: 14.5601cqi;
  /* 209.66px */
  align-self: flex-start;
  margin-top: 0.4166cqi;
  /* 6px */
}

.insights-label-wrap::before {
  content: "";
  display: block;
  width: 0.3938cqi;
  /* 5.67px - exact Figma width */
  height: 2.4439cqi;
  /* 35.19px - exact Figma height */
  background: #FFA726;
  opacity: 1;
}

.insights-label {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 600;
  font-size: 2.0833cqi;
  /* 30px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFA726;
  letter-spacing: 0.01em;
}

.insights-title {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 2.8472cqi;
  /* 41px */
  line-height: 3.2638cqi;
  /* 47px */
  color: #000000;
  width: 35.0694cqi;
  /* 505px */
  height: 6.5277cqi;
  /* 94px */
  margin: 0;
  display: flex;
  align-items: center;
}

.btn-discover-now-insights {
  position: relative;
  display: block;
  background: #263238;
  border-radius: 2.0138cqi;
  /* 29px */
  text-decoration: none;
  width: 18.7500cqi;
  /* 270px */
  height: 4.2361cqi;
  /* 61px */
  flex-shrink: 0;
  padding: 0;
}

.btn-discover-now-insights:hover {
  background: #1f282d;
}

.btn-discover-now-insights .icon-circle {
  position: absolute;
  top: 0.6250cqi;
  /* 9px */
  left: 0.6298cqi;
  /* 9.07px */
  width: 3.0783cqi;
  /* 44.32px */
  height: 3.0555cqi;
  /* 44px */
  background: #FFFFFF;
  border-radius: 1.6666cqi;
  /* 24px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-discover-now-insights .btn-text {
  position: absolute;
  top: 0.9833cqi;
  /* 14.16px */
  left: 4.7500cqi;
  /* 68.4px */
  width: 12.8000cqi;
  /* 184.31px */
  height: 2.4962cqi;
  /* 35.94px */
  font-family: "Mona Sans", var(--font-body);
  font-weight: 400;
  font-size: 1.6666cqi;
  /* 24px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFFFFF;
  margin: 0;
}

.insights-cards-container {
  display: flex;
  width: 93.3333cqi;
  /* 1344px */
  height: 29.1666cqi;
  /* 420px */
  gap: 1.8055cqi;
  /* 26px */
  margin-left: 2.7777cqi;
  /* 40px left screen distance */
  margin-right: 3.8888cqi;
  /* 56px right screen distance */
  padding: 0;
}

.insights-card-large {
  width: 45.5555cqi;
  /* 656px */
  height: 29.1666cqi;
  /* 420px */
  flex: 0 0 45.5555cqi;
  /* 656px */
  border-radius: 0.3472cqi;
  /* 5px */
  position: relative;
  overflow: hidden;
  display: block;
  padding: 0;
  box-sizing: border-box;
}

.insights-card-large::after {
  display: none;
}

.insights-large-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.insights-large-content {
  position: absolute;
  top: 13.5416cqi;
  /* 195px */
  left: 0;
  right: 0;
  bottom: 0;
  width: 45.5555cqi;
  /* 656px */
  height: 15.6250cqi;
  /* 225px */
  border-bottom-right-radius: 0.3472cqi;
  /* 5px */
  border-bottom-left-radius: 0.3472cqi;
  /* 5px */
  background: linear-gradient(183.22deg, rgba(103, 103, 103, 0) 3.06%, #1B1A1A 86.32%);
  backdrop-filter: blur(0px);
  z-index: 3;
  margin: 0;
}

.insights-large-date {
  position: absolute;
  top: 0.9027cqi;
  /* 13px */
  left: 1.9645cqi;
  /* 28.29px - exact same left alignment as title and excerpt */
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 0.9722cqi;
  /* 14px */
  color: #FFFFFF;
  display: flex;
  align-items: center;
  margin: 0;
}

.calendar-icon-large,
.insights-large-date i {
  width: 1.25cqi;
  /* 18px */
  height: 1.25cqi;
  /* 18px */
  object-fit: cover !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4861cqi;
  /* 7px */
}

.insights-large-title {
  position: absolute;
  top: 3.9861cqi;
  /* 57.4px */
  left: 1.9645cqi;
  /* 28.29px */
  font-family: "Inter", var(--font-body);
  font-weight: 600;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 1.3;
  color: #FFFFFF;
  margin: 0;
}

.insights-large-excerpt {
  position: absolute;
  top: 9.2013cqi;
  /* 132.5px */
  left: 1.9645cqi;
  /* 28.29px */
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 1.0416cqi;
  /* 15px */
  line-height: 1.4;
  color: #EAEAEA;
  margin: 0;
}

.insights-card-small {
  width: 22.0833cqi;
  /* 318px */
  height: 29.1666cqi;
  /* 420px */
  flex: 0 0 22.0833cqi;
  /* 318px */
  background: #FFFFFF;
  border-radius: 0.3472cqi;
  /* 5px */
  position: relative;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

.insights-small-img-wrap {
  position: absolute;
  top: 1.1805cqi;
  /* 17px */
  left: 1.3888cqi;
  /* 20px */
  width: 19.6527cqi;
  /* 283px */
  height: 11.5277cqi;
  /* 166px */
  border-radius: 0.3472cqi;
  /* 5px */
  overflow: hidden;
  margin: 0;
}

.insights-small-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insights-small-content {
  position: absolute;
  top: 16.8055cqi;
  /* 242px */
  left: 1.6666cqi;
  /* 24px */
  width: 18.5763cqi;
  /* 267.5px */
  height: 9.3750cqi;
  /* 135px */
  display: flex;
  flex-direction: column;
  margin: 0;
}

.insights-small-date {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 0.9027cqi;
  /* 13px */
  color: #7C7474;
  display: flex;
  align-items: center;
  margin: 0 0 1.0416cqi 0;
  /* 15px exact gap to title */
}

.calendar-icon-small,
.insights-small-date i {
  width: 1.0416cqi;
  /* 15px */
  height: 1.0416cqi;
  /* 15px */
  object-fit: cover !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.4861cqi;
  /* 7px */
}

.insights-small-title {
  font-family: "Inter", var(--font-body);
  font-weight: 600;
  font-size: 1.25cqi;
  /* 18px */
  line-height: 1.3;
  color: #464646;
  margin: 0 0 0.4166cqi 0;
  /* 6px exact gap to excerpt */
}

.insights-small-excerpt {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  font-size: 0.9722cqi;
  /* 14px */
  line-height: 1.4;
  color: #666666;
  margin: 0;
}

.blog-card {
  background: #fff;
  border-radius: 1.1111cqi;
  /* 16px */
  overflow: hidden;
  height: 100%;
  box-shadow: 0 0.2777cqi 1.3888cqi rgba(0, 0, 0, 0.04);
}

.blog-img-wrapper {
  position: relative;
}

.blog-tag {
  position: absolute;
  top: 1.0416cqi;
  /* 15px */
  left: 1.0416cqi;
  /* 15px */
  background: var(--color-primary);
  color: #fff;
  font-size: 0.7638cqi;
  /* 11px */
  font-weight: 600;
  padding: 0.2777cqi 0.8333cqi;
  /* 4px 12px */
  border-radius: 1.3888cqi;
  /* 20px */
  z-index: 2;
}

.blog-img {
  height: 15.2777cqi;
  /* 220px */
  width: 100%;
  object-fit: cover;
}

.blog-content {
  padding: 1.7361cqi;
  /* 25px */
}

.blog-date {
  font-size: 0.8333cqi;
  /* 12px */
  color: var(--color-text-muted);
  margin-bottom: 0.6944cqi;
  /* 10px */
  display: flex;
  align-items: center;
  gap: 0.4166cqi;
  /* 6px */
}

.blog-date i {
  font-size: 0.9027cqi;
  /* 13px */
}

.blog-title {
  font-size: 1.25cqi;
  /* 18px */
  font-weight: 600;
  margin-bottom: 0.8333cqi;
  /* 12px */
  line-height: 1.4;
  color: var(--color-text-dark);
}

.blog-excerpt {
  font-size: 0.9722cqi;
  /* 14px */
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ============================
   AUDIENCE CARDS (WHO DO WE WORK WITH)
   ============================ */
.audience-cards-container {
  display: flex;
  flex-direction: column;
  width: 86.8055cqi;
  /* 1250px */
  height: 46.5277cqi;
  /* 670px */
  margin: 0 auto;
  gap: 1.5277cqi;
  /* 22px */
  position: absolute;
  top: 15.9722cqi;
  /* 230px */
  left: 0;
}

.audience-cards-row {
  display: flex;
  width: 86.8055cqi;
  /* 1250px */
  height: 22.5cqi;
  /* 324px */
  gap: 1.5277cqi;
  /* 22px */
}

.audience-card {
  width: 42.6388cqi;
  /* 614px */
  height: 22.5cqi;
  /* 324px */
  border-radius: 1.1805cqi;
  /* 17px */
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 0.2777cqi 1.3888cqi rgba(0, 0, 0, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.audience-card:hover {
  transform: translateY(-0.3472cqi);
  box-shadow: 0 0.8333cqi 2.0833cqi rgba(0, 0, 0, 0.15);
}

.audience-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Ensure top of Hospitality building is visible on web */
@media (min-width: 768px) {
  .audience-card img[alt="Hospitality"] {
    object-position: center top;
  }
}

.audience-card:hover img {
  transform: scale(1);
  filter: blur(5px);
}

@media (max-width: 767px) {
  .audience-card:hover img {
    transform: scale(1) !important;
    filter: blur(2px) !important;
  }
}

.audience-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.audience-card:hover::after {
  opacity: 1;
}

.audience-card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.audience-card h3 {
  position: absolute;
  top: 1.7361cqi;
  /* 25px - exact distance from top of card */
  left: 2.8638cqi;
  /* 41.24px - exact distance from left of card */
  width: 14.3055cqi;
  /* 206px */
  height: 3.6111cqi;
  /* 52px */
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 500;
  font-size: 2.7777cqi;
  /* 40px */
  line-height: 5.5555cqi;
  /* 80px */
  letter-spacing: -0.04em;
  /* -4% */
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  transition: transform 0.4s ease;
}

.audience-card p {
  position: absolute;
  top: 12.0138cqi;
  /* 173px - exact distance from top (leaving bottom: 21px) */
  left: 1.5972cqi;
  /* 23px - exact distance from left (leaving right: 64px) */
  width: calc(100% - 3.1944cqi);
  /* Leaves exactly 1.5972cqi (23px) gap symmetrically on right and left regardless of card width */
  height: 9.0277cqi;
  /* 130px */
  font-family: "Inter", var(--font-body);
  font-weight: 500;
  font-size: 1.5277cqi;
  /* 22px */
  line-height: 1.8055cqi;
  /* 26px */
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(1.3888cqi);
  /* 20px */
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.audience-card:hover p {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   FAQ -> FOOTER DIVIDER
   Figma node 3575:916 (web) called for a 4px line; thinned to 2px per
   client feedback - looked too heavy at the original weight.
   Sits after whatever the last section before the footer is (FAQ on
   pages that have one, pre-footer on pages that don't).
   ============================ */
.faq-footer-divider {
  width: 100%;
  height: 0.1389cqi;
  /* 2px / 1440 */
  min-height: 2px;
  background: #263238;
}

/* ============================
   PRE-FOOTER
   ============================ */
.pre-footer {
  background: #263238;
  width: 100%;
  /* No fixed height - was 19.8611cqi (286px), with the title/button
     absolutely positioned inside via hand-calculated top/left values tuned
     to one specific known text length per page. That doesn't generalise:
     shorter text left dead space, longer text (or a 3rd wrapped line)
     could overflow past the fixed box or collide with the button. Auto
     height + real padding (below) + flexbox instead - the box always
     matches its own content, on any page, with any text length. */
}

.pre-footer-inner {
  width: 100%;
  max-width: 100cqi;
  /* 1440px */
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  /* Was align-items:center when this section first went flex-based/dynamic
     - the button sat vertically centred against the title, but the original
     fixed-position design had it anchored to the bottom-right, not centred.
     flex-end restores that (button's bottom edge level with the title's
     last line / bottom padding edge) while keeping the box's real dynamic
     height - it still grows/shrinks with however many lines the title
     wraps to, only the button's own vertical anchor changed. */
  justify-content: space-between;
  gap: 3.4722cqi;
  /* 50/1440 - breathing room between title and button if either grows */
  padding: 4.0277cqi 5.1388cqi 3.125cqi 5.1388cqi;
  /* 58/1440 top, 74/1440 left+right, 45/1440 bottom - client-specified
     exact gap from the button's bottom edge to the section's own bottom
     edge (was 58/1440, symmetric with the top). Since this is the
     button's real vertical anchor (align-items:flex-end above), reducing
     it is what actually moves the button - .pre-footer-title's own
     margin-bottom below adds the 13px back so the title's position is
     unaffected, matching Figma node 3620:2376/2378. */
}

.pre-footer-title {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 700;
  font-size: 3.4027cqi;
  /* 49px */
  line-height: 3.8194cqi;
  /* 55px */
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0 0 0.9028cqi 0;
  /* 13/1440 - compensates the 13px .pre-footer-inner's own bottom padding
     just lost (58px -> 45px, for the button's sake - see above), so the
     title's own effective bottom gap stays exactly what it was before. */
  max-width: 46.4583cqi;
  /* 669/1440 - was a fixed width AND height; kept as a max-width only so
     long titles still wrap around the same point Figma intended, but the
     box's actual height now always matches however many lines that
     produces instead of a separate hardcoded number. */
}

.btn-pre-footer {
  flex-shrink: 0;
  /* Never lets a long title compress the button - was unnecessary before
     since the button had its own fixed width/position; now load-bearing. */
  display: flex;
  align-items: center;
  gap: 1.1806cqi;
  /* 17/1440 - Figma-exact icon-to-text gap (was 18/1440) */
  height: 4.0278cqi;
  /* 58/1440 - Figma's exact button height (node 3620:2378), fixed like the
     icon/text sizes; only the button's WIDTH stays dynamic (auto, driven
     by its own padding + whatever CTA text is on a given page) so longer
     or shorter text on other pages still fits correctly. */
  background: #F0EEEA;
  border-radius: 2.0138cqi;
  /* 29px */
  padding: 0 1.875cqi 0 0.7638cqi;
  /* 27/1440 right, 11/1440 left - Figma-exact (was 25/1440 right); no
     vertical padding needed now height is fixed above, align-items:center
     centres the icon/text within it. */
  text-decoration: none;
  box-sizing: border-box;
}

.btn-pre-footer:hover {
  background: #e5e3df;
}

.btn-pre-footer .icon-circle {
  flex-shrink: 0;
  width: 2.9166cqi;
  /* 42px */
  height: 3.125cqi;
  /* 45px */
  background: #FFA726;
  border-radius: 1.6666cqi;
  /* 24px */
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-pre-footer .btn-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 2.0833cqi;
  /* 30px */
  letter-spacing: -0.01em;
  color: #1B3834;
  white-space: nowrap;
}

/* ============================
   FOOTER
   ============================ */
.site-footer {
  background: #E9EAEB;
  width: 100%;
  /* height removed - was a fixed 829px (57.5694cqi), calibrated to the
     original absolutely-positioned content. That content has since grown
     (e.g. the Services column went from 6 to 8 links), but the fixed
     height never followed - left a ~165px dead zone below the real
     content, reported as extra white space/scroll after the footer.
     Auto-height (via the flow-based rules below) now genuinely follows
     whatever the content actually needs. */
}

.footer-inner {
  position: relative;
  width: 100%;
  max-width: 100cqi;
  /* 1440px */
  margin: 0 auto;
  padding: 4.5138cqi 5.7638cqi 4.5138cqi 5.7638cqi;
  /* 65px top/bottom, 83px left/right - replaces the old height:100% +
     three separately hand-positioned children (logo/line/content each
     had their own top/left offset); real padding + normal flow below. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.footer-logo {
  position: relative;
  width: 19.0277cqi;
  /* 274px */
  height: 6.8055cqi;
  /* 98px */
  margin-bottom: 1.3889cqi;
  /* 20px - gap to the line, matches the old top-offset difference
     (183 - 65 - 98 = 20) */
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: left center;
}

.footer-line {
  position: relative;
  width: 100%;
  height: 1px;
  background: #ACADAE;
  margin-bottom: 3.6111cqi;
  /* 52px - gap to footer-content, matches the old top-offset difference
     (236 - 183 - 1 = 52) */
}

.footer-content {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.footer-col-main {
  width: 38.3333cqi;
  /* 552px */
  display: flex;
  flex-direction: column;
  margin-right: 7.8472cqi;
  /* 113px */
}

.footer-group-1 {
  display: flex;
  flex-direction: column;
  gap: 2.0833cqi;
  /* 30px */
  width: 31.1111cqi;
  /* 448px */
  margin-bottom: 4.7916cqi;
  /* 69px - exact gap to SOLD MEDIA L.L.C-FZ */
}

.footer-tagline {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.4583cqi;
  /* 21px */
  line-height: 1.8750cqi;
  /* 27px */
  letter-spacing: 0;
  color: #1B3834;
  margin: 0;
  width: 31.1111cqi;
  /* 448px */
  height: 3.1378cqi;
  /* 45.18px */
}

.site-footer .btn-book-call {
  position: relative;
  display: block;
  background: #263238;
  border-radius: 3.8194cqi;
  /* 55px */
  padding: 0;
  text-decoration: none;
  margin: 0;
  width: 18.8194cqi;
  /* 271px */
  height: 4.3055cqi;
  /* 62px */
  box-sizing: border-box;
}

.site-footer .btn-book-call:hover {
  background: #1f282d;
}

.site-footer .btn-book-call .icon-circle {
  position: absolute;
  top: 0.5902cqi;
  /* 8.5px - exact vertical center */
  left: 0.5902cqi;
  /* 8.5px - equal left padding */
  width: 3.1250cqi;
  /* 45px */
  height: 3.1250cqi;
  /* 45px - perfect circle */
  background: #FFFFFF;
  border-radius: 50%;
  /* 50% for perfect circle */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.site-footer .btn-book-call .btn-text {
  position: absolute;
  top: 0.9027cqi;
  /* 13px */
  left: 5.2083cqi;
  /* 75px */
  width: 12.8472cqi;
  /* 185px */
  height: 2.5372cqi;
  /* 36.54px */
  color: #FFFFFF;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.7361cqi;
  /* 25px */
  line-height: 2.0833cqi;
  /* 30px */
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  margin: 0;
}

.footer-address-group {
  display: flex;
  flex-direction: column;
  gap: 1.25cqi;
  /* 18px - exact gap from Figma */
  width: 38.3333cqi;
  /* 552px */
  height: auto;
  margin-bottom: 1.4583cqi;
  /* 21px - exact gap to contact group */
}

.footer-company-name {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.5277cqi;
  /* 22px */
  line-height: 1.8750cqi;
  /* 27px */
  letter-spacing: 0.02em;
  color: #1B3834;
  width: 38.3333cqi;
  /* 552px */
  height: 1.6659cqi;
  /* 23.99px */
  display: block;
}

.footer-address-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.4583cqi;
  /* 21px */
  line-height: 1.7361cqi;
  /* 25px */
  color: #1B3834;
  width: 38.3333cqi;
  /* 552px */
  height: 3.3319cqi;
  /* 47.98px */
  margin: 0;
}

.footer-group-3 {
  display: flex;
  flex-direction: column;
  gap: 1.25cqi;
  /* 18px - exact gap from Figma */
  width: 38.3333cqi;
  /* 552px */
  height: auto;
}

.footer-contact {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.4583cqi;
  /* 21px */
  line-height: 1.8750cqi;
  /* 27px */
  letter-spacing: 0;
  color: #1B3834;
  width: 38.3333cqi;
  /* 552px */
  height: 4.5357cqi;
  /* 65.31px */
  margin: 0;

}

.social-icons {
  display: flex;
  gap: 9px;
  width: 163px;
  height: 34px;
}

.social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #263238;
  color: #FFFFFF;
  border-radius: 50%;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s;
}

.social-icons a:hover {
  background: var(--color-primary);
}

.social-icon {
  object-fit: cover !important;
  display: block;
}

.social-whatsapp {
  width: 17px;
  height: 17px;
}

.social-fb {
  width: 18.4px;
  height: 18.66px;
}

.social-linkedin {
  width: 14.91px;
  height: 15px;
}

.social-insta {
  width: 15px;
  height: 15px;
}

.footer-col-services {
  width: 19.5833cqi;
  height: auto;
  margin-top: 6.5972cqi;
  /* 95px */
  margin-right: 2.8472cqi;
  display: flex;
  flex-direction: column;
}

.footer-col-services .footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 35px;
  width: 198px;
  height: 174px;
}

.footer-col-services .footer-links-list li {
  margin-bottom: 0;
}

.footer-col-quicklinks {
  width: 15.1389cqi;
  /* 218px */
  height: auto;
  margin-top: 6.5278cqi;
  /* 94px */
  display: flex;
  flex-direction: column;
  gap: 2.9861cqi;
  /* 43px */
}

.footer-heading {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 3.125cqi;
  font-weight: 400;
  line-height: 1.875cqi;
  letter-spacing: -0.03em;
  color: #1B3834;
  margin: 0;
  padding: 0;
}

.footer-headingg {
  font-family: "Mona Sans", var(--font-heading);
  font-size: 3.125cqi;
  font-weight: 400;
  line-height: 1.875cqi;
  letter-spacing: -0.03em;
  color: #1B3834;
  margin: 0;
  padding: 0;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links-list li {
  margin-bottom: 0.8333cqi;
  /* 12px */
}

.quick-links-group {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 15.1389cqi;
  /* 218px */
  height: auto;
}

.quick-links-group .footer-heading {
  white-space: nowrap;
}

.quick-links-group .footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: auto;
  height: auto;
}

.quick-links-group .footer-links-list li {
  margin-bottom: 0;
}

.legal-group {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 198px;
  height: auto;
  margin-top: auto;
}

.legal-group .footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  width: auto;
  height: auto;
}

.legal-group .footer-links-list li {
  margin-bottom: 0;
}

.footer-links-list a {
  font-family: "Inter", var(--font-body);
  font-size: 1.4583cqi;
  /* 21px */
  line-height: 1.7361cqi;
  /* 25px */
  color: #1B3834;
  text-decoration: none;
  transition: color 0.3s;
  white-space: nowrap;
}

.footer-links-list a:hover {
  color: var(--color-primary);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 767px) {
  .who-title {
    font-size: 48px;
    line-height: 60px;
  }

  .logo-dot {
    font-size: 80px;
  }

  .years-text {
    font-size: 70px;
  }

  .testimonials-title {
    font-size: 60px;
  }

  .services-header {
    flex-direction: column;
    gap: 20px;
  }

  .offices-text {
    font-size: 18px;
  }

  .insights-lead {
    font-size: 30px;
    line-height: 38px;
  }
}


/* Hide mobile drawer on desktop */
.mobile-offcanvas-drawer {
  display: none;
}

@media (max-width: 767px) {
  .footer-col-services {
    margin-top: 95px !important;
  }

  .footer-col-quicklinks {
    margin-top: 95px !important;
  }

  .footer-col-quicklinks {
    gap: 95px !important;
  }

  .footer-heading {
    margin: 0 0 8px 0 !important;
    padding-bottom: 15px !important;
  }

  .footer-headingg {
    margin: 0 0 8px 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-col-services .footer-links-list,
  .quick-links-group .footer-links-list,
  .legal-group .footer-links-list {
    margin-top: 20px !important;
    width: auto !important;
    height: auto !important;
  }

  .footer-col-services .footer-links-list {
    gap: 12px !important;
  }

  .quick-links-group .footer-links-list {
    gap: 12px !important;
  }

  .legal-group .footer-links-list {
    gap: 3px !important;
  }


  .what-we-do-section,
  .why-sold-section,
  .who-we-work-section,
  .insights-section {
    padding: 60px 0;
  }

  .what-we-do-lead {
    font-size: 22px;
  }

  .who-title {
    font-size: 28px;
    line-height: 40px;
  }

  .pre-footer h2 {
    font-size: 24px;
  }

  .years-text {
    font-size: 48px;
    width: auto;
  }

  .years-sub {
    font-size: 24px;
    line-height: 32px;
    width: auto;
  }

  .offices-text {
    font-size: 14px;
  }
}

/* ============================
   WHO DO WE WORK WITH - CARDS
   ============================ */
.audience-cards-container {
  display: flex;
  flex-direction: column;
  gap: 1.5277cqi;
  /* 22px gap between rows */
  width: 100%;
  height: 46.5277cqi;
  /* 670px */
  flex-shrink: 0;
  /* Prevents cards from being squished */
}

/* Duplicate audience card rules removed to preserve exact Figma coordinates above */

/* ============================================================
   MOBILE VIEW ONLY (Header & Hero Section Exact Figma #781:1189)
   ============================================================ */
@media (max-width: 767px) {

  /* Global Mobile Screen Safeguard (No whitespace, exact #F4F5F5 background below hero) */
  html,
  body,
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #F4F5F5 !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* Only the actual scrolling element (html) should suppress overscroll bounce -
     applying this to body/.page-container too breaks wheel/touch scroll chaining
     on mobile, since neither of those is the element that actually scrolls. */
  html {
    overscroll-behavior-y: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .page-container::-webkit-scrollbar,
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .header-nav,
  .header-cta {
    display: none !important;
  }

  .mobile-menu-btn {
    position: relative !important;
    display: flex !important;
    width: 41px !important;
    height: 41px !important;
    border-radius: 30px !important;
    background: #FFA726 !important;
    border: none !important;
    padding: 18px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-btn svg,
  .mobile-menu-btn img {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Pinned throughout scroll (client request) - was position:absolute,
     which scrolled fully away with the page like the rest of the content.
     A solid #263238 background was briefly added here (matching the
     web/tablet .is-compact bar), then removed again per a later client
     request (transparent, icons only). Client has now asked for the
     background back - restored to the same #263238 brand dark the web
     .is-compact bar uses, so mobile finally matches web as originally
     intended. Logo and hamburger are still laid out by this same flex row
     (justify-content:space-between), so they remain correctly contained;
     the WhatsApp icon is a separate position:fixed element (see
     .whatsapp-float-btn) whose own coordinates happen to fall inside this
     bar's rectangle and whose z-index (9990) is well above this bar's
     (100), so it continues to render on top of the new background exactly
     where it already sat. */
  .site-header {
    position: absolute !important;
    /* Client-requested: mobile should behave like web now - this "tall"
       state scrolls away with the page (position:absolute, not fixed);
       .site-header.is-compact below is the separate sticky bar that takes
       over once scrolled, matching web's own two-state pattern
       (.site-header / .site-header.is-compact, see css/style-v2.css's web
       rules). Was fixed (pinned throughout scroll) since v1.0.66 - the
       client explicitly asked for pinned-always back then; this reverses
       that in favour of matching web's scroll-away-then-compact model. */
    top: 30px !important;
    /* Was 42px - client-requested, mobile only: reduce the gap above the
       logo/WhatsApp/hamburger row. The WhatsApp button needs no separate
       change to stay aligned - since v1.0.95 it's a real child of this
       element, self-centering via top:50%+translateY(-50%) on whatever
       position/height .site-header actually has, not a hand-calculated
       offset of its own. */
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: 60px !important;
    /* Client-requested: slightly taller bar, mobile only (was 54px). Logo
       and hamburger need no changes to stay vertically centred - they're
       plain flex children of this rule's own align-items:center, which
       re-centres them automatically in the new height regardless of its
       value. The WhatsApp button is the one exception: it's a separate
       position:fixed element with a manually-calculated `top`, not a flex
       child of this bar, so its vertical centre had to be recalculated by
       hand for both this state and .is-compact (see .whatsapp-float-btn's
       mobile rules) - flag for the client to confirm 60px is "slightly"
       enough, no exact value was given. */
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    opacity: 1 !important;
    padding: 0 12px !important;
    /* Client-requested: background extended further out (outer inset
       25px/24px -> 16px/16px, now symmetric too - was 1px off), plus equal
       12px internal padding on both sides so the logo and hamburger sit
       inset from the background edge instead of flush against it (was 0px
       gap on both, confirmed via computed layout before this change). No
       exact px was given, so these are reasoned values - flag for the
       client to confirm the spacing looks right. Mobile only. */
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    /* Client-requested: background removed from this "tall"/scrolling
       state - now transparent like web's own tall header, which only ever
       had a solid background in its compact/sticky state. The dark
       #263238 fill (added in v1.0.81) moved to .site-header.is-compact
       below instead of being removed outright, since the client still
       wants it on the sticky bar. border-radius is now moot here (nothing
       visible to round) but left in place - harmless, and saves a
       re-declaration if a background is ever wanted back on this state. */
    border-radius: 10px !important;
  }

  /* Sticky/compact bar - appears once js/main-v2.js's scroll listener adds
     .is-compact past 200px scrolled (the same class/threshold web already
     uses; that JS runs unconditionally, only the CSS was ever gated to
     desktop - see the comment on the .is-compact block in the web-width
     section of this file). Height/padding/flex layout are inherited from
     the base .site-header rule above unchanged, which is exactly why the
     logo and hamburger keep the same positioning the client asked to
     preserve - they're normal flex children centered by the shared
     `align-items:center`, not individually positioned, so nothing about
     them needs to be redeclared here. background is redeclared explicitly
     (not inherited) since the base rule above is now transparent - this
     bar is the only one of the two states that should be solid. */
  .site-header.is-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* The base rule's max-width:calc(100% - 32px) exists to keep the tall
       state inset 16px from each edge - left/right:0 alone doesn't cancel
       it, so without this override the bar stayed capped at that narrower
       width even while positioned flush left, leaving an unexplained 32px
       gap on the right and throwing off the hamburger's position (caught
       by re-measuring after scroll, not assumed). */
    background: #263238 !important;
    border-radius: 0 !important;
  }

  .header-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 97px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }

  .header-logo .logo-link,
  .header-logo .site-logo {
    width: 97px !important;
    height: 54px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Hero Section Mobile Rules (Exact 393x852 layout) */
  .hero-section {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background: #141619 !important;
    overflow: hidden !important;
  }

  .hero-section picture,
  .hero-bg-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .hero-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-title-container {
    position: absolute !important;
    top: 206px !important;
    left: 30px !important;
    bottom: 542px !important;
    right: 59px !important;
    width: 304px !important;
    max-width: calc(100% - 60px) !important;
    height: 104px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .hero-title-top {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    min-width: 306px !important;
    height: 38px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: left !important;
    opacity: 1 !important;
  }

  .hero-title-top .orange-text {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
  }

  .hero-title-top .orange-space {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-title-top .orange-italic {
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.01em !important;
  }

  .hero-title-bottom {
    position: absolute !important;
    top: 35px !important;
    left: 0 !important;
    width: 304px !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 28px !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    text-align: left !important;
    word-wrap: break-word !important;
    opacity: 1 !important;
  }

  .hero-text-block {
    position: absolute !important;
    top: 333px !important;
    left: 30px !important;
    bottom: 331px !important;
    right: 30px !important;
    width: 333px !important;
    max-width: 100% !important;
    height: 188px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 41px !important;
    box-sizing: border-box !important;
  }

  .hero-text-block p {
    font-family: "Mona Sans", var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    width: 321px !important;
    height: 104px !important;
  }

  .hero-text-block p br {
    display: initial !important;
  }

  .btn-get-started {
    background: #FFFFFF !important;
    color: #1B3834 !important;
    border-radius: 29px !important;
    width: 225px !important;
    height: 43px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    padding: 4px 4px 4px 7.29px !important;
    box-sizing: border-box !important;
    gap: 11px !important;
  }

  .btn-get-started .icon-circle {
    background: transparent !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  .what-we-do-section {
    position: relative !important;
    width: 100% !important;
    height: 1461px !important;
    margin: 0 auto !important;
  }

  .what-we-do-header {
    position: absolute !important;
    top: 29px !important;
    bottom: 706px !important;
    right: 29px !important;
    width: 334px !important;
    height: 358px !important;
    left: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .what-we-do-label-wrap {
    width: auto !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .what-we-do-label {
    width: auto !important;
    height: 30px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    position: static !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .what-we-do-label-wrap::before {
    position: static !important;
    width: 3px !important;
    height: 30px !important;
    background: #FFA726 !important;
    flex-shrink: 0 !important;
  }

  .what-we-do-lead {
    width: 334px !important;
    height: 296px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 37px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .what-we-do-content {
    position: static !important;
  }

  .features-left {
    position: absolute !important;
    width: 100% !important;
    height: 720.27px !important;
    top: 372.73px !important;
    left: 0 !important;
    bottom: 397px !important;
    right: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .what-we-do-content::before,
  .what-we-do-content::after {
    display: none !important;
  }

  .features-left::before {
    content: "" !important;
    position: absolute !important;
    width: 1px !important;
    height: 675px !important;
    left: 100px !important;
    top: 36.27px !important;
    background: linear-gradient(180deg, #C8C9C9 0%, #F0F0F0 95.47%) !important;
    z-index: 0 !important;
  }

  /* Fix CQI units making features tiny */
  .features-grid {
    position: static !important;
  }

  .feature-grid-item {
    position: static !important;
  }

  .feature-icon-cell {
    position: absolute !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    display: block !important;
  }

  .feature-grid-item:nth-child(1) .feature-icon-cell {
    top: 132.27px !important;
    left: 38px !important;
    bottom: 555px !important;
    right: 313px !important;
    width: 40px !important;
    height: 33px !important;
  }

  .feature-grid-item:nth-child(1) .placeholder-svg-icon {
    width: 40px !important;
    height: 33px !important;
    object-fit: contain !important;
  }

  .feature-grid-item:nth-child(2) .feature-icon-cell {
    top: 349.27px !important;
    left: 42px !important;
    bottom: 328px !important;
    right: 316px !important;
    width: 33px !important;
    height: 43px !important;
  }

  .feature-grid-item:nth-child(2) .placeholder-svg-icon {
    width: 33px !important;
    height: 43px !important;
    object-fit: contain !important;
  }

  .feature-grid-item:nth-child(3) .feature-icon-cell {
    top: 575.27px !important;
    left: 35px !important;
    bottom: 100px !important;
    right: 310px !important;
    width: 46px !important;
    height: 45px !important;
  }

  .feature-grid-item:nth-child(3) .placeholder-svg-icon {
    width: 46px !important;
    height: 45px !important;
    object-fit: contain !important;
  }

  .feature-content-cell {
    position: absolute !important;
    left: 124px !important;
    width: 239px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .feature-grid-item:nth-child(1) .feature-content-cell {
    height: 145px !important;
    top: 74.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-grid-item:nth-child(2) .feature-content-cell {
    height: 199px !important;
    top: 276.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-grid-item:nth-child(3) .feature-content-cell {
    height: 155px !important;
    top: 533.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-content-cell h3 {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #FFA726 !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
  }

  .feature-content-cell p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .feature-grid-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 314px !important;
    height: 1px !important;
    background: linear-gradient(90deg, #C8C9C9 0%, #F0F0F0 95.47%) !important;
  }

  .feature-grid-item:nth-child(1)::after {
    top: 257.84px !important;
    bottom: auto !important;
  }

  .feature-grid-item:nth-child(2)::after {
    top: 505.25px !important;
    bottom: auto !important;
  }

  .features-right {
    position: absolute !important;
    width: calc(100% - 60px) !important;
    height: 355px !important;
    top: 1106px !important;
    left: 30px !important;
    bottom: 0 !important;
    right: 30px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .features-right .building-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
}

@container (max-width: 767px) {

  /* Global Mobile Screen Safeguard (No whitespace, exact #F4F5F5 background below hero) */
  html,
  body,
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #F4F5F5 !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* Only the actual scrolling element (html) should suppress overscroll bounce -
     applying this to body/.page-container too breaks wheel/touch scroll chaining
     on mobile, since neither of those is the element that actually scrolls. */
  html {
    overscroll-behavior-y: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .page-container::-webkit-scrollbar,
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  .header-nav,
  .header-cta {
    display: none !important;
  }

  .mobile-menu-btn {
    position: relative !important;
    display: flex !important;
    width: 41px !important;
    height: 41px !important;
    border-radius: 30px !important;
    background: #FFA726 !important;
    border: none !important;
    padding: 18px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-btn svg,
  .mobile-menu-btn img {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Pinned throughout scroll (client request) - was position:absolute,
     which scrolled fully away with the page like the rest of the content.
     A solid #263238 background was briefly added here (matching the
     web/tablet .is-compact bar), then removed again per a later client
     request (transparent, icons only). Client has now asked for the
     background back - restored to the same #263238 brand dark the web
     .is-compact bar uses, so mobile finally matches web as originally
     intended. Logo and hamburger are still laid out by this same flex row
     (justify-content:space-between), so they remain correctly contained;
     the WhatsApp icon is a separate position:fixed element (see
     .whatsapp-float-btn) whose own coordinates happen to fall inside this
     bar's rectangle and whose z-index (9990) is well above this bar's
     (100), so it continues to render on top of the new background exactly
     where it already sat. */
  .site-header {
    position: absolute !important;
    /* Client-requested: mobile should behave like web now - this "tall"
       state scrolls away with the page (position:absolute, not fixed);
       .site-header.is-compact below is the separate sticky bar that takes
       over once scrolled, matching web's own two-state pattern
       (.site-header / .site-header.is-compact, see css/style-v2.css's web
       rules). Was fixed (pinned throughout scroll) since v1.0.66 - the
       client explicitly asked for pinned-always back then; this reverses
       that in favour of matching web's scroll-away-then-compact model. */
    top: 30px !important;
    /* Was 42px - client-requested, mobile only: reduce the gap above the
       logo/WhatsApp/hamburger row. The WhatsApp button needs no separate
       change to stay aligned - since v1.0.95 it's a real child of this
       element, self-centering via top:50%+translateY(-50%) on whatever
       position/height .site-header actually has, not a hand-calculated
       offset of its own. */
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: 60px !important;
    /* Client-requested: slightly taller bar, mobile only (was 54px). Logo
       and hamburger need no changes to stay vertically centred - they're
       plain flex children of this rule's own align-items:center, which
       re-centres them automatically in the new height regardless of its
       value. The WhatsApp button is the one exception: it's a separate
       position:fixed element with a manually-calculated `top`, not a flex
       child of this bar, so its vertical centre had to be recalculated by
       hand for both this state and .is-compact (see .whatsapp-float-btn's
       mobile rules) - flag for the client to confirm 60px is "slightly"
       enough, no exact value was given. */
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    opacity: 1 !important;
    padding: 0 12px !important;
    /* Client-requested: background extended further out (outer inset
       25px/24px -> 16px/16px, now symmetric too - was 1px off), plus equal
       12px internal padding on both sides so the logo and hamburger sit
       inset from the background edge instead of flush against it (was 0px
       gap on both, confirmed via computed layout before this change). No
       exact px was given, so these are reasoned values - flag for the
       client to confirm the spacing looks right. Mobile only. */
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    /* Client-requested: background removed from this "tall"/scrolling
       state - now transparent like web's own tall header, which only ever
       had a solid background in its compact/sticky state. The dark
       #263238 fill (added in v1.0.81) moved to .site-header.is-compact
       below instead of being removed outright, since the client still
       wants it on the sticky bar. border-radius is now moot here (nothing
       visible to round) but left in place - harmless, and saves a
       re-declaration if a background is ever wanted back on this state. */
    border-radius: 10px !important;
  }

  /* Sticky/compact bar - appears once js/main-v2.js's scroll listener adds
     .is-compact past 200px scrolled (the same class/threshold web already
     uses; that JS runs unconditionally, only the CSS was ever gated to
     desktop - see the comment on the .is-compact block in the web-width
     section of this file). Height/padding/flex layout are inherited from
     the base .site-header rule above unchanged, which is exactly why the
     logo and hamburger keep the same positioning the client asked to
     preserve - they're normal flex children centered by the shared
     `align-items:center`, not individually positioned, so nothing about
     them needs to be redeclared here. background is redeclared explicitly
     (not inherited) since the base rule above is now transparent - this
     bar is the only one of the two states that should be solid. */
  .site-header.is-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* The base rule's max-width:calc(100% - 32px) exists to keep the tall
       state inset 16px from each edge - left/right:0 alone doesn't cancel
       it, so without this override the bar stayed capped at that narrower
       width even while positioned flush left, leaving an unexplained 32px
       gap on the right and throwing off the hamburger's position (caught
       by re-measuring after scroll, not assumed). */
    background: #263238 !important;
    border-radius: 0 !important;
  }

  .header-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 97px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }

  .header-logo .logo-link,
  .header-logo .site-logo {
    width: 97px !important;
    height: 54px !important;
    display: block !important;
    object-fit: contain !important;
  }

  /* Hero Section Mobile Rules (Exact 393x852 layout) */
  .hero-section {
    position: relative !important;
    width: 100% !important;
    height: 852px !important;
    min-height: 852px !important;
    background: #141619 !important;
    overflow: hidden !important;
  }

  .hero-section picture,
  .hero-bg-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .hero-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .hero-title-container {
    position: absolute !important;
    top: 206px !important;
    left: 30px !important;
    bottom: 542px !important;
    right: 59px !important;
    width: 304px !important;
    max-width: calc(100% - 60px) !important;
    height: 104px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .hero-title-top {
    position: absolute !important;
    top: 0 !important;
    left: 1px !important;
    width: auto !important;
    min-width: 306px !important;
    height: 38px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: left !important;
    opacity: 1 !important;
  }

  .hero-title-top .orange-text {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
  }

  .hero-title-top .orange-space {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-title-top .orange-italic {
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.01em !important;
  }

  .hero-title-bottom {
    position: absolute !important;
    top: 35px !important;
    left: 0 !important;
    width: 304px !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 28px !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    text-align: left !important;
    word-wrap: break-word !important;
    opacity: 1 !important;
  }

  .hero-text-block {
    position: absolute !important;
    top: 333px !important;
    left: 30px !important;
    bottom: 331px !important;
    right: 30px !important;
    width: 333px !important;
    max-width: 100% !important;
    height: 188px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 41px !important;
    box-sizing: border-box !important;
  }

  .hero-text-block p {
    font-family: "Mona Sans", var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    text-align: left !important;
    word-wrap: break-word !important;
    width: 321px !important;
    height: 104px !important;
  }

  .hero-text-block p br {
    display: initial !important;
  }

  .btn-get-started {
    background: #FFFFFF !important;
    color: #1B3834 !important;
    border-radius: 29px !important;
    width: 225px !important;
    height: 43px !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    gap: 11px !important;
  }

  .btn-get-started .icon-circle {
    background: #FFA726 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  .btn-get-started .icon-circle svg {
    width: 20px !important;
    height: 8px !important;
  }

  .what-we-do-section {
    position: relative !important;
    width: 100% !important;
    height: 1388px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .what-we-do-header {
    position: absolute !important;
    top: 29px !important;
    bottom: 706px !important;
    right: 29px !important;
    width: 334px !important;
    height: 358px !important;
    left: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .what-we-do-label-wrap {
    width: 121.79px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .what-we-do-label {
    width: 113px !important;
    height: 30px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    position: static !important;
    margin: 0 !important;
  }

  .what-we-do-label-wrap::before {
    position: static !important;
    width: 3px !important;
    height: 30px !important;
    background: #FFA726 !important;
    flex-shrink: 0 !important;
  }

  .what-we-do-lead {
    width: 334px !important;
    height: 296px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 37px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .what-we-do-content {
    position: static !important;
  }

  .features-left {
    position: absolute !important;
    width: 100% !important;
    height: 720.27px !important;
    top: 300px !important;
    left: 0 !important;
    bottom: 397px !important;
    right: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .what-we-do-content::before {
    display: none !important;
  }

  .features-left::before {
    content: "" !important;
    position: absolute !important;
    width: 1px !important;
    height: 675px !important;
    left: 100px !important;
    top: 36.27px !important;
    background: linear-gradient(180deg, #C8C9C9 0%, #F0F0F0 95.47%) !important;
    z-index: 0 !important;
  }

  /* Fix CQI units making features tiny */
  .features-grid {
    position: static !important;
  }

  .feature-grid-item {
    position: static !important;
  }

  .feature-icon-cell {
    position: absolute !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
    display: block !important;
  }

  .feature-grid-item:nth-child(1) .feature-icon-cell {
    top: 132.27px !important;
    left: 38px !important;
    bottom: 555px !important;
    right: 313px !important;
    width: 40px !important;
    height: 33px !important;
  }

  .feature-grid-item:nth-child(1) .placeholder-svg-icon {
    width: 40px !important;
    height: 33px !important;
    object-fit: contain !important;
  }

  .feature-grid-item:nth-child(2) .feature-icon-cell {
    top: 349.27px !important;
    left: 42px !important;
    bottom: 328px !important;
    right: 316px !important;
    width: 33px !important;
    height: 43px !important;
  }

  .feature-grid-item:nth-child(2) .placeholder-svg-icon {
    width: 33px !important;
    height: 43px !important;
    object-fit: contain !important;
  }

  .feature-grid-item:nth-child(3) .feature-icon-cell {
    top: 575.27px !important;
    left: 35px !important;
    bottom: 100px !important;
    right: 310px !important;
    width: 46px !important;
    height: 45px !important;
  }

  .feature-grid-item:nth-child(3) .placeholder-svg-icon {
    width: 46px !important;
    height: 45px !important;
    object-fit: contain !important;
  }

  .feature-content-cell {
    position: absolute !important;
    left: 124px !important;
    width: 239px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .feature-grid-item:nth-child(1) .feature-content-cell {
    height: 145px !important;
    top: 74.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-grid-item:nth-child(2) .feature-content-cell {
    height: 199px !important;
    top: 276.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-grid-item:nth-child(3) .feature-content-cell {
    height: 155px !important;
    top: 533.27px !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .feature-content-cell h3 {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #FFA726 !important;
    text-transform: uppercase !important;
    margin-bottom: 0 !important;
  }

  .feature-content-cell p {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .feature-grid-item:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 314px !important;
    height: 1px !important;
    background: linear-gradient(90deg, #C8C9C9 0%, #F0F0F0 95.47%) !important;
  }

  .feature-grid-item:nth-child(1)::after {
    top: 257.84px !important;
    bottom: auto !important;
  }

  .feature-grid-item:nth-child(2)::after {
    top: 505.25px !important;
    bottom: auto !important;
  }

  .features-right {
    position: absolute !important;
    width: calc(100% - 60px) !important;
    height: 355px !important;
    top: 1033px !important;
    left: 30px !important;
    bottom: 0 !important;
    right: 30px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .features-right .building-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
}


/* Hide mobile drawer on desktop */
.mobile-offcanvas-drawer {
  display: none;
}

@media (max-width: 767px) {
  .footer-col-services {
    margin-top: 95px !important;
  }

  .footer-col-quicklinks {
    margin-top: 95px !important;
  }

  .footer-col-quicklinks {
    gap: 95px !important;
  }

  .footer-heading {
    margin: 0 0 8px 0 !important;
    padding-bottom: 15px !important;
  }

  .footer-headingg {
    margin: 0 0 8px 0 !important;
    padding-bottom: 0 !important;
  }

  .footer-col-services .footer-links-list,
  .quick-links-group .footer-links-list,
  .legal-group .footer-links-list {
    margin-top: 20px !important;
    width: auto !important;
    height: auto !important;
  }

  .footer-col-services .footer-links-list {
    gap: 12px !important;
  }

  .quick-links-group .footer-links-list {
    gap: 12px !important;
  }

  .legal-group .footer-links-list {
    gap: 3px !important;
  }


  /* Global Mobile Screen Safeguard (No whitespace, exact #F4F5F5 background below hero) */
  html,
  body,
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background-color: #F4F5F5 !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* Only the actual scrolling element (html) should suppress overscroll bounce -
     applying this to body/.page-container too breaks wheel/touch scroll chaining
     on mobile, since neither of those is the element that actually scrolls. */
  html {
    overscroll-behavior-y: none !important;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .page-container::-webkit-scrollbar,
  *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  * {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  /* 1. Header Area (#781:1190) */
  /* Pinned throughout scroll (client request) - was position:absolute,
     which scrolled fully away with the page like the rest of the content.
     A solid #263238 background was briefly added here (matching the
     web/tablet .is-compact bar), then removed again per a later client
     request (transparent, icons only). Client has now asked for the
     background back - restored to the same #263238 brand dark the web
     .is-compact bar uses, so mobile finally matches web as originally
     intended. Logo and hamburger are still laid out by this same flex row
     (justify-content:space-between), so they remain correctly contained;
     the WhatsApp icon is a separate position:fixed element (see
     .whatsapp-float-btn) whose own coordinates happen to fall inside this
     bar's rectangle and whose z-index (9990) is well above this bar's
     (100), so it continues to render on top of the new background exactly
     where it already sat. */
  .site-header {
    position: absolute !important;
    /* Client-requested: mobile should behave like web now - this "tall"
       state scrolls away with the page (position:absolute, not fixed);
       .site-header.is-compact below is the separate sticky bar that takes
       over once scrolled, matching web's own two-state pattern
       (.site-header / .site-header.is-compact, see css/style-v2.css's web
       rules). Was fixed (pinned throughout scroll) since v1.0.66 - the
       client explicitly asked for pinned-always back then; this reverses
       that in favour of matching web's scroll-away-then-compact model. */
    top: 30px !important;
    /* Was 42px - client-requested, mobile only: reduce the gap above the
       logo/WhatsApp/hamburger row. The WhatsApp button needs no separate
       change to stay aligned - since v1.0.95 it's a real child of this
       element, self-centering via top:50%+translateY(-50%) on whatever
       position/height .site-header actually has, not a hand-calculated
       offset of its own. */
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: 60px !important;
    /* Client-requested: slightly taller bar, mobile only (was 54px). Logo
       and hamburger need no changes to stay vertically centred - they're
       plain flex children of this rule's own align-items:center, which
       re-centres them automatically in the new height regardless of its
       value. The WhatsApp button is the one exception: it's a separate
       position:fixed element with a manually-calculated `top`, not a flex
       child of this bar, so its vertical centre had to be recalculated by
       hand for both this state and .is-compact (see .whatsapp-float-btn's
       mobile rules) - flag for the client to confirm 60px is "slightly"
       enough, no exact value was given. */
    z-index: 100 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    opacity: 1 !important;
    padding: 0 12px !important;
    /* Client-requested: background extended further out (outer inset
       25px/24px -> 16px/16px, now symmetric too - was 1px off), plus equal
       12px internal padding on both sides so the logo and hamburger sit
       inset from the background edge instead of flush against it (was 0px
       gap on both, confirmed via computed layout before this change). No
       exact px was given, so these are reasoned values - flag for the
       client to confirm the spacing looks right. Mobile only. */
    margin: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    /* Client-requested: background removed from this "tall"/scrolling
       state - now transparent like web's own tall header, which only ever
       had a solid background in its compact/sticky state. The dark
       #263238 fill (added in v1.0.81) moved to .site-header.is-compact
       below instead of being removed outright, since the client still
       wants it on the sticky bar. border-radius is now moot here (nothing
       visible to round) but left in place - harmless, and saves a
       re-declaration if a background is ever wanted back on this state. */
    border-radius: 10px !important;
  }

  /* Sticky/compact bar - appears once js/main-v2.js's scroll listener adds
     .is-compact past 200px scrolled (the same class/threshold web already
     uses; that JS runs unconditionally, only the CSS was ever gated to
     desktop - see the comment on the .is-compact block in the web-width
     section of this file). Height/padding/flex layout are inherited from
     the base .site-header rule above unchanged, which is exactly why the
     logo and hamburger keep the same positioning the client asked to
     preserve - they're normal flex children centered by the shared
     `align-items:center`, not individually positioned, so nothing about
     them needs to be redeclared here. background is redeclared explicitly
     (not inherited) since the base rule above is now transparent - this
     bar is the only one of the two states that should be solid. */
  .site-header.is-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    /* The base rule's max-width:calc(100% - 32px) exists to keep the tall
       state inset 16px from each edge - left/right:0 alone doesn't cancel
       it, so without this override the bar stayed capped at that narrower
       width even while positioned flush left, leaving an unexplained 32px
       gap on the right and throwing off the hamburger's position (caught
       by re-measuring after scroll, not assumed). */
    background: #263238 !important;
    border-radius: 0 !important;
  }

  .header-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 97px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
  }

  .header-logo .logo-link,
  .header-logo .site-logo {
    width: 97px !important;
    height: 54px !important;
    display: block !important;
    object-fit: contain !important;
  }

  .mobile-menu-btn {
    position: relative !important;
    display: flex !important;
    width: 41px !important;
    height: 41px !important;
    border-radius: 30px !important;
    background: #FFA726 !important;
    border: none !important;
    padding: 18px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-btn svg,
  .mobile-menu-btn img {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* 2. Hero Section (#781:1189) - Exact 393x852 layout */
  .hero-section {
    position: relative;
    width: 100%;
    height: 852px;
    min-height: 852px;
    background: #141619;
    overflow: hidden;
  }

  .hero-section picture,
  .hero-bg-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
  }

  /* Headlines (#781:1202) at x: 30px, y: 264px */
  .hero-title-container {
    position: absolute !important;
    top: 206px !important;
    left: 30px !important;
    bottom: 542px !important;
    right: 59px !important;
    width: 304px !important;
    max-width: calc(100% - 60px) !important;
    height: 104px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .hero-title-top {
    position: absolute !important;
    top: 0 !important;
    left: 1px !important;
    width: auto !important;
    min-width: 306px !important;
    height: 38px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    display: block !important;
    text-align: left !important;
    opacity: 1 !important;
  }

  .hero-title-top .orange-text {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.02em !important;
  }

  .hero-title-top .orange-space {
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.06em !important;
  }

  .hero-title-top .orange-italic {
    font-style: italic !important;
    font-weight: 700 !important;
    font-size: 33px !important;
    line-height: 38px !important;
    letter-spacing: 0.01em !important;
  }

  .hero-title-bottom {
    position: absolute !important;
    top: 35px !important;
    left: 0 !important;
    width: 304px !important;
    max-width: 100% !important;
    height: 56px !important;
    margin: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 28px !important;
    line-height: 28px !important;
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    text-align: left !important;
    word-wrap: break-word !important;
    opacity: 1 !important;
  }

  /* Subtitle & CTA Button (#781:1195) at x: 30px, y: 391px with gap: 41px */
  .hero-text-block {
    position: absolute;
    top: 333px;
    left: 30px;
    bottom: 331px;
    right: 30px;
    width: 333px;
    max-width: 100%;
    height: 188px;
    display: flex;
    flex-direction: column;
    gap: 41px;
    box-sizing: border-box;
  }

  .hero-text-block p {
    font-family: "Mona Sans", var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
    text-align: left;
    word-wrap: break-word;
    width: 321px;
    height: 104px;
  }

  .hero-text-block p br {
    display: initial !important;
  }

  .btn-get-started {
    background: #FFFFFF;
    color: #1B3834;
    border-radius: 29px;
    width: 225px;
    height: 43px;
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.01em;
    padding: 4px;
    box-sizing: border-box;
    gap: 8px;
  }

  .btn-get-started .icon-circle {
    background: #FFA726;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
  }

  .btn-get-started .icon-circle svg {
    width: 20px;
    height: 8px;
  }

  /* Offcanvas Mobile Navigation Drawer (Frame 57 - Move in Right Ease out 300ms) */
  .mobile-offcanvas-drawer {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    background: #FFFFFF !important;
    z-index: 99999 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transition: right 300ms ease-out !important;
  }

  .mobile-offcanvas-drawer.open {
    right: 0 !important;
  }

  .offcanvas-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 50px 24px 0 25px !important;
    width: auto !important;
    height: 42px !important;
    padding: 0 !important;
  }

  .offcanvas-logo {
    width: 118px !important;
    height: 42px !important;
    object-fit: contain !important;
  }

  .close-menu-btn {
    width: 24px !important;
    height: 24px !important;
    margin: 9px 0 !important;
    background: transparent !important;
    border: none !important;
    color: #000000 !important;
    font-size: 32px !important;
    font-weight: 300 !important;
    cursor: pointer !important;
    line-height: 24px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .offcanvas-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 81px 22px 24px 23px !important;
    width: auto !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .offcanvas-link {
    width: 100% !important;
    height: 81px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 10px 10px 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #E7E6E6 !important;
    color: #A7A2A2 !important;
    text-decoration: none !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 38px !important;
  }

  .offcanvas-link.active {
    color: #1B3834 !important;
  }

  .offcanvas-link:hover {
    color: #000000 !important;
  }

  .offcanvas-link:last-child {
    border-bottom: none !important;
  }

  /* Services Offcanvas Dropdown */
  .offcanvas-item-dropdown {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 10px 10px 10px 0 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #E7E6E6 !important;
  }

  .offcanvas-item-dropdown .offcanvas-link {
    width: auto !important;
    height: auto !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    border-bottom: none !important;
  }

  .offcanvas-dropdown-toggle {
    background: none !important;
    border: none !important;
    padding: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  .offcanvas-dropdown-arrow {
    flex-shrink: 0 !important;
    transition: transform 0.25s ease !important;
  }

  .offcanvas-item-dropdown.open .offcanvas-dropdown-arrow {
    transform: rotate(180deg) !important;
  }

  .offcanvas-dropdown-menu {
    flex-basis: 100% !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .offcanvas-item-dropdown.open .offcanvas-dropdown-menu {
    max-height: 1000px !important;
    /* No inner scroll box - a nested scroll region here trapped touch
       scrolling (overscroll-behavior: contain stopped it from continuing
       into the rest of the menu once you hit the submenu's edge, making
       scrolling look stuck). The submenu just expands inline and the outer
       .offcanvas-nav (overflow-y: auto below) is the single scroll region,
       so one continuous scroll reaches every service item and the links
       below it (Client Success, Contact, etc.). */
  }

  .offcanvas-dropdown-item {
    display: block !important;
    padding: 12px 0 12px 8px !important;
    color: #A7A2A2 !important;
    text-decoration: none !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-top: 1px solid #E7E6E6 !important;
  }

  .offcanvas-dropdown-item:first-child {
    border-top: none !important;
  }

  .offcanvas-dropdown-item:hover,
  .offcanvas-dropdown-item:active {
    color: #1B3834 !important;
  }

  .offcanvas-footer {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* WHO WE WORK WITH - MOBILE */
  .who-we-work-section {
    padding: 0 !important;
    background-color: #FFFFFF !important;
  }

  .who-we-work-container {
    width: 369px !important;
    height: 1144px !important;
    /* 124px top + 4*240px cards + 3*12px gaps + 24px padding */
    left: 11px !important;
    position: relative !important;
    margin: 50px 0 0 0 !important;
    /* estimated gap from previous section */
  }

  .who-header-top {
    position: relative !important;
    height: 24.43vw !important;
    /* 96px */
    display: block !important;
    margin: 0 0 7.12vw 0 !important;
    /* 28px */
  }

  .who-title-wrapper {
    position: absolute !important;
    width: 100vw !important;
    /* Increased from 88.55vw to prevent wrapping */
    height: 24.43vw !important;
    /* 96px */
    left: 0.25vw !important;
    /* 1px */
    top: 0 !important;
    display: block !important;
  }

  .who-title {
    position: absolute !important;
    width: 100% !important;
    /* Increased from 88.80vw */
    height: 17.35vw !important;
    /* 68.17px */
    left: 0 !important;
    top: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 8.91vw !important;
    /* 35px */
    line-height: 11.70vw !important;
    /* 46px */
    color: #263238 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .who-title-logo {
    position: absolute !important;
    width: 124px !important;
    /* Fixed px, not vw - matches home page's own approach. This media query
       spans 320-767px; a vw size grows the whole way across that range and
       overflows/collides with "WORK WITH?" well before 767px. Fixed px
       stays exactly the size verified to fit safely, same as home page. */
    height: 39.234px !important;
    top: 48.505px !important;
    left: -1.984px !important;
    /* top/left keep it centered over the same spot as before */
    box-sizing: border-box !important;
    padding: 0 !important;
    /* No inner padding - it only shrank the visible logo inside its own box */
    object-fit: contain !important;
  }

  .logo-spacer {
    display: inline-block !important;
    width: 119px !important;
    /* Fixed px for the same reason - widened to match the logo above */
  }

  /* Services page only.
     This heading's font-size is fluid (8.91vw: ~28.5px at 320, ~68px at 767),
     and the logo is sized in the same vw unit so it locks to the text at
     every width instead of drifting apart like a fixed px size would.
     The 0.96x-font-size height used before (matching Home's ratio) still
     rendered visibly taller than the "WORK WITH?" text next to it - Home's
     own logo sits beside a different weight/size of text where that ratio
     happens to look right, but it doesn't carry over here. Re-measured
     directly against this heading's actual rendered cap-height (via canvas
     font metrics: a 34.749px heading at 390px width has a 27px cap-height)
     instead of reusing Home's ratio:
       height: 27/34.749 = 0.777 x font-size = 0.777 x 8.91vw = 6.92vw
       width: scaled by the logo image's own natural aspect ratio (3.16:1,
              1185x375px) so the box has no extra letterboxing = 21.88vw
     top: the first pass (13.22vw) kept the old box's own vertical center,
       but that center was itself never verified against the real text - a
       precise check (inserting a zero-size baseline marker next to "WORK"
       to get its exact page Y, then combining with the same canvas glyph
       metrics used for the height above) showed the logo still sitting
       ~1vw too high at every width tested (320/390/430/767px: needed
       +0.96 to +1.07vw, averaging ~1vw). 13.22vw + 1vw = 14.22vw. */
  .services-who-section .who-title-logo {
    width: 21.88vw !important;
    height: 6.92vw !important;
    top: 14.22vw !important;
    left: 0 !important;
  }

  .services-who-section .logo-spacer {
    /* logo width + a small gap before "WORK", scaled the same way */
    width: 22.44vw !important;
  }

  .who-line-two {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .with-text {
    display: inline !important;
    /* Ensures WITH? stays on the same line as WORK */
  }

  .audience-cards-container {
    flex-direction: column !important;
    width: calc(100vw - 46px) !important;
    height: 996px !important;
    /* 240px * 4 + 12px * 3 */
    gap: 12px !important;
    position: absolute !important;
    top: 124px !important;
    /* 96px title + 28px gap */
    left: 12px !important;
    /* 11px parent + 12px = exactly 23px from screen left */
    margin: 0 !important;
  }

  .audience-cards-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 12px !important;
  }

  .audience-card {
    width: 100% !important;
    border-radius: 17px !important;
    -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    mask-image: radial-gradient(white, black) !important;
  }

  .audience-card:nth-child(1) {
    height: 240px !important;
  }

  .audience-card:nth-child(2) {
    height: 240px !important;
  }

  .audience-card img {
    filter: blur(2px) !important;
    border-radius: 17px !important;
  }

  .audience-card:nth-child(3) img {
    object-position: center top !important;
  }

  .audience-card::after {
    opacity: 1 !important;
  }

  .audience-card:nth-child(1)::after {
    background: #00000033 !important;
  }

  .audience-card:nth-child(2)::after {
    background: #00000057 !important;
  }

  .audience-card:nth-child(3)::after {
    background: #00000078 !important;
  }

  .audience-card h3 {
    width: 155.27px !important;
    height: 97.48px !important;
    top: -5.52px !important;
    left: 28.66px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    line-height: 80px !important;
    letter-spacing: -0.04em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .audience-card p {
    width: 295px !important;
    height: 64px !important;
    top: 151.5px !important;
    left: 30px !important;
    bottom: 24.5px !important;
    right: 24px !important;
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    letter-spacing: 0.02em !important;
    /* 2% */
    vertical-align: middle !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .audience-card:nth-child(3) p {
    letter-spacing: 0 !important;
  }

  .who-header-top .btn-discover-now {
    display: none !important;
  }

  /* ============================
     TESTIMONIALS - MOBILE
     ============================ */
  .testimonials-section {
    width: calc(100vw - 62px) !important;
    height: auto !important;
    margin-top: 15px !important;
    margin-bottom: 0 !important;
    margin-left: 30px !important;
    margin-right: 32px !important;
    position: relative !important;
    background: transparent !important;
    padding: 0 0 30px 0 !important;
    overflow: visible !important;
  }

  .testimonials-section .container {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    width: 100% !important;
    height: 144px !important;
  }

  .testimonials-title {
    width: 100% !important;
    height: 144px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 47px !important;
    line-height: 51px !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    white-space: normal !important;
    background: linear-gradient(180deg, #D2D3D3 13.4%, #E9E9E9 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .mobile-break {
    display: block !important;
  }

  .testimonials-carousel-wrapper {
    position: relative !important;
    top: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 60px !important;
  }

  .testimonials-track {
    margin: 0 !important;
    display: flex !important;
    gap: 0 !important;
    justify-content: flex-start !important;
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .testimonial-card {
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 304px !important;
    padding-top: 190px !important;
    padding-bottom: 29px !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    position: relative !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .client-logo {
    width: 135.18px !important;
    /* Client-requested +15px (was 120.18px), width only - height/left/top
       ("starting" position) all unchanged. */
    height: 54.25px !important;
    left: 27px !important;
    top: 42px !important;
    position: absolute !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .testi-stars {
    position: absolute !important;
    width: 104.52px !important;
    height: 20.15px !important;
    right: 22.48px !important;
    left: auto !important;
    top: 152px !important;
  }

  .testi-stars img {
    width: 100% !important;
    height: 100% !important;
  }

  .testi-quote-box {
    position: relative !important;
    width: calc(100% - 26px) !important;
    height: auto !important;
    min-height: 85px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    padding: 33px 26px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
  }

  .testi-quote {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0.05em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    padding-right: 20px !important;
  }

  .testi-quote-icon {
    width: 34px !important;
    height: 33px !important;
    position: absolute !important;
    right: 9px !important;
    bottom: 6px !important;
    left: auto !important;
    top: auto !important;
  }

  .testi-quote-icon img {
    width: 100% !important;
    height: 100% !important;
  }

  .testimonials-controls {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 331px !important;
    height: 41px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 5px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .testimonials-controls .carousel-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 35px !important;
    border-radius: 3px !important;
    border: 0.5px solid #B3B3B3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: transparent !important;
    flex-shrink: 0 !important;
  }

  .testimonials-controls .carousel-btn svg {
    width: 21px !important;
    height: 21px !important;
    stroke: #858585 !important;
    stroke-width: 1.5px !important;
  }

  .carousel-track-line {
    background: transparent !important;
    height: auto !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
  }

  .carousel-dots-center {
    display: flex !important;
    gap: 2px !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .carousel-dots-center::before {
    content: "" !important;
    width: 73.64px !important;
    height: 1px !important;
    background: #EEEDED !important;
    display: block !important;
    margin: 0 !important;
  }

  .carousel-dots-center::after {
    content: "" !important;
    width: 76.36px !important;
    height: 1px !important;
    background: #EEEDED !important;
    display: block !important;
    margin: 0 !important;
  }

  .carousel-dots-center .dot {
    width: 16px !important;
    height: 16.61px !important;
    border: 1.5px solid #CCCCCC !important;
    border-radius: 50% !important;
    background: transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* This extra dot didn't correspond to any real testimonial card, so it
     was included in the swipe/dot-cycle count (5 dots, 4 real cards) - one
     full cycle would land the active state on this dot instead of back on
     the real first card, an empty circle that never matched what was
     showing. Hidden on mobile too now (js/main-v2.js also no longer counts
     it regardless of width, so it can't desync the dots again). */
  .carousel-dots-center .mobile-only-dot {
    display: none !important;
  }

  .carousel-dots-center .dot.active {
    width: 16px !important;
    height: 16.61px !important;
    border: 1.5px solid #000000 !important;
    background: transparent !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .carousel-dots-center .dot.active::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    background: #000000 !important;
    border-radius: 50% !important;
    position: static !important;
  }

  /* ============================
     SERVICES SECTION - MOBILE
     ============================ */
  .services-list-section {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    margin-top: 36px !important;
    /* gap from the intro section below (was 71px, the hero-to-section gap
       before the intro section existed) */
    background: #263238 !important;
    border-radius: 21px !important;
    padding: 56px 29px !important;
    /* top/bottom reduced from 106px, kept equal to each other so the gap
       above "Services" matches the gap below item 08 */
    position: relative !important;
    box-sizing: border-box !important;
    height: auto !important;
    overflow: visible !important;
  }

  .services-header-top {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    top: unset !important;
    left: unset !important;
  }

  .services-label-wrap {
    position: static !important;
    width: 148.16px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    margin: 0 0 32px 0 !important;
    top: unset !important;
    left: unset !important;
  }

  .services-line {
    width: 2.16px !important;
    height: 14.59px !important;
    background: #FFFFFF !important;
    flex-shrink: 0 !important;
  }

  .services-text {
    width: 137px !important;
    height: 15.01px !important;
    font-family: "Mona Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .services-title {
    position: static !important;
    width: 334px !important;
    height: 147.85px !important;
    font-family: "Mona Sans", sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 34px !important;
    line-height: 40px !important;
    letter-spacing: 0 !important;

    color: #FFFFFF !important;
    margin: 0 0 32px 0 !important;
    display: block !important;
    top: unset !important;
    left: unset !important;
    -webkit-font-smoothing: antialiased !important;
  }

  .services-all-btn {
    position: static !important;
    width: 158px !important;
    height: 41px !important;
    border-radius: 29px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    gap: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    top: unset !important;
    left: unset !important;
  }

  .services-all-btn .btn-icon {
    width: 34px !important;
    height: 32px !important;
    background: #FFA726 !important;
    border-radius: 24px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .services-all-btn .btn-icon svg {
    width: 16px !important;
    height: 6px !important;
  }

  .services-all-btn .btn-text {
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: nowrap !important;
  }

  /* Accordion container */
  .services-accordion-new {
    position: static !important;
    width: 100% !important;
    margin: 58px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    height: auto !important;
    opacity: 1 !important;
    top: unset !important;
    left: unset !important;
  }

  /* Each service item row */
  .service-list-item {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    cursor: pointer !important;
    overflow: hidden !important;
    border: none !important;
    align-items: stretch !important;
  }

  .service-list-item:last-child {
    border-top: none !important;
  }

  /* Hide the image strip on mobile by default */
  .service-image-strip {
    display: none !important;
    width: 343px !important;
    height: 319px !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    background: #263238 !important;
  }

  /* Show image when service card is expanded */
  .service-list-item.active .service-image-strip {
    display: block !important;
    width: 100% !important;
    /* Was a fixed 336px, which only matched the card's actual content
       width by coincidence at one phone size - narrower phones had it
       overflow past the card's right edge, wider phones left an
       uneven gap on the right since it's left-aligned. 100% always
       matches the card exactly, at every width. */
    height: 319px !important;
    margin: 0 !important;
    /* Left align like everything else */
  }

  /* contain, not cover - see the matching comment on the desktop rule above. */
  .service-list-item.active .service-image-strip img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* service-left takes full width */
  .service-left {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 54px !important;
    border-top: none !important;
    border-bottom: 1px solid #6B6B6B !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .service-list-item:last-child .service-left {
    border-bottom: none !important;
  }

  /* Number column */
  .service-num-col {
    width: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    position: relative !important;
    height: 54px !important;
    box-sizing: border-box !important;
  }

  .service-num-col .num {
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 54px !important;
    color: #FFFFFF !important;
    width: 16px !important;
    height: 54px !important;
    margin-right: 30px !important;
  }

  .service-num-col .vertical-line {
    display: none !important;
  }

  /* Content column */
  .service-content-col {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    padding: 0 !important;
    width: auto !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }

  .service-content-col .title {
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: min(22px, 5.3vw) !important;
    line-height: 54px !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    display: block !important;
    white-space: nowrap !important;
  }

  /* Service body hidden by default (closed state) */
  .service-body {
    display: none !important;
    grid-template-rows: unset !important;
    overflow: hidden !important;
    transition: none !important;
  }

  /* Active state overrides */
  .service-list-item.active .service-left {
    height: auto !important;
    min-height: 54px !important;
    align-items: flex-start !important;
    flex-direction: column !important;
    /* Stack vertically */
    padding: 0 !important;
    /* Flush left, no indentation */
    box-sizing: border-box !important;
  }

  .service-list-item.active .service-num-col {
    height: auto !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    /* Flush left */
  }

  .service-list-item.active .service-num-col .num {
    height: 17px !important;
    /* matches 16.64px */
    line-height: 17px !important;
    width: 343px !important;
    margin: 19px 0 0 0 !important;
    display: block !important;
  }

  /* Show horizontal line under number */
  .service-list-item.active .service-num-col .vertical-line {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 1px !important;
    background: #6B6B6B !important;
    top: auto !important;
    right: auto !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  .service-list-item.active .service-content-col {
    width: 100% !important;
    padding: 0 !important;
    /* Flush left */
    overflow: visible !important;
  }

  .service-list-item.active .service-content-col .title {
    height: 27px !important;
    /* exact Figma height */
    line-height: 27px !important;
    margin: 0 0 30px 0 !important;
    /* heading to text gap */
  }

  .service-list-item.active .service-body {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .service-list-item.active .service-body-inner {
    width: 100% !important;
    height: auto !important;
    padding-bottom: 0 !important;
    /* prevent double gap with btn margin */
    overflow: visible !important;
  }

  .service-desc {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 17px !important;
    line-height: 21px !important;
    color: #FFFFFF !important;
    margin: 0 0 30px 0 !important;
    /* text to list gap */
    width: 343px !important;
    height: 63px !important;
    max-width: 100% !important;
  }

  .service-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    width: 282.17px !important;
    height: 105px !important;
    margin: 0 0 30px 0 !important;
    /* list to btn gap */
    padding: 0 !important;
    list-style: none !important;
  }

  .service-features li {
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 14px !important;
    width: 282.17px !important;
    height: 35px !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
  }

  .service-features li .plus-icon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 0 !important;
    /* gap handles this */
  }

  .service-features li .plus-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  .btn-read-more-pill {
    width: 158px !important;
    height: 47px !important;
    border-radius: 29px !important;
    background: #FFFFFF !important;
    display: block !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    /* btn to image gap */
    text-decoration: none !important;
  }

  .btn-read-more-pill .btn-icon-orange {
    position: absolute !important;
    width: 34px !important;
    height: 32px !important;
    top: 7px !important;
    left: 6px !important;
    background: transparent url("../assets/images/servicebtn.svg") no-repeat center center !important;
    background-size: contain !important;
    border-radius: 0 !important;
    display: block !important;
    margin: 0 !important;
  }

  .btn-read-more-pill .btn-icon-orange svg {
    display: none !important;
  }

  .btn-read-more-pill .btn-text {
    position: absolute !important;
    width: 88px !important;
    height: 30px !important;
    top: 10px !important;
    /* matches 9.79 */
    left: 50px !important;
    /* matches 49.84 */
    font-family: "Inter", sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    color: #000000 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ============================
     WHY SOLD - MOBILE
     ============================ */
  .why-sold-section {
    padding: 0 !important;
    margin: 39px 0 0 0 !important;
    width: 100vw !important;
    height: auto !important;
  }

  .why-sold-container {
    width: 341px !important;
    height: 596px !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .why-sold-header {
    position: absolute !important;
    top: 18.55px !important;
    left: 13.72px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
  }

  .why-sold-label {
    width: 115px !important;
    height: 30px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    white-space: nowrap !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 0 !important;
  }

  .why-sold-label::before {
    content: "" !important;
    position: absolute !important;
    width: 2.33px !important;
    height: 26.96px !important;
    top: 1.08px !important;
    left: -9.97px !important;
    background: #FFA726 !important;
    transform: none !important;
  }

  .why-sold-inner-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .years-header {
    position: absolute !important;
    top: 81px !important;
    left: 4px !important;
    margin: 0 !important;
    width: 275px !important;
    height: auto !important;
  }

  .years-text {
    width: 275px !important;
    height: 67px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 63px !important;
    line-height: 43px !important;
    color: #263238 !important;
    margin: 0 !important;
  }

  .years-sub {
    width: 275px !important;
    height: 27px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 21px !important;
    line-height: 41px !important;
    letter-spacing: 0.02em !important;
    color: #263238 !important;
    margin: 0 !important;
    margin-top: -5px !important;
  }

  .years-desc {
    position: absolute !important;
    top: 205px !important;
    left: 4px !important;
    width: 334px !important;
    height: 104px !important;
    font-family: "Inter", sans-serif !important;
    font-weight: 500 !important;
    font-size: 17px !important;
    line-height: 26px !important;
    letter-spacing: 0.02em !important;
    color: #757F84 !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
  }



  .offices-text {
    position: absolute !important;
    top: 329px !important;
    left: 1px !important;
    width: 339px !important;
    height: 23px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    text-align: center !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .offices-text span.text-primary-brand {
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 23px !important;
  }

  .world-map-img {
    position: absolute !important;
    top: 403px !important;
    left: 0 !important;
    width: 341px !important;
    height: 193px !important;
    right: auto !important;
  }

  /* ============================
     INSIGHTS SECTION - MOBILE
     ============================ */
  .insights-section {
    padding: 60px 0 0 0 !important;
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    margin-bottom: 71.61px !important;
    height: auto !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .insights-header-top {
    position: relative !important;
    display: block !important;
    width: 331px !important;
    height: 218px !important;
    margin: 0 0 45px 27px !important;
    padding: 0 !important;
  }

  .insights-label-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    width: 86.88px !important;
    height: 30px !important;
    margin: 0 !important;
  }

  .insights-label {
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    width: 77px !important;
    height: 30px !important;
    padding: 0 !important;
  }

  .insights-label-wrap::before {
    width: 1.88px !important;
    height: 26.36px !important;
    display: block !important;
  }

  .insights-title {
    position: absolute !important;
    top: 62px !important;
    left: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 32px !important;
    line-height: 38px !important;
    color: #000000 !important;
    width: 331px !important;
    height: 76px !important;
    margin: 0 !important;
  }

  .insights-title br {
    display: none !important;
  }

  .btn-discover-now-insights {
    position: absolute !important;
    top: 170px !important;
    left: 0 !important;
    width: 173px !important;
    height: 48px !important;
    border-radius: 29px !important;
    background: #263238 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .btn-discover-now-insights .icon-circle {
    position: absolute !important;
    top: 8px !important;
    left: 6.18px !important;
    width: 31.92px !important;
    height: 32px !important;
    border-radius: 24px !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .btn-discover-now-insights .icon-circle svg {
    display: block !important;
    width: 27px !important;
    height: auto !important;
  }

  .btn-discover-now-insights .icon-circle img.discover-arrow-img {
    display: none !important;
  }

  .btn-discover-now-insights .btn-text {
    position: absolute !important;
    top: 10px !important;
    left: 48.46px !important;
    width: 108.125px !important;
    height: 30px !important;
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Cards Container (Horizontal Scroll) */
  .insights-cards-container {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 26px !important;
    width: 100% !important;
    height: 420px !important;
    padding-left: 27px !important;
    padding-right: 27px !important;
    scroll-padding-left: 27px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }


  .insights-cards-container::-webkit-scrollbar {
    display: none !important;
  }

  /* Large Card */
  .insights-card-large {
    position: relative !important;
    flex: 0 0 383px !important;
    width: 383px !important;
    height: 420px !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.26) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
  }

  .insights-large-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .insights-large-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .insights-large-date {
    position: absolute !important;
    top: 238px !important;
    left: 16px !important;
    width: 183px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
  }

  .calendar-icon-large {
    width: 18px !important;
    height: 18px !important;
    margin-right: 7px !important;
    vertical-align: middle !important;
  }

  .insights-large-title {
    position: absolute !important;
    top: 275px !important;
    left: 16.05px !important;
    width: 345.16px !important;
    height: 75px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 22px !important;
    line-height: 28px !important;
  }

  .insights-large-excerpt {
    position: absolute !important;
    top: 344px !important;
    left: 20px !important;
    width: 346px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #FFFFFF !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* Small Cards */
  .insights-card-small {
    position: relative !important;
    flex: 0 0 289px !important;
    width: 289px !important;
    height: 420px !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05) !important;
  }

  .insights-small-img-wrap {
    position: absolute !important;
    top: 17px !important;
    left: 17px !important;
    width: 256px !important;
    height: 166px !important;
    border-radius: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .insights-small-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 5px !important;
  }

  .insights-small-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .insights-small-date {
    position: absolute !important;
    top: 242px !important;
    left: 24px !important;
    width: 180px !important;
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #7C7474 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .calendar-icon-small {
    width: 15px !important;
    height: 15px !important;
    margin-right: 7px !important;
    vertical-align: middle !important;
  }

  .insights-small-title {
    position: absolute !important;
    top: 279px !important;
    left: 23px !important;
    width: 227px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #464646 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 23px !important;
  }

  .insights-small-excerpt {
    position: absolute !important;
    top: 331px !important;
    left: 23px !important;
    width: 242px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #464646 !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 23px !important;
  }

  .insights-pagination {
    width: 100% !important;
    height: 16.61px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 3px !important;
    margin-top: 20px !important;
  }

  .insight-dot {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 2px solid #CCCCCC !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
  }

  .insight-dot.active {
    border-color: #000000 !important;
  }

  .insight-dot-inner {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: transparent !important;
    transition: background 0.3s ease !important;
  }

  .insight-dot.active .insight-dot-inner {
    background: #000000 !important;
  }

  /* ============================
     PRE-FOOTER - MOBILE
     ============================ */
  .pre-footer {
    position: relative !important;
    width: 100vw !important;
    background: #263238 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    overflow: hidden !important;
    /* No fixed height - was 424px, with the title/button absolutely
       positioned inside via a top value hand-tuned to Home's own specific
       4-line mobile title (documented on client-success.css's own override
       as "copied verbatim from Home's 4-line mobile title"). A page with a
       shorter or longer title needs a genuinely different box height, not
       a copy of Home's - auto height + real padding + flexbox (below)
       gives every page its own correct height automatically instead. */
  }

  .pre-footer-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
    /* title-to-button gap - was implied by Home's specific title/button
       top values (305 - (56.34 + 4*55 line-height) ≈ 28.66px for that one
       page); 32px is a clean, deliberate value that isn't tied to any
       page's specific line count. */
    padding: 56px 24px 50px 24px !important;
    /* Bottom padding is the button's own gap to the section's bottom edge
       (last flex child in this column layout) - 50px per Figma node
       3548:4017/4019, mirroring the desktop 45px fix the same way. */
    box-sizing: border-box !important;
  }

  .pre-footer-title {
    width: 100% !important;
    max-width: 346px !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 34px !important;
    line-height: 55px !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .btn-pre-footer {
    display: flex !important;
    align-items: center !important;
    gap: 9.47px !important;
    /* matches the pre-existing index.html/Services/Why SOLD icon-to-text
       gap (7.29 + 35.42 + 9.47 = 52.18, the left-aligned style already
       used everywhere except the old base rule's own centered button -
       that inconsistency is gone now that every page shares one rule) */
    height: auto !important;
    /* Cancels the desktop base rule's `height: 4.0278cqi` (~58px at the
       1440px desktop reference) - cqi scales to the actual container width,
       so at a ~390px mobile container that same rule silently computed to
       ~15.7px here and clipped the icon+text instead of sizing to Figma's
       ~39px (node 3548:4017). Auto lets padding + content set the height,
       same approach already used for this button's width. */
    background: #FFFFFF !important;
    border-radius: 29px !important;
    padding: 4px 20px 4px 7.29px !important;
    text-decoration: none !important;
  }

  .btn-pre-footer .icon-circle {
    flex-shrink: 0 !important;
    width: 35.42px !important;
    height: 34px !important;
    border-radius: 24px !important;
    background: #FFA726 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .btn-pre-footer .btn-text {
    font-family: "Inter", var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    color: #1B3834 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  /* ============================
     FOOTER - MOBILE
     ============================ */
  .site-footer {
    position: relative !important;
    width: 100vw !important;
    height: auto !important;
    /* Was a fixed 1255px with overflow:hidden - same root cause as
       desktop's fix above: didn't follow real content height (which grew
       once the Services column got 2 more links), so it either left dead
       space below the real content or silently clipped it. Auto-height,
       no more overflow:hidden, so the box always matches its real content
       and nothing can be cut off either. */
    background: #E9EAEB !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: 0 !important;
    padding: 53px 24px 40px 24px !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .site-footer .footer-inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-footer .footer-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 97.25px !important;
    height: 34.78px !important;
    margin-bottom: 19.22px !important;
    display: block !important;
  }

  .site-footer .footer-logo img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .site-footer .footer-line {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 334px !important;
    height: 0px !important;
    border: none !important;
    border-top: 1px solid #C5C2C2 !important;
    background: transparent !important;
    margin-bottom: 14.21px !important;
  }

  .site-footer .footer-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .site-footer .footer-col-main {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-right: 0 !important;
  }

  .site-footer .footer-group-1 {
    width: 100% !important;
    gap: 0 !important;
    margin-bottom: 75.39px !important;
  }

  .site-footer .footer-tagline {
    width: auto !important;
    height: auto !important;
    font-size: 16px !important;
    line-height: 20px !important;
    margin-bottom: 27.68px !important;
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
  }

  .site-footer .btn-book-call {
    width: 157.4px !important;
    height: 45.8px !important;
    border-radius: 29px !important;
    background: #263238 !important;
  }

  .site-footer .btn-book-call .btn-text {
    top: 9.54px !important;
    left: 49.1px !important;
    font-size: 16px !important;
    line-height: 28.63px !important;
    height: 28.63px !important;
    width: 98.37px !important;
  }

  .site-footer .btn-book-call .icon-circle {
    top: 7px !important;
    left: 6.02px !important;
    width: 33.08px !important;
    height: 32px !important;
  }

  .site-footer .btn-book-call .icon-circle svg {
    width: 24.6px !important;
    height: auto !important;
  }

  .site-footer .footer-address-group {
    width: 100% !important;
    gap: 0 !important;
    margin-bottom: 30.62px !important;
  }

  .site-footer .footer-company-name {
    width: 242.62px !important;
    height: 22.9px !important;
    font-size: 16px !important;
    line-height: 27px !important;
    margin-bottom: 6.69px !important;
    font-family: "Inter", var(--font-body) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
  }

  .site-footer .footer-address-text {
    width: 100% !important;
    max-width: 346.88px !important;
    /* Was a fixed 346.88px width - the footer's own 24px side padding
       leaves only 272-327px available on 320-375px phones, so this
       overflowed and got clipped/touching the edge by .site-footer's
       overflow:hidden there. Shared footer, every page affected. */
    height: auto !important;
    /* Was a fixed 95.44px (matched the 5 manually-<br>'d lines at the old
       346.88px width) - now that the box can shrink below that width, a
       fixed height would clip any extra wrapped line. */
    white-space: nowrap !important;
    /* The text already has manual <br> tags marking its 5 intended lines
       (<br> always forces a break regardless of white-space) - nowrap just
       stops the BROWSER from adding its own extra wrap inside one of those
       segments when the box narrows. Without it, the longest line ("Circle
       Mall, Level 2, Jumeirah Village Circle |", 335px natural at 16px)
       still wrapped again below ~383px viewports, giving 320-375px phones
       a different line count than 390px+ ones. */
    font-size: clamp(13px, 4vw, 16px) !important;
    /* Same technique as the hero title fix: the longest line (335px at
       16px) only fits phones ≥383px wide; below that this scales the text
       down instead of relying on wrap, so every phone shows the same
       5-line layout, just slightly smaller text on the narrowest ones. */
    line-height: 1.5625 !important;
    /* 25/16 - unitless so it scales proportionally with the clamped size */
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
  }

  .site-footer .footer-group-3 {
    width: 100% !important;
    gap: 0 !important;
  }

  .site-footer .footer-contact {
    width: 232.59px !important;
    height: 62.03px !important;
    font-size: 16px !important;
    line-height: 27px !important;
    margin-bottom: 34.35px !important;
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
  }

  .site-footer .social-icons {
    width: 163px !important;
    height: 34px !important;
    gap: 9px !important;
    justify-content: flex-start !important;
  }

  .site-footer .social-icons a {
    width: 34px !important;
    height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
  }

  .site-footer .social-whatsapp {
    content: url("../assets/images/sol_whatsapp.png") !important;
    /* Was whatsppmob.svg - the GREEN icon meant for the floating chat
       button (.whatsapp-float-btn), mistakenly reused here too. That made
       the footer's WhatsApp icon green on mobile while the other 3 social
       icons (fbmob/linkdnmob/instamob, all dark #263238 circles matching
       web) stayed dark - client-reported inconsistency, web was correct,
       mobile wasn't. sol_whatsapp.png is a pre-existing, already-correct
       34x34 dark-circle asset matching the other three's exact style -
       it existed in this project completely unused before this fix,
       apparently prepared for this exact spot and never wired up. */
    width: 34px !important;
    height: 34px !important;
  }

  .site-footer .social-fb {
    content: url("../assets/images/fbmob.svg") !important;
    width: 34px !important;
    height: 34px !important;
  }

  .site-footer .social-linkedin {
    content: url("../assets/images/linkdnmob.svg") !important;
    width: 34px !important;
    height: 34px !important;
  }

  .site-footer .social-insta {
    content: url("../assets/images/instamob.svg") !important;
    width: 34px !important;
    height: 34px !important;
  }

  .site-footer .social-icon {
    object-fit: contain !important;
  }

  .site-footer .footer-col-services {
    width: 100% !important;
    height: auto !important;
    margin-top: 30.62px !important;
    margin-right: 0 !important;
    gap: 0 !important;
  }

  .site-footer .footer-col-quicklinks {
    width: 100% !important;
    height: auto !important;
    margin-top: 48.29px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .site-footer .quick-links-group {
    width: 100% !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .site-footer .legal-group {
    width: 174px !important;
    height: auto !important;
    margin-top: 38.46px !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .site-footer .footer-col-services .footer-heading {
    width: 100% !important;
    height: auto !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 40px !important;
    line-height: 27px !important;
    letter-spacing: -0.03em !important;
    font-weight: 400 !important;
    margin: 0 0 18.59px 0 !important;
    padding: 0 !important;
  }

  .site-footer .quick-links-group .footer-heading {
    width: 100% !important;
    height: auto !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 40px !important;
    line-height: 27px !important;
    letter-spacing: -0.03em !important;
    font-weight: 400 !important;
    margin: 0 0 18.59px 0 !important;
    padding: 0 !important;
  }

  .site-footer .legal-group .footer-headingg {
    width: 100% !important;
    height: auto !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-size: 40px !important;
    line-height: 27px !important;
    letter-spacing: -0.03em !important;
    font-weight: 400 !important;
    margin: 0 0 18.59px 0 !important;
    padding: 0 !important;
  }

  .site-footer .footer-col-services .footer-links-list,
  .site-footer .quick-links-group .footer-links-list,
  .site-footer .legal-group .footer-links-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
    width: 100% !important;
  }

  .site-footer .footer-links-list li {
    margin-bottom: 0 !important;
  }

  .site-footer .footer-links-list a {
    font-size: 16px !important;
    line-height: 25px !important;
    color: #1B3834 !important;
    text-decoration: none !important;
    font-family: "Inter", var(--font-body) !important;
    font-weight: 400 !important;
  }
}

/* Added based on specific top, left, bottom, right coordinates from user for web only */
@media (min-width: 768px) {
  .site-footer {
    position: relative;
  }


}


@media (min-width: 768px) {

  .btn-discover-now .icon-circle svg.d-lg-block,
  .btn-discover-now-insights .icon-circle svg.d-lg-block {
    width: 32px !important;
    height: 10px !important;
  }
}


@media (min-width: 768px) {
  .hero-title-container {
    width: calc(100cqi - 21.3194cqi - 40px) !important;
  }

  .hero-title-top {
    width: 100% !important;
    margin-right: -12px !important;
  }

  .hero-title-bottom {
    width: 100% !important;
  }
}

/* ==========================================================================
   Services Page Hero Section
   ========================================================================== */
.services-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  background: #FFFFFF;
  overflow: hidden;
}

.services-hero-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

/* --- Title Container (Left) --- */
.services-hero-title-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.services-hero-title-top {
  position: absolute;
  top: 16.5972cqi;
  /* 239/1440 */
  left: 4.4444cqi;
  /* 64/1440 */
  width: 54.5139cqi;
  /* 785/1440 */
  height: 4.0278cqi;
  /* 58/1440 */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 4.6528cqi;
  /* 67/1440 */
  line-height: 2.0833cqi;
  /* 30/1440 */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin: 0;
  display: flex;
  align-items: center;
}

.services-hero-title-bottom {
  position: absolute;
  top: 20.625cqi;
  /* 297/1440 */
  left: 4.4444cqi;
  /* 64/1440 */
  width: 54.5139cqi;
  /* 785/1440 */
  height: 5.1389cqi;
  /* 74/1440 */
  font-family: 'Mona Sans', sans-serif;
  margin: 0;
  display: flex;
  align-items: center;
}

.services-hero-title-bottom .orange-italic {
  font-weight: 700;
  font-style: italic;
  font-size: 4.7917cqi;
  /* 69/1440 */
  line-height: 2.0833cqi;
  /* 30/1440 */
  letter-spacing: -0.03em;
  color: #FFA726;
  margin-right: 1.0417cqi;
  /* 15/1440 */
}

.services-hero-title-bottom .white-bold {
  font-weight: 700;
  font-size: 4.7917cqi;
  /* 69/1440 */
  line-height: 2.0833cqi;
  /* 30/1440 */
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

/* --- Text Paragraph (Right) --- */
.services-hero-desc {
  position: absolute;
  bottom: 13.75cqi;
  /* 198/1440 */
  right: 5.6944cqi;
  /* 82/1440 */
  width: 33.3333cqi;
  /* 480/1440 */
  height: 8.0556cqi;
  /* 116/1440 */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.5972cqi;
  /* 23/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin: 0;
}

/* --- Button (Right) --- */
.services-hero-btn {
  position: absolute;
  bottom: 6.0417cqi;
  /* 87/1440 */
  right: 16.1806cqi;
  /* 233/1440 */
  width: 22.8472cqi;
  /* 329/1440 */
  height: 3.8194cqi;
  /* 55/1440 */
  border-radius: 2.0139cqi;
  /* 29/1440 */
  background: #FFFFFF;
  text-decoration: none;
  display: block;
  /* allows absolute children */
}

/* Let's style the text inside the button */
.services-hero-btn .btn-text-custom {
  position: absolute;
  top: 0.8181cqi;
  /* 11.78/1440 */
  left: 4.5694cqi;
  /* 65.8/1440 */
  width: 16.9444cqi;
  /* 244/1440 */
  height: 2.0833cqi;
  /* 30/1440 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.7361cqi;
  /* 25/1440 */
  line-height: 2.0833cqi;
  /* 30/1440 */
  letter-spacing: 0.01em;
  color: #1B3834;
  margin: 0;
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* Do not break to a new line */
}

.services-hero-btn .icon-circle {
  position: absolute;
  top: 0.3743cqi;
  /* 5.39/1440 */
  left: 0.7181cqi;
  /* 10.34/1440 */
  width: 2.7417cqi;
  /* 39.48/1440 */
  height: 2.9958cqi;
  /* 43.14/1440 */
  border-radius: 1.6667cqi;
  /* 24/1440 */
  background: #FFA726;
  margin: 0;
}



.services-hero-text-block p {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.5972cqi;
  /* 23/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin: 0;
}

/* Breadcrumb (Bottom Left) */
.services-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;
  /* keep them aligned */
  gap: 0.5556cqi;
  /* 8/1440 */
}

.services-hero-breadcrumb .breadcrumb-home {
  width: 3.8194cqi;
  /* 55/1440 */
  height: 2.0139cqi;
  /* 29/1440 */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25cqi;
  /* 18/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  text-decoration: none;
  display: flex;
  align-items: center;
}

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

.services-hero-breadcrumb .breadcrumb-services-wrapper {
  width: 9.8611cqi;
  /* 142/1440 */
  height: 2.0139cqi;
  /* 29/1440 */
  display: flex;
  align-items: flex-end;
  /* user requested vertical-align: bottom equivalent */
}

.services-hero-breadcrumb .current {
  width: 5.0694cqi;
  /* 73/1440 */
  height: 2.0139cqi;
  /* 29/1440 */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 400;
  font-size: 1.25cqi;
  /* 18/1440 */
  line-height: 2.0139cqi;
  /* 29/1440 */
  letter-spacing: 0.01em;
  color: #FFFFFF;
  display: flex;
  align-items: flex-end;
  /* vertical-align: bottom */
}


/* Responsive Overrides */
@media (max-width: 767px) {

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

  /* .services-hero-breadcrumb was still inheriting the desktop rule's
     position:absolute; bottom:4.1667cqi - nothing in this mobile block
     ever reset it, so it stayed pinned near the bottom of a hero content
     box that's ~790px tall (mostly the section's own bottom padding),
     landing ~271px below the button instead of right after it. Putting it
     back in normal flex flow - .services-hero-content is already
     flex-direction:column, and the breadcrumb is the last child - makes it
     follow the button directly with a standard margin, same as the other
     service pages, and keeps tracking correctly at every width instead of
     relying on one measured "top" value. */
  .services-page-body .services-hero-breadcrumb {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 44px !important;
    /* 20px -> 32px -> 44px, each round asking for a little more room */
  }

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

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

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

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

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

  .services-hero {
    height: 100svh !important;
    min-height: 500px !important;
  }

  .services-hero-content {
    position: relative;
    transform: none;
    left: 0;
    padding: 206px 30px 50px 30px;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .services-hero-title-container {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-bottom: 23px;
    /* Gap between title and desc */
    display: flex;
    flex-direction: column;
  }

  .services-hero-title-top {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    font-size: 33px;
    line-height: 38px;
    letter-spacing: 0.02em;
    font-weight: 700;
    color: #FFA726;
    margin: 0;
  }

  .services-hero-title-bottom {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    font-size: 28px;
    line-height: 28px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 0;
  }

  .services-hero-title-bottom .orange-italic {
    font-size: 33px;
    line-height: 38px;
    font-weight: 700;
    font-style: italic;
    color: #FFA726;
  }

  .services-hero-title-bottom .white-bold {
    font-size: 28px;
    line-height: 28px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .services-hero-desc {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    max-width: 321px;
    height: auto;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.01em;
    margin: 0 0 41px 0;
    /* Gap between desc and button */
  }

  .services-hero-btn {
    position: relative;
    width: 225px !important;
    height: 43px !important;
    border-radius: 29px !important;
    background: #FFFFFF !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
  }

  .services-hero-btn .btn-text-custom {
    position: absolute !important;
    width: 163.54px !important;
    height: 30px !important;
    top: 6px !important;
    left: 51.04px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    color: #1B3834 !important;
    margin: 0 !important;
    display: block !important;
  }

  .services-hero-btn .icon-circle {
    position: absolute !important;
    width: 35.42px !important;
    height: 34px !important;
    top: 4px !important;
    left: 7.29px !important;
    border-radius: 24px !important;
    background: #FFA726 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
  }

  .services-hero-breadcrumb,
  .ws-hero-breadcrumb {
    position: absolute !important;
    top: auto !important;
    bottom: 20px !important;
    left: 20px !important;
    width: auto;
    height: auto;
    font-size: 16px;
    gap: 8px;
  }

  .services-hero-breadcrumb .breadcrumb-home,
  .ws-hero-breadcrumb .ws-breadcrumb-home {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1.4;
  }

  .services-hero-breadcrumb .breadcrumb-icon,
  .ws-hero-breadcrumb .ws-breadcrumb-icon {
    width: 20px;
    height: 13px;
  }

  .services-hero-breadcrumb .breadcrumb-services-wrapper {
    width: auto;
    height: auto;
  }

  .services-hero-breadcrumb .current,
  .ws-hero-breadcrumb .ws-breadcrumb-current {
    width: auto;
    height: auto;
    font-size: 16px;
    line-height: 1.4;
  }

  .services-hero-text-block {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    gap: 30px;
  }

  /* --- Steps Section Mobile --- */
  .services-page-body .steps-section,
  .why-sold-page-body .steps-section {
    margin-top: 51px !important;
  }

  /* --- Success Formula Title Mobile Overrides (matches client-success.html) --- */
  .sf-title-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 0 !important;
  }

  .sf-title-part {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 800 !important;
    /* Scales between 20px (320px screens) and 28px (430px+ screens) so
       "The [logo] Success Formula" always fits on one line instead of
       wrapping on narrower phones. */
    font-size: clamp(20px, 7.2727vw - 3.2727px, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .sf-title-logo {
    width: 78px !important;
    height: 28px !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .sf-subtitle-mobile {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0.01em !important;
    color: #5D5C5C !important;
    text-align: center !important;
    margin: 15px auto 30px auto !important;
    width: 100% !important;
    max-width: 298px !important;
  }

  .steps-container {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 100%;
    justify-items: center;
  }

  .steps-title-wrapper {
    grid-row: 1;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
  }

  .steps-title-1,
  .steps-title-2 {
    font-size: 32px;
  }

  .steps-logo {
    width: 90px;
    height: 32px;
  }

  .steps-subtitle {
    grid-row: 2;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    margin-top: 16px;
    margin-bottom: 32px;
  }

  .step-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #ffa726;
    border-radius: 50%;
    z-index: 2;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
  }

  .step-circle span {
    font-family: "Mona Sans", var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    color: #24323a;
  }

  .step-circle-1 {
    grid-row: 3;
  }

  .step-circle-2 {
    grid-row: 5;
  }

  .step-circle-3 {
    grid-row: 7;
  }

  .step-line-1 {
    grid-row: 3 / 9;
    grid-column: 1;
    display: block;
    width: 3px;
    height: calc(100% - 18px);
    background-color: #1E2024;
    z-index: 1;
    transform: none;
    position: relative;
    top: 18px;
    left: auto;
  }

  .step-line-2,
  .step-line-3,
  .step-highlight-line {
    display: none;
  }

  .step-card-1,
  .step-card-2,
  .step-card-3 {
    grid-column: 1;
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    max-width: 339px;
    height: auto;
    border-radius: 26px;
    background-color: #e9eaeb;
    padding: 16px 40px 19px;
    transform: none !important;
    opacity: 1 !important;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .step-card-1 {
    grid-row: 4;
    margin-top: 147px;
    margin-bottom: 48px;
  }

  .step-card-2 {
    grid-row: 6;
    margin-top: 147px;
    margin-bottom: 35px;
  }

  .step-card-3 {
    grid-row: 8;
    margin-top: 147px;
    margin-bottom: 42px;
  }

  .step-card-inner,
  .step-card-inner-2,
  .step-card-inner-3 {
    width: 100%;
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .step-card-title-wrapper {
    height: 38px;
    gap: 0;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .step-number {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    width: 25px;
  }

  .step-title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    white-space: normal;
  }

  .step-desc,
  .step-desc-2,
  .step-desc-3 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000;
    margin: 0;
  }

  .plus-btn-divider {
    margin-top: 10px;
    margin-bottom: 30px;
  }
}

/* ==========================================================================
   3 Steps Section (Services Page)
   ========================================================================== */
.steps-section {
  position: relative;
  width: 100%;
  background: #FFFFFF;
  margin-top: 5.2778cqi;
  /* 76/1440 */
  margin-bottom: 0;
}

.steps-container-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   Success Formula Title & Subtitle (Services + Why SOLD)
   Mirrors client-success.css .sf-* styles, converted to cqi units
   ========================================================================== */
.sf-title-wrapper {
  position: absolute;
  top: 1.0417cqi;
  /* 15px */
  left: 25.0694cqi;
  /* 361px */
  width: 50.0694cqi;
  /* 721px */
  height: 4.0972cqi;
  /* 59px */
  display: flex;
  justify-content: center;
  gap: 0.9cqi;
  align-items: baseline;
}

.sf-title-part {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 3.6111cqi;
  /* 52/1440 */
  line-height: 4.0972cqi;
  /* 59/1440 */
  letter-spacing: 0.01em;
  color: #263238;
  margin: 0;
}

.sf-title-logo {
  width: 9.375cqi;
  /* 135px */
  height: 3.3333cqi;
  /* 48px */
  object-fit: contain !important;
  transform: translateY(0.4cqi);
}

.sf-subtitle {
  position: absolute;
  top: 6.3889cqi;
  /* 92px */
  left: 30cqi;
  /* 432px */
  width: 40.0694cqi;
  /* 577px */
  text-align: center;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: 1.1806cqi;
  /* 17/1440 */
  line-height: 1.7361cqi;
  /* 25/1440 */
  letter-spacing: 0.02em;
  color: #000000;
  margin: 0;
}

.sf-subtitle .orange-text {
  color: #FFA726;
}

.steps-container {
  position: relative;
  width: 83.9583cqi;
  /* 1209/1440 */
  height: 115.0694cqi;
  /* 1657/1440 */
  left: 9.0278cqi;
  /* 130/1440 */
}

/* --- 3 Steps Typography --- */
.steps-title-wrapper {
  position: absolute;
  top: 0;
  left: 24.0972cqi;
  /* 347/1440 */
  width: 33.8194cqi;
  /* 487/1440 */
  height: 8.8889cqi;
  /* 128/1440 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.2778cqi;
  /* 4/1440 */
}

.steps-title-1 {
  position: relative;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 3.6111cqi;
  /* 52/1440 */
  line-height: 1;
  letter-spacing: 0.01em;
  color: #263238;
  margin: 0;
}

.steps-title-2 {
  position: relative;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 3.6111cqi;
  /* 52/1440 */
  line-height: 1;
  letter-spacing: 0.01em;
  color: #263238;
  margin: 0;
}

.steps-logo {
  position: relative;
  width: 9.375cqi;
  /* 135/1440 */
  height: 3.3333cqi;
  /* 48/1440 */
  object-fit: cover !important;
}

.steps-title-row {
  display: flex;
  align-items: baseline;
  gap: 0.8333cqi;
  /* 12/1440 */
}

/* --- Services Page Web Only Fixes for 3 Steps Typography --- */
/* All positions use exact Figma coordinates relative to .steps-title-wrapper */
@media (min-width: 1025px) {

  .services-page-body .steps-title-wrapper,
  .why-sold-page-body .steps-title-wrapper {
    position: absolute;
    top: 0;
    left: 23.75cqi;
    /* 342/1440 */
    width: 33.8194cqi;
    /* 487/1440 */
    height: 8.8889cqi;
    /* 128/1440 */
  }

  .services-page-body .steps-title-1,
  .why-sold-page-body .steps-title-1 {
    position: absolute;
    top: 0.625cqi;
    /* 9/1440 */
    left: -0.6944cqi;
    /* -10/1440 */
    width: 34.375cqi;
    /* 495/1440 */
    height: 3.4028cqi;
    /* 49/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 3.6111cqi;
    /* 52/1440 */
    line-height: 3.4028cqi;
    /* 49/1440 */
    letter-spacing: 0.01em;
    color: #263238;
    margin: 0;
  }

  .services-page-body .steps-title-row,
  .why-sold-page-body .steps-title-row {
    position: static;
    display: block;
  }

  .services-page-body .steps-title-2,
  .why-sold-page-body .steps-title-2 {
    position: absolute;
    top: 5cqi;
    /* 72/1440 */
    left: 0;
    width: 22.3611cqi;
    /* 322/1440 */
    height: 3.4028cqi;
    /* 49/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    font-size: 3.6111cqi;
    /* 52/1440 */
    line-height: 3.4028cqi;
    /* 49/1440 */
    letter-spacing: 0.01em;
    color: #263238;
    margin: 0;
  }

  .services-page-body .steps-logo {
    position: absolute;
    top: 5.2083cqi;
    /* 75/1440 */
    left: 22.567cqi;
    /* 330/1440 */
    width: 9.375cqi;
    /* 135/1440 */
    height: 3.3333cqi;
    /* 48/1440 */
    object-fit: cover !important;
    margin: 0;
    display: block;
  }

  .why-sold-page-body .steps-logo {
    position: absolute;
    top: 5.2083cqi;
    left: 23.2cqi;
    /* Shifted slightly left to balance gap */
    width: 9.375cqi;
    height: 3.3333cqi;
    object-fit: cover !important;
    margin: 0;
    display: block;
  }
}

.steps-subtitle {
  position: absolute;
  top: 9.8611cqi;
  /* 142/1440 */
  left: 24.0972cqi;
  /* 347/1440 */
  width: 33.75cqi;
  /* 486/1440 */
  height: 3.4722cqi;
  /* 50/1440 */
  font-family: 'Mona Sans', sans-serif;
  font-weight: 600;
  font-size: 1.1806cqi;
  /* 17/1440 */
  line-height: 1.7361cqi;
  /* 25/1440 */
  letter-spacing: 0.02em;
  color: #000000;
  text-align: center;
  margin: 0;
}

/* --- Step 1 Card --- */
.step-card-1 {
  position: absolute;
  top: 28.3333cqi;
  /* 408/1440 */
  left: 49.0278cqi;
  /* 706/1440 */
  width: 34.9306cqi;
  /* 503/1440 */
  height: 18.8194cqi;
  /* 271/1440 */
  background: #EDEDED;
  border-radius: 1.8056cqi;
  /* 26/1440 */
  box-sizing: border-box;
  padding: 2.3264cqi 3.4722cqi 3.2292cqi 3.4722cqi;
}

.step-card-inner {
  width: 27.9861cqi;
  /* 403/1440 */
  display: flex;
  flex-direction: column;
  gap: 2.5694cqi;
  /* 37/1440 */
}

.step-card-title-wrapper {
  display: flex;
  align-items: center;
  gap: 1.1111cqi;
  /* 16/1440 */
  height: 4.2361cqi;
  /* 61/1440 */
}

.step-number,
.step-title {
  font-family: 'Mona Sans', sans-serif;
  font-weight: 700;
  font-size: 1.9444cqi;
  /* 28/1440 */
  line-height: 1;
  letter-spacing: -0.04em;
  color: #000000;
  margin: 0;
}

.step-desc {
  width: 27.9861cqi;
  /* 403/1440 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.4583cqi;
  /* 21/1440 */
  line-height: 2.1528cqi;
  /* 31/1440 */
  letter-spacing: 0.01em;
  color: #000000;
  margin: 0;
}

/* --- Step 2 Card --- */
.step-card-2 {
  position: absolute;
  top: 57.7083cqi;
  /* 831/1440 */
  left: 0;
  width: 34.9306cqi;
  /* 503/1440 */
  height: 18.8194cqi;
  /* 271/1440 */
  background: #EDEDED;
  border-radius: 1.8056cqi;
  /* 26/1440 */
  box-sizing: border-box;
  padding: 3.2639cqi 3.4722cqi 3.125cqi 3.6111cqi;
}

.step-card-inner-2 {
  width: 27.8472cqi;
  /* 401/1440 */
  display: flex;
  flex-direction: column;
  gap: 2.9861cqi;
  /* 43/1440 */
}

.step-desc-2 {
  width: 23.75cqi;
  /* 342/1440 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.4583cqi;
  /* 21/1440 */
  line-height: 2.1528cqi;
  /* 31/1440 */
  letter-spacing: 0.01em;
  color: #000000;
  margin: 0;
}

/* --- Step 3 Card --- */
.step-card-3 {
  position: absolute;
  top: 87.2222cqi;
  /* 1256/1440 */
  left: 49.0278cqi;
  /* 706/1440 */
  width: 34.9306cqi;
  /* 503/1440 */
  height: 18.8194cqi;
  /* 271/1440 */
  background: #EDEDED;
  border-radius: 1.8056cqi;
  /* 26/1440 */
  box-sizing: border-box;
  padding: 2.6389cqi 3.4722cqi 3.5417cqi 3.4722cqi;
}

.step-card-inner-3 {
  width: 27.9861cqi;
  /* 403/1440 */
  display: flex;
  flex-direction: column;
  gap: 1.9444cqi;
  /* 28/1440 */
}

.step-desc-3 {
  width: 23.4028cqi;
  /* 337/1440 */
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.4583cqi;
  /* 21/1440 */
  line-height: 2.1528cqi;
  /* 31/1440 */
  letter-spacing: 0.01em;
  color: #000000;
  margin: 0;
}

/* --- Timeline Elements --- */
.step-circle {
  position: absolute;
  width: 3.75cqi;
  /* 54/1440 */
  height: 3.75cqi;
  /* 54/1440 */
  background: #FFFFFF;
  border: 0.2083cqi solid #EAEBEB;
  /* 3/1440 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Mona Sans', sans-serif;
  font-weight: 800;
  font-size: 2.0833cqi;
  /* 30/1440 */
  color: #24323A;
  z-index: 3;
  line-height: 1.3194cqi;
  /* 19/1440 */
  letter-spacing: 0.01em;
  transition: background 0.5s ease, border-color 0.5s ease;
  box-sizing: border-box;
}

.step-circle.filled {
  background: #FFA726;
  border-color: #FFA726;
}

.step-circle-1 {
  top: 17.9167cqi;
  left: 38.75cqi;
}

/* 258/1440, 558/1440 */
.step-circle-2 {
  top: 49.1667cqi;
  left: 38.75cqi;
}

/* 708/1440 */
.step-circle-3 {
  top: 81.1111cqi;
  left: 38.75cqi;
}

/* 1168/1440 */

.step-line {
  position: absolute;
  width: 0.4167cqi;
  /* 6/1440 */
  background-color: #263238;
  z-index: 1;
}

.step-line-1 {
  top: 21.5972cqi;
  left: 40.4167cqi;
  height: 30.9722cqi;
}

/* 311/1440, 582/1440, 446/1440 */
.step-line-2 {
  top: 52.1528cqi;
  left: 40.4167cqi;
  height: 30.9722cqi;
}

/* 751/1440 */
.step-line-3 {
  top: 84.0972cqi;
  left: 40.4167cqi;
  height: 30.9722cqi;
}

/* 1211/1440 */

.step-highlight-line {
  position: absolute;
  top: 19.7917cqi;
  /* 285/1440 */
  left: 40.4167cqi;
  /* 582/1440 */
  width: 0.4167cqi;
  /* 6/1440 */
  background-color: #FFA726 !important;
  z-index: 2;
  height: 0;
  border-radius: 4px;
  transition: height 0.05s linear;
}

/* --- 3D Card Swing Animation --- */
.step-card {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Cards 1 & 3 are on the RIGHT side → start pushed behind, swing toward viewer */
.step-card-1,
.step-card-3 {
  transform-origin: left center;
  transform: perspective(1200px) rotateY(60deg);
  opacity: 0.3;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Card 2 is on the LEFT side → start pushed behind, swing toward viewer */
.step-card-2 {
  transform-origin: right center;
  transform: perspective(1200px) rotateY(-60deg);
  opacity: 0.3;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When visible: rotate to flat front-facing position */

.step-card.visible {
  transform: perspective(1200px) rotateY(0deg);
  opacity: 1;
}

/* --- Plus Button Divider --- */
.plus-btn-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.9028cqi;
  /* 13/1440 */
  margin-bottom: 2.9861cqi;
  /* 43/1440 */
}

/* --- Services Page Global Overrides --- */
body.services-page-body,
.services-page-body .page-container,
body.why-sold-page-body,
.why-sold-page-body .page-container {
  background-color: #FFFFFF !important;
}

@media (min-width: 768px) {
  .services-hero {
    margin-bottom: 0 !important;
  }

  /* The services accordion now sits right after the hero (where the "Who do
     SOLD work with" section used to be) - give it the same gap that section
     used to have so it isn't flush against the hero. */
  .services-page-body .services-list-section {
    margin-top: 5.9722cqi !important;
    /* 86px - gap from the intro section below, matching the other service pages */
  }

  /* --- Intro Text Section (matches the intro on the other 8 service pages,
     just with white background since this page is white throughout) --- */
  .services-intro-section {
    width: 100%;
    padding-top: 4.9306cqi;
    /* 71/1440 - gap from Hero, matching the other service pages */
    padding-bottom: 0;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
  }

  .services-intro-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .services-intro-row {
    width: 91.6667cqi;
    /* 1320/1440 */
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5.2083cqi;
    /* 75px */
  }

  .services-intro-left {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.7639cqi;
    /* 11/1440 */
  }

  .services-intro-bar {
    width: 0.2778cqi;
    /* 4/1440 */
    height: 2.0833cqi;
    /* 30/1440 fixed height to match 1-line title */
    display: block;
  }

  .services-intro-heading {
    margin: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833cqi;
    /* 30/1440 */
    line-height: 2.0833cqi;
    /* 30/1440 */
    color: #FFA726;
    white-space: nowrap;
  }

  .services-intro-right {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .services-intro-desc {
    width: 100%;
    font-family: "Mona Sans", sans-serif;
    font-weight: 500;
    font-size: 2.2222cqi;
    /* 32/1440 */
    line-height: 2.9167cqi;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: -0.3472cqi;
    /* ~5px offset to counter leading padding */
  }

  .services-who-section {
    background: #FFFFFF !important;
    /* Tighter than the original 6.3194cqi/7.6388cqi (91px/110px) - this section now
       sits between the steps section and the FAQ instead of right after the hero,
       so it no longer needs that much breathing room above/below it. */
    padding-top: 2.7778cqi !important;
    /* 40px */
    /* Bumped from 2.7778cqi (40px) so the gap down to the FAQ (80px) matches
       the gap already used on mobile instead of reading tighter on desktop. */
    padding-bottom: 4.1667cqi !important;
    /* 60px */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .services-who-section .who-we-work-container {
    margin-left: 5.5555cqi !important;
    margin-right: 7.6388cqi !important;
    width: 86.8055cqi !important;
    height: 62.5cqi !important;
    margin-top: 0 !important;
  }

  .services-who-section .who-header-top {
    top: 0 !important;
    left: 2.6388cqi !important;
    bottom: 51.3194cqi !important;
    right: 24.3055cqi !important;
  }

  .services-who-section .audience-cards-container {
    top: 16.5972cqi !important;
    left: 4.375cqi !important;
    width: 77.9166cqi !important;
    height: 46.5277cqi !important;
    gap: 1.5277cqi !important;
    margin: 0 !important;
  }

  .services-who-section .audience-cards-row {
    width: 100% !important;
    height: 22.5cqi !important;
    gap: 1.5277cqi !important;
    justify-content: space-between !important;
  }

  .services-who-section .audience-card {
    width: 38.1944cqi !important;
    height: 22.5cqi !important;
    border-radius: 1.1805cqi !important;
    margin: 0 !important;
  }

  .services-page-body .plus-btn-divider,
  .why-sold-page-body .plus-btn-divider {
    position: relative !important;
    width: 83.9583cqi !important;
    /* 1209/1440 */
    left: 9.0278cqi !important;
    /* 130/1440 */
    margin: 0.9028cqi 0 2.9861cqi 0 !important;
    justify-content: flex-start !important;
    padding-left: 40.2431cqi !important;
    /* 579.5/1440 */
    box-sizing: border-box !important;
    max-width: none !important;
  }
}

/* ============================
   FAQ SECTION (Web Only)
   ============================ */
.faq-section {
  background: #FFFFFF;
  padding: 1.875cqi 8.0208cqi 4.5139cqi;
  /* top: 27px, left/right: 115.5px, bottom: 65px - matches the gap used on
     branding-design/ai-marketing/lead-generation/etc. so every page has the
     same spacing between the FAQ section and the pre-footer below it */
}

/* Services hub + Why SOLD only: FAQ now sits right after Pre-footer (was the
   other way round), so its top gap is matched to its own bottom gap - the
   standard spacing already used site-wide between stacked sections - instead
   of the smaller 27px that was tuned for what used to precede it. Every other
   page keeps the base 27px top above, since their FAQ section still sits
   where it always did. */
.services-page-body .faq-section,
.why-sold-page-body .faq-section {
  padding-top: 4.5139cqi;
  /* 65px */
}

/* Tablet dead zone (768-991px): the mobile FAQ markup (#faq-mobile) is what
   Bootstrap's d-lg-none/d-lg-block actually show below 992px, but the mobile
   padding rules further down this file are gated at max-width:767px - so
   without this, .faq-section-mobile got 0px top padding in this range,
   crowding it straight against Pre-footer. Matches the 56px used <=767px. */
@media (min-width: 768px) and (max-width: 991px) {

  .services-page-body .faq-section-mobile,
  .why-sold-page-body .faq-section-mobile {
    padding-top: 56px !important;
  }
}

.faq-container {
  width: 83.9583cqi;
  /* 1209px / 1440 - exact Figma */
  margin: 0 auto;
}

.faq-label-wrap {
  display: flex;
  align-items: center;
  gap: 1.1833cqi;
  /* 17.04px gap between bar and text */
  width: 19.6528cqi;
  /* 283px / 1440 */
  height: 2.4306cqi;
  /* 35px / 1440 */
}

.faq-label-bar {
  width: 0.2778cqi;
  /* 4px / 1440 - exact Figma */
  height: 2.4306cqi;
  /* 35px / 1440 - exact Figma */
  background: #FFA726;
  flex-shrink: 0;
}

.faq-label-text {
  font-family: "Mona Sans", var(--font-heading);
  font-weight: 600;
  font-size: 2.0833cqi;
  /* 30px */
  line-height: 2.0833cqi;
  /* 30px */
  color: #FFA726;
  white-space: nowrap;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.3889cqi;
  /* 20px / 1440 - Figma gap between items */
  margin-top: 3.4722cqi;
  /* 50px (plus 10px item padding = 60px total visual gap to question) */
}

.faq-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0.6944cqi 0 1.4583cqi;
  /* 10px top, 21px bottom - exact Figma */
  border-bottom: 1px solid #EBEBEB;
  /* exact Figma stroke color */
  width: 100%;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  margin: 0;
}

.faq-question:focus {
  outline: none;
}

.faq-question::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex-shrink: 0;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
  transform: rotate(-135deg);
}

.faq-question-text {
  font-family: "Inter", var(--font-body);
  font-weight: 500;
  /* Medium - exact Figma */
  font-size: 1.4583cqi;
  /* 21px / 1440 */
  line-height: 1.3889cqi;
  /* 20px / 1440 */
  letter-spacing: 0.01em;
  color: #000000;
  /* exact Figma */
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin-top 0.35s ease;
  width: 100%;
  margin-top: 0;
}

.faq-item.active .faq-answer {
  max-height: 13.8889cqi;
  /* 200px - enough for content */
  margin-top: 1.3194cqi;
  /* 19px gap */
}

.faq-answer p {
  font-family: "Inter", var(--font-body);
  font-weight: 400;
  /* Regular - exact Figma */
  font-size: 1.3194cqi;
  /* 19px / 1440 */
  line-height: 1.3889cqi;
  /* 20px / 1440 */
  letter-spacing: 0.01em;
  color: #3A3939;
  /* exact Figma */
  margin: 0;
}

/* Responsive Line Breaks */
.br-mobile {
  display: none;
}

.br-desktop {
  display: inline;
}

/* Mobile Overrides for Services Page - 3 Steps Typography Layout */
@media (max-width: 767px) {
  .br-mobile {
    display: inline !important;
  }

  .br-desktop {
    display: none !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-title-wrapper {
    position: relative;
    width: 74.81vw;
    height: 16.28vw;
    margin-left: 0.51vw;
    margin-bottom: 4.58vw;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-title-1 {
    position: absolute !important;
    width: 58.52vw !important;
    height: 6.36vw !important;
    top: 2.29vw !important;
    left: 8.14vw !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 6.11vw !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-title-row {
    position: static !important;
    display: block !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-title-2 {
    position: absolute !important;
    top: 9.67vw !important;
    left: 8.91vw !important;
    width: 49.36vw !important;
    height: 6.87vw !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 800 !important;
    font-size: 6.11vw !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #263238 !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-logo {
    position: absolute !important;
    width: 14.5vw !important;
    height: 5.09vw !important;
    top: 11.2vw !important;
    left: 48.09vw !important;
    margin: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-subtitle {
    position: relative;
    width: 75.83vw;
    height: 8.65vw;
    margin-top: 0;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 3.05vw;
    line-height: 4.33vw;
    letter-spacing: 0.01em;
    text-align: center;
    color: #5D5C5C;
    margin-left: 0;
  }

  /* Services Page Mobile Overrides for Steps Timeline */

  /* Reset container */
  :is(.services-page-body, .why-sold-page-body) .steps-container {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    padding: 5.09vw 6.87vw !important;
    display: grid !important;
    grid-template-columns: 100% !important;
    gap: 0 !important;
    align-items: center !important;
    justify-items: center !important;
  }

  /* Circles */
  :is(.services-page-body, .why-sold-page-body) .step-circle-1,
  :is(.services-page-body, .why-sold-page-body) .step-circle-2,
  :is(.services-page-body, .why-sold-page-body) .step-circle-3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 9.16vw !important;
    height: 9.16vw !important;
    background-color: #FFFFFF !important;
    /* Starts white */
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 5 !important;
    transform: none !important;
    grid-column: 1 !important;
    justify-self: center !important;
    transition: background-color 0.4s ease !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-circle-1.filled,
  :is(.services-page-body, .why-sold-page-body) .step-circle-2.filled,
  :is(.services-page-body, .why-sold-page-body) .step-circle-3.filled,
  :is(.services-page-body, .why-sold-page-body) .step-circle.filled {
    background-color: #FFA726 !important;
    /* Becomes yellow when active */
  }

  :is(.services-page-body, .why-sold-page-body) .step-circle-1 {
    grid-row: 3 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-circle-2 {
    grid-row: 5 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-circle-3 {
    grid-row: 7 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-circle-1 span,
  :is(.services-page-body, .why-sold-page-body) .step-circle-2 span,
  :is(.services-page-body, .why-sold-page-body) .step-circle-3 span {
    font-size: 20px !important;
    color: #263238 !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* Vertical Line — uses same centering as circles: position:relative + justify-self:center */
  :is(.services-page-body, .why-sold-page-body) .step-line-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    height: calc(100% - 18px) !important;
    width: 3px !important;
    background-color: #263238 !important;
    border: none !important;
    border-left: none !important;
    grid-row: 3 / 9 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 4.58vw !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-highlight-line {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 3px !important;
    height: 0;
    /* Removed !important so JS can override it */
    background-color: #FFA726 !important;
    border: none !important;
    border-left: none !important;
    grid-row: 3 / 9 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 4.58vw !important;
    border-radius: 4px !important;
    transition: height 0.05s linear !important;
  }

  /* Hide other lines */
  :is(.services-page-body, .why-sold-page-body) .step-line-2,
  :is(.services-page-body, .why-sold-page-body) .step-line-3 {
    display: none !important;
  }

  /* Cards — animation disabled on mobile as requested */
  :is(.services-page-body, .why-sold-page-body) .step-card-1,
  :is(.services-page-body, .why-sold-page-body) .step-card-2,
  :is(.services-page-body, .why-sold-page-body) .step-card-3 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    width: 339px !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 194px !important;
    background-color: #E9EAEB !important;
    border-radius: 26px !important;
    padding: 36px 34px 39px 34px !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    justify-self: center !important;
    overflow: hidden !important;
    /* Disabled animation: fully visible and no transform */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-card-1 {
    grid-row: 4 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 12.21vw !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-card-2 {
    grid-row: 6 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 8.91vw !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-card-3 {
    grid-row: 8 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 10.69vw !important;
  }

  /* Title and Subtitle Positioning in Grid */
  :is(.services-page-body, .why-sold-page-body) .steps-title-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    margin: 0 0 18px 0 !important;
    width: 74.81vw !important;
    height: 16.28vw !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-subtitle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    margin: 0 0 43px 0 !important;
    width: 75.83vw !important;
    height: auto !important;
    text-align: center !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-subtitle .desktop-break {
    display: none !important;
  }

  :is(.services-page-body, .why-sold-page-body) .steps-subtitle .mobile-break {
    display: inline !important;
  }

  /* Inner Wrappers */
  :is(.services-page-body, .why-sold-page-body) .step-card-inner,
  :is(.services-page-body, .why-sold-page-body) .step-card-inner-2,
  :is(.services-page-body, .why-sold-page-body) .step-card-inner-3 {
    width: 271px !important;
    height: 119px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    align-items: flex-start !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-card-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 28px !important;
    margin: 0 0 9px 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* Typography */
  :is(.services-page-body, .why-sold-page-body) .step-number {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    width: auto !important;
    height: 28px !important;
    line-height: 28px !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    width: auto !important;
    height: 28px !important;
    line-height: 28px !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-desc,
  :is(.services-page-body, .why-sold-page-body) .step-desc-2,
  :is(.services-page-body, .why-sold-page-body) .step-desc-3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    color: #000 !important;
    width: 271px !important;
    height: 72px !important;
    text-align: left !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body) .step-desc .desktop-break,
  :is(.services-page-body, .why-sold-page-body) .step-desc-2 .desktop-break,
  :is(.services-page-body, .why-sold-page-body) .step-desc-3 .desktop-break {
    display: none !important;
  }

  /* FAQ Section Mobile */
  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-section-mobile {
    width: 100% !important;
    padding-top: 56px !important;
    padding-bottom: 50px !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-container {
    padding: 0 22.5px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-header {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-bar {
    width: 2px !important;
    height: 22px !important;
    background: #FFA726 !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-label {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    margin: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-item {
    padding-top: 10px !important;
    padding-bottom: 21px !important;
    border-bottom: 1px solid rgba(162, 162, 162, 0.32) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-item:last-child {
    border-bottom: none !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-question {
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-question:focus {
    outline: none !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-question-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0.01em !important;
    color: #000 !important;
    display: block !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-answer {
    display: none !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    margin-top: 0 !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-item.active .faq-mobile-answer {
    display: block !important;
    margin-top: 12px !important;
  }

  :is(.services-page-body, .why-sold-page-body, .insights-page-body, .branding-page-body, .social-page-body) .faq-mobile-answer p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 20px !important;
    letter-spacing: 0.01em !important;
    color: #3A3939 !important;
    margin: 0 !important;
  }

  /* Services Hero Title Mobile Exact Overrides */
  .services-page-body .services-hero-content {
    /* was 65.65vw, which drifted from 210px on a 320px phone to 282px on a
       430px one. Fixed 201px matches the Home hero at every width. Only the
       start moved - the padding below and all inner gaps are unchanged. */
    padding-top: 201px !important;
    padding-left: 7.12vw !important;
    /* 28px */
    padding-right: 13.49vw !important;
    /* 53px */
    padding-bottom: 82.19vw !important;
    /* 323px bottom gap after the button */
  }

  .services-page-body .services-hero-title-container {
    width: 100% !important;
    /* 100% of the padded container = 312px exactly */
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 8.14vw !important;
    /* Creates exact 357px top offset for description */
  }

  .services-page-body .services-hero-desc {
    margin: 0 !important;
    margin-left: -0.51vw !important;
    /* 28px parent padding - 2px = 26px left gap exactly */
    width: 84.48vw !important;
    /* 332px exactly */
    max-width: none !important;
    height: auto !important;
    /* Will perfectly hit 88px height natively */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.07vw !important;
    /* 16px */
    line-height: 5.60vw !important;
    /* 22px */
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
  }

  .services-page-body .services-hero-desc .mobile-break {
    display: inline !important;
  }

  .services-page-body .services-hero-title-top {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .services-page-body .services-hero-title-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5vw !important;
    /* Adds the missing space between 'Experts' and 'on Your Team' */
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    margin-top: -3.31vw !important;
    /* Pulls the second line up by ~13px to match Figma's 27px top placement despite 40px line-height */
  }

  .services-page-body .services-hero-title-bottom .orange-italic {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    font-weight: 700 !important;
    font-style: italic !important;
    color: #FFA726 !important;
  }

  .services-page-body .services-hero-title-bottom .white-bold {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    font-weight: 700 !important;
    color: #FFFFFF !important;
  }

  .services-page-body .services-hero-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    margin-top: 10.43vw !important;
    /* (486px top - 445px desc bottom) = 41px gap exactly */
    margin-left: -0.51vw !important;
    /* 28px parent padding - 2px = 26px left gap exactly */
    width: 225px !important;
    height: 43px !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 29px !important;
    background: #FFFFFF !important;
    text-decoration: none !important;
  }

  .services-page-body .services-hero-btn .btn-text-custom {
    position: absolute !important;
    width: 163.54px !important;
    height: 30px !important;
    top: 6px !important;
    left: 51.04px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    color: #1B3834 !important;
    margin: 0 !important;
    display: block !important;
  }

  .services-page-body .services-hero-btn .icon-circle {
    position: absolute !important;
    width: 35.42px !important;
    height: 34px !important;
    top: 4px !important;
    left: 7.29px !important;
    border-radius: 24px !important;
    background: #FFA726 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Why Sold Hero Mobile Overrides */
  /* Services Hero Title Mobile Exact Overrides */
  .why-sold-page-body .services-hero-content {
    /* was 65.65vw, which drifted from 210px on a 320px phone to 282px on a
       430px one. Fixed 201px matches the Home hero at every width. Only the
       start moved - the padding below and all inner gaps are unchanged. */
    padding-top: 201px !important;
    padding-left: 7.12vw !important;
    /* 28px */
    padding-right: 13.49vw !important;
    /* 53px */
    padding-bottom: 82.19vw !important;
    /* 323px bottom gap after the button */
  }

  .why-sold-page-body .services-hero-title-container {
    width: 100% !important;
    /* 100% of the padded container = 312px exactly */
    margin: 0 !important;
    padding: 0 !important;
    margin-bottom: 8.14vw !important;
    /* Creates exact 357px top offset for description */
  }

  .why-sold-page-body .services-hero-desc {
    margin: 0 !important;
    margin-left: -0.51vw !important;
    /* 28px parent padding - 2px = 26px left gap exactly */
    width: 84.48vw !important;
    /* 332px exactly */
    max-width: none !important;
    height: auto !important;
    /* Will perfectly hit 88px height natively */
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.07vw !important;
    /* 16px */
    line-height: 5.60vw !important;
    /* 22px */
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
  }

  .why-sold-page-body .services-hero-desc .mobile-break {
    display: inline !important;
  }

  .why-sold-page-body .services-hero-title-top {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .why-sold-page-body .services-hero-title-bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5vw !important;
    /* Adds the missing space between 'Experts' and 'on Your Team' */
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    letter-spacing: 0.02em !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    margin-top: -3.31vw !important;
    /* Pulls the second line up by ~13px to match Figma's 27px top placement despite 40px line-height */
  }

  .why-sold-page-body .services-hero-title-bottom .orange-italic {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    font-weight: 700 !important;
    font-style: italic !important;
    color: #FFA726 !important;
  }

  .why-sold-page-body .services-hero-title-bottom .white-bold {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 6.92vw !important;
    /* 27.2px */
    line-height: 10.18vw !important;
    /* 40px */
    font-weight: 700 !important;
    color: #FFFFFF !important;
  }

  .why-sold-page-body .services-hero-btn {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    margin-top: 10.43vw !important;
    /* (486px top - 445px desc bottom) = 41px gap exactly */
    margin-left: -0.51vw !important;
    /* 28px parent padding - 2px = 26px left gap exactly */
    width: 225px !important;
    height: 43px !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 29px !important;
    background: #FFFFFF !important;
    text-decoration: none !important;
  }

  .why-sold-page-body .services-hero-btn .btn-text-custom {
    position: absolute !important;
    width: 163.54px !important;
    height: 30px !important;
    top: 6px !important;
    left: 51.04px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    color: #1B3834 !important;
    margin: 0 !important;
    display: block !important;
  }

  .why-sold-page-body .services-hero-btn .icon-circle {
    position: absolute !important;
    width: 35.42px !important;
    height: 34px !important;
    top: 4px !important;
    left: 7.29px !important;
    border-radius: 24px !important;
    background: #FFA726 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

}

/* --- Services Page: Intro Text Section (MOBILE) - mirrors the intro
   section markup/spacing used on the other 8 service pages. --- */
@media (max-width: 767px) {
  .services-intro-section {
    background-color: #FFFFFF !important;
    padding-top: 60px !important;
    padding-bottom: 34px !important;
  }

  .services-intro-container {
    width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  .services-intro-row {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }

  .services-intro-left {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  .services-intro-bar {
    width: 4px !important;
    height: 31px !important;
    display: block !important;
  }

  .services-intro-heading {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    margin: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
  }

  .services-intro-right {
    width: 100% !important;
  }

  .services-intro-desc {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 352px !important;
  }
}

/* =============================================================
   TABLET PORTRAIT (768-991px) - HEADER
   The desktop pill nav technically fits here, but only by shrinking its
   labels to ~8.5px, and flooring them to a readable size widens the nav
   until it collides with the BOOK A CALL button. Narrow tablets therefore
   keep the mobile drawer (same 41px burger as phones); the full nav
   returns at 992px, where its labels are already 11px+ and there is room.
   ============================================================= */
@container (min-width: 768px) and (max-width: 991px) {

  .header-nav,
  .header-cta {
    display: none !important;
  }

  .mobile-menu-btn {
    /* Was position:relative with margin:0, which left it in normal flow at
       the header's top-left corner - clipped by the top edge and sitting on
       top of the logo. Every other header child is absolutely positioned, so
       this one is too now: pinned right at the same 2.7777cqi (40px) inset
       .header-cta uses, and vertically centred, so the tablet header reads
       logo-left / burger-right on one centre line. Tablet only - the <=767px
       blocks keep their own flex layout, untouched. */
    position: absolute !important;
    right: 2.7777cqi !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    width: 41px !important;
    height: 41px !important;
    border-radius: 30px !important;
    background: #FFA726 !important;
    border: none !important;
    padding: 18px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .mobile-menu-btn svg,
  .mobile-menu-btn img {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
}


/* =============================================================
   TABLET (768-1199px) - SHARED TYPOGRAPHY FLOORS
   The layout itself scales correctly here (it is all cqi), but type
   scales with it, so at 768px the design sits at ~53% and some copy
   lands under 12px. These max() floors keep the cqi scaling wherever it
   is already comfortable and only stop it shrinking past readable.
   Applies to every page that loads style-v2.css.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  /* services accordion: number + description (1.3888cqi) */
  .service-list-item .num,
  .service-desc {
    font-size: max(12px, 1.3888cqi);
  }

  /* footer (1.5277cqi / 1.4583cqi) */
  .footer-company-name {
    font-size: max(12px, 1.5277cqi);
  }

  .footer-links-list a,
  .footer-contact-info a,
  .footer-contact-info span {
    font-size: max(12px, 1.4583cqi);
  }

  /* Breadcrumbs (1.25cqi) - 9.6px at 768 without a floor. Selectors are
     written two-deep to match the specificity of the base rules
     (.services-hero-breadcrumb .breadcrumb-home etc.), which would
     otherwise win over a single-class floor. */
  .services-hero-breadcrumb .breadcrumb-home,
  .services-hero-breadcrumb .current,
  .services-hero-breadcrumb a,
  .ws-hero-breadcrumb .ws-breadcrumb-home,
  .ws-hero-breadcrumb .ws-breadcrumb-current,
  .client-success-hero-breadcrumb .breadcrumb-home,
  .client-success-hero-breadcrumb .current,
  .client-success-hero-breadcrumb a,
  .breadcrumb-services-wrapper .current {
    font-size: max(12px, 1.25cqi);
  }

  /* FAQ questions (1.4583cqi) */
  .faq-question-text,
  .faq-mobile-question-text {
    font-size: max(14px, 1.4583cqi);
    line-height: max(13.4px, 1.3889cqi);
  }

  /* insights cards (0.9722cqi) */
  .insights-small-excerpt,
  .insights-large-excerpt,
  .insights-small-date,
  .insights-large-date {
    font-size: max(12px, 0.9722cqi);
  }

  /* hero intro paragraph (1.5277cqi) */
  .hero-text-block p {
    font-size: max(13px, 1.5277cqi);
    line-height: max(17.1px, 2.0138cqi);
  }

  /* testimonial quotes (1.1111cqi -> 8.5px at 768) */
  .testi-quote,
  .testi-name,
  .testi-role {
    font-size: max(12px, 1.1111cqi);
  }

  /* FAQ answers (1.3194cqi -> 10.1px at 768). The open-state max-height is
     also raised, otherwise the now-larger text would be clipped by the
     cqi-based cap that was sized for the desktop font. */
  .faq-answer p,
  .faq-mobile-answer p {
    font-size: max(12px, 1.3194cqi);
  }

  .faq-item.active .faq-answer {
    max-height: max(220px, 13.8889cqi);
  }

  /* header nav only exists from 992px up here, where there is room for
     a 12px floor without the nav colliding with BOOK A CALL */
  .nav-link,
  .btn-book-call {
    font-size: max(12px, 1.1111cqi);
  }
}

/* ============================
   FLOATING WHATSAPP BUTTON
   Figma node 3620:1009 (web/tablet): bottom-right pill, #0DC143 background,
   40px radius (clamps to a full pill at 57px height either way), box-shadow
   6px 8px 13px #0DC14366 (40% opacity green).
   Width fixed at Figma's 337px per client request. The content group
   (icon + gap + text) is centred inside it, so a longer/shorter ACF label
   re-centres instead of resizing the button. box-sizing is border-box
   globally, so the 20px side padding sits inside the 337px.
   25px right/bottom inset matches Figma's 1440 - 1078 - 337 = 25px right
   margin, reused for bottom too for a symmetric floating placement.
   ============================ */
/* Client-requested: a "wave"/ripple effect matching digitalnexa.com's
   WhatsApp button, web only. Their button uses an infinite pulse animation
   on box-shadow - an expanding, fading ring - not a static drop-shadow.
   Reused their exact keyframe shape (0% a tight ring at the button's own
   colour and 0.7 opacity, 70% expanded 15px and fully transparent, 100%
   back to 0) but with this project's own green (#0DC143 = rgb(13,193,67))
   instead of theirs, and deliberately did NOT copy their red notification
   "1" badge - client explicitly asked to leave that out. Icon, text and
   button colour/shape are all otherwise unchanged. Web only - cancelled
   explicitly in the mobile media query below. Note: while this animation
   runs it takes over the box-shadow property entirely, so the static
   Figma drop-shadow two rules down (and the :hover one after it) has no
   visible effect for as long as the animation is active - the same
   trade-off the reference site itself makes; kept both because a future
   reader might want the animation removed and the static shadow to
   reappear without guessing what it should be. */
@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(13, 193, 67, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(13, 193, 67, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(13, 193, 67, 0);
  }
}

.whatsapp-float-btn {
  position: fixed;
  bottom: 1.7361cqi;
  /* 25px */
  right: 1.7361cqi;
  /* 25px */
  z-index: 9990;
  /* above the header (100), below the contact modal (9999) and the
     mobile drawer (99999) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4166cqi;
  /* Client-requested: reduce the icon-to-text gap a bit more, web only.
     Was 0.6944cqi (10px, the original Figma value) - no exact new number
     given, reduced to 6px as a reasoned "little more" decrease; flag for
     the client to confirm. Mobile is unaffected either way - the text is
     display:none there, so this gap has no visible effect on that
     breakpoint regardless of its value. */
  width: 23.4028cqi;
  /* 337px - Figma node 3620:1009 */
  height: 3.9583cqi;
  /* 57px - vertical centring of icon+text comes from height+
     align-items:center rather than the Figma 8px top/bottom padding,
     since exact sub-part heights vary with the font */
  padding: 0 1.3888cqi;
  /* 20px left/right */
  background: #0DC143;
  border-radius: 2.7777cqi;
  /* 40px */
  box-shadow: 0.4166cqi 0.5555cqi 0.9027cqi 0 rgba(13, 193, 67, 0.4);
  /* 6px 8px 13px, #0DC14366 = 40% opacity */
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float-btn:hover {
  transform: translateY(-0.2777cqi);
  /* 4px lift */
  box-shadow: 0.4166cqi 0.8333cqi 1.25cqi 0 rgba(13, 193, 67, 0.5);
}

.whatsapp-float-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.whatsapp-float-icon svg {
  width: 1.666cqi;
  height: 1.666cqi;
  /* 24px */
  display: block;
}

/* The mobile-only branded icon (assets/images/whatsppmob.svg) is hidden
   here on web/tablet, which keeps the hand-drawn glyph above inside the
   existing green pill - unchanged, matches the original Figma spec.
   Shown instead of the svg on mobile - see that media query below. */
.whatsapp-float-icon-img {
  display: none;
}

.whatsapp-float-text {
  font-family: 'Inter', var(--font-body, sans-serif);
  font-weight: 600;
  font-size: 1.1111cqi;
  /* 16px */
  line-height: 1.3611cqi;
  color: #FFFFFF;
  white-space: nowrap;
}

/* Hide the button while the contact popup is open. The popup's overlay is
   z-index 9999 with a 50% black backdrop, so the button (9990) showed
   through it dimmed AND unclickable - it looked broken. Raising it above
   the overlay instead is worse: on phones the popup card fills the screen
   and the button lands on top of its close button.
   This covers the standalone /contact/ page (whose overlay ships with
   .active already on it) and every other page the moment the popup is
   opened, and :has() is live, so closing the popup brings it straight back.
   The mobile drawer needs no rule - it is an opaque full-screen white panel
   at z-index 99999, so it already covers the button completely.
   :has() is safe here: this stylesheet is already built on container query
   units, which ship in the same browser versions. */
body:has(.contact-modal-overlay.active) .whatsapp-float-btn {
  display: none;
}

/* Tablet floor. Every value above is a cqi, so unfloored the pill shrinks to
   180x30 with an 8.5px label at 768px - illegible, and out of step with the
   rest of the UI, whose text already floors at 12px in the block above.
   Floored here at 75% of the 1440px design, the same ratio that 12px/16px
   text floor implies. Every floor crosses over at a 1080px container, so the
   pill stays exactly in proportion on both sides of the crossover: fluid
   from 1440 down to 1080, then held at 75% across the rest of tablet.
   Must sit AFTER the base rule - same specificity, so source order decides.
   Scoped to 768px+ so it never touches the mobile circle below. */
@media (min-width: 768px) {
  .whatsapp-float-btn {
    bottom: max(18.75px, 1.7361cqi);
    right: max(18.75px, 1.7361cqi);
    gap: max(4.5px, 0.4166cqi);
    /* Was max(7.5px, 0.6944cqi) - kept in sync with the base rule's gap
       reduction (10px -> 6px). This rule (min-width:768px, so it also
       covers desktop, not just tablet) sits AFTER the base rule and wins
       at equal specificity, which is why editing only the base rule's gap
       had no visible effect at 1440px until this was updated too - caught
       by re-measuring computed style, not assumed. Floor kept at the same
       75% ratio (4.5/6 = 0.75, matching 7.5/10). */
    width: max(252.75px, 23.4028cqi);
    height: max(42.75px, 3.9583cqi);
    padding: 0 max(15px, 1.3888cqi);
    border-radius: max(30px, 2.7777cqi);
  }

  .whatsapp-float-icon svg {
    width: max(18px, 1.666cqi);
    height: max(18px, 1.666cqi);
  }

  .whatsapp-float-text {
    font-size: max(12px, 1.1111cqi);
    line-height: max(14.7px, 1.3611cqi);
  }
}

/* Mobile: icon-only circle sitting immediately LEFT of the hamburger with a
   12px gap, vertically centred on it (client request - it previously sat
   below the header).
   The right inset is built from the mobile header's own geometry, which is
   constant at every phone width: the header pill is inset 16px from the
   right (was 24px) plus 12px of internal padding added when the client
   asked for equal spacing between the logo/hamburger and the background
   edge - so the hamburger's own right edge now sits 16+12=28px in from the
   viewport edge (was 24px flush, no padding). The 12px gap is measured to
   that 41px box, because the button's visible shape IS the box - it paints
   a filled circle, and the 24px SVG inside it is only the white bars.
   Measuring to the SVG instead leaves a 3.5px gap on screen.
   Vertical: recalculated for the header's height increase (54px -> 60px,
   client-requested, mobile only). Centre line is now 72px from the top
   (header top 42px + half of 60px), so this 41px button needs
   top: 72 - 41/2 = 51.5px to share it (was 48.5px, for the old 69px
   centre line). Hamburger and logo needed no equivalent change - they're
   plain flex children of `.site-header`'s own `align-items:center`, which
   re-centres them in whatever height the bar has automatically; this
   button is the one exception, since it's a separate position:fixed
   element with a manually-calculated `top`, not a flex child of the bar.
   Position history: briefly switched to position:absolute so this scrolled
   away with the mobile header, then reverted back to fixed (v1.0.66 - the
   client wanted the WHOLE top bar pinned throughout scroll at the time).
   REVERSED AGAIN: client now wants mobile to match web's scroll-away-then-
   sticky two-state header, so this is position:absolute by default once
   more - `body` is position:relative with no offset from `.page-container`,
   so both fixed and absolute land this button in the same spot at
   page-load, meaning nothing else needs to change for the default state.
   A separate rule below (keyed off `.site-header.is-compact`, the same
   class that flips the header itself) switches this back to fixed with
   recalculated coordinates once the page is scrolled past the same 200px
   threshold. */
@media (max-width: 767px) {
  /* This button is now a real child of .site-header (moved there 2026-09-21;
     see header.php / the static HTML) instead of a separate element that
     had to duplicate the header's own coordinates by hand. .site-header is
     always the positioned ancestor here - position:absolute in its default
     "tall" state and position:fixed once .is-compact takes over - so ONE
     rule now covers both states automatically instead of needing a second
     `body:has(.site-header.is-compact)` override to recalculate everything
     whenever the header's own geometry changes. top:50%+translateY(-50%)
     mirrors the tablet hamburger's own technique just above this block for
     exactly the same reason: it self-centers on whatever height the header
     currently has, so it can't drift out of sync with it, whether that's
     from a scroll-state change or - as happened live - unrelated injected
     content shifting the header's position on the page. */
  .whatsapp-float-btn {
    position: absolute;
    top: 50%;
    bottom: auto;
    right: 65px;
    /* 12px header padding + the 41px hamburger + a 12px gap - the same
       right offset the compact bar already used, since a header-relative
       position no longer needs a separate number for the tall state's
       extra 16px outer inset; that inset is now just part of .site-header's
       own box, not something this button has to account for itself. */
    left: auto;
    transform: translateY(-50%);
    width: 41px;
    /* 41px - matched exactly to Figma 3620:998 */
    height: 41px;
    /* 41px */
    padding: 0;
    gap: 0;
    border-radius: 50%;
    /* the base rule's border-radius is a cqi value, which at 48x48px is
       nowhere near half the box - it rendered as a rounded square instead
       of a circle until this was added */
    background: transparent;
    box-shadow: none;
    animation: none;
    /* Same "icons only, no background box" request as the header (see its
       comment) - the base rule's green #0DC143 circle and drop-shadow are
       both cleared here, mobile only. The web-only pulse ripple animation
       (see the base rule) is explicitly cancelled here too, rather than
       just relying on box-shadow:none - the animation would otherwise
       keep overriding box-shadow back to the ring effect every 2s
       regardless of this static value. */
  }

  .whatsapp-float-text {
    display: none;
  }

  /* Swapped to the dedicated mobile icon (assets/images/whatsppmob.svg,
     Figma node 3620:998) instead of the hand-drawn glyph recoloured green -
     that recolour was a stand-in guess made without Figma access; this
     asset already existed in the project, unused, and is the real one.
     It has its own dark circle baked into the artwork, so it needs no
     background/fill CSS of its own - just shown at the full 48px touch
     target it sits in (replaces the old 40px glyph-only sizing). */
  .whatsapp-float-icon svg.whatsapp-float-icon-svg {
    display: none;
    /* Needs this compound selector, not just .whatsapp-float-icon-svg -
       the always-on base rule (.whatsapp-float-icon svg, no media query)
       sets display:block at a HIGHER specificity (class+type beats a
       single class), so a plain class selector here loses and the inline
       svg stayed visible underneath the img. Matching + exceeding that
       selector's shape wins outright regardless of source order. */
  }

  .whatsapp-float-icon-img {
    display: block;
    width: 41px;
    height: 41px;
  }
}
/* Success Formula mobile subtitle (Services, Why SOLD, Client Success) - Figma 1680:2414: Mona Sans Medium 12/17,
   0.01em, #5D5C5C, centred, 298 wide; "helping your business sell more." in #FFA726 on its own line. Was 14/20 with
   the old "Our three-step method..." copy (text itself = ACF subtitle_mob / subtitle_mobile, see
   deploy/steps-subtitle-mobile.sql). The 15px top / 30px bottom gaps are unchanged. `p.` beats the equal
   !important rule in client-success.css, which loads after this file. */
@media (max-width: 767px) {
  p.sf-subtitle-mobile {
    font-size: 12px !important;
    line-height: 17px !important;
    letter-spacing: 0.01em !important;
  }

  p.sf-subtitle-mobile .orange-text {
    color: #FFA726 !important;
  }
}

/* ==========================================================================
   SEO heading structure - All Services page (client sheet, 2026-09-29): tags changed, design unchanged.
   New h2/h3 (were span/div) get Bootstrap/global heading defaults (margin-bottom .5rem, heading font, weight 500,
   line-height 1.2, size) the old elements never had -> put back what they had. :where() = tag-level priority, so every
   class rule still wins exactly as before. Only matches these tags, so other pages sharing the classes are unaffected.
   ========================================================================== */
h2:where(.faq-mobile-label),
h3:where(.faq-mobile-question-text, .title) {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

h2:where(.sf-title-wrapper),
h3:where(.step-card-title-wrapper) {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Hero: "Marketing Services" was an <h2>, now a line inside the single <h1> - keep the h2 defaults it had */
span:where(.services-hero-title-bottom) {
  display: block;
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  font-size: calc(1.325rem + .9vw);
  color: var(--bs-heading-color, inherit);
}

span:where(.services-hero-title-top) {
  display: block;
}

/* the single <h1> around both lines takes no box of its own (and no heading margin), so the two lines sit in the
   title container's flex column exactly as the old <h1> + <h2> did */
h1:where(.services-hero-title-seo) {
  display: contents;
  margin: 0;
}

@media (min-width: 1200px) {
  span:where(.services-hero-title-bottom) {
    font-size: 2rem;
  }
}

/* Services list (01-08) - web/tablet: the open item's text (subtitle, "+"
   lines, button) keeps a fixed gap to the image on the right and wraps to the
   next line instead of running into it. Service names are not affected. A
   "+" line that wraps keeps its lines apart (line height = the 22px icon at
   1440, so a one-line item is exactly as before). */
@media (min-width: 768px) {
  .service-list-item.active .service-body {
    width: calc(100% - 2.0833cqi);
    /* 30/1440 gap to the image */
  }

  .service-list-item.active .service-body-inner {
    width: 100%;
  }

  /* Heading -> subtitle gap 18px at 1440 (was 9). The open area keeps the
     same total height: its design min-height drops by the same 9px (there is
     30-73px free space under the button), so rows are as tall as before. */
  .service-list-item.active .service-content-col .title {
    margin-bottom: 1.25cqi;
  }

  /* The open area grows only if its content needs more room (narrow tablet
     widths), never below the design height - so the button is never cut. */
  .service-list-item.active .service-body,
  .service-list-item.active .service-body-inner {
    height: auto;
    min-height: 23.4333cqi;
    /* 24.0583cqi design height - the 0.625cqi added above the subtitle */
  }

  .service-desc {
    max-width: none;
  }

  .service-features li {
    align-items: flex-start;
    line-height: 1.5277cqi;
    /* = .plus-icon height */
  }
}

/* Services list - mobile: a "+" line that wraps gets proper line spacing
   (23px; was 14px, so its 2 lines squeezed together and spilled out of the
   row) and its row grows; one-line rows keep their 31.7px height and spot.
   A 4+ line subtitle pushes the list down (keeps the 30px gap) instead of
   running into it. Never wider than the screen (Galaxy Fold, 280px). */
@media (max-width: 767px) {
  .service-desc {
    height: auto !important;
    min-height: 63px !important;
  }

  .service-features {
    height: auto !important;
    min-height: 105px !important;
    max-width: 100% !important;
  }

  .service-features li {
    height: auto !important;
    min-height: 31.6667px !important;
    /* the 105px list fitted 3 x 35px rows + 2 x 5px gaps = 31.67px each */
    line-height: 23px !important;
    max-width: 100% !important;
  }
}

/* Services list - mobile: the "Read More" / "Discover More" pill grows with
   its label so the text stays on one line (never narrower than the 158px
   design width, so a short label looks exactly as before). */
@media (max-width: 767px) {
  .btn-read-more-pill {
    width: fit-content !important;
    min-width: 158px !important;
    box-sizing: border-box !important;
    padding: 10px 20px 0 50px !important;
  }

  .btn-read-more-pill .btn-text {
    position: static !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}

/* Mona Sans for description texts - font family only (size, weight, spacing unchanged), web + mobile:
   Services accordion desc + "+" list, Steps subtitle + 01/02/03 card descs,
   Why SOLD about text, founder bio, What Our Clients Say text. */
body .service-desc,
body .service-features li,
body .ws-about-text,
body .ws-about-text-mobile,
body .ws-about-text-mobile p,
body .ws-founder-bio,
body .ws-testimonial-text,
body :is(#steps-section, .steps-section) :is(.sf-subtitle, .sf-subtitle-mobile, .sf-subtitle-mobile .orange-text, .step-desc, .step-desc-2, .step-desc-3) {
  font-family: 'Mona Sans', sans-serif !important;
}

/* Steps (The SOLD Success Formula) - web/tablet: Services + Client Success cards 02 and 03 use
   exactly step 01's card layout (same fix as Why SOLD in why-sold.css, 2026-10-01). Card size,
   position, timeline and the swing animation are unchanged. Mobile has its own rules. */
@media (min-width: 768px) {
  :is(.services-page-body, .client-success-page-body) .step-card-2,
  :is(.services-page-body, .client-success-page-body) .step-card-3 {
    padding: 2.3264cqi 3.4722cqi 3.2292cqi 3.4722cqi;
    /* 33.5 / 50 / 46.5 / 50 at 1440 = step 01 */
  }

  :is(.services-page-body, .client-success-page-body) .step-card-inner-2,
  :is(.services-page-body, .client-success-page-body) .step-card-inner-3 {
    width: 27.9861cqi;
    /* 403/1440 = step 01 */
    gap: 2.5694cqi;
    /* 37/1440 = step 01 */
  }

  :is(.services-page-body, .client-success-page-body) .step-desc-2,
  :is(.services-page-body, .client-success-page-body) .step-desc-3 {
    width: 27.9861cqi;
    /* 403/1440 = step 01 */
  }
}

/* =============================================================
   TABLET UPRIGHT (768-991px) - WEB CONTENT, NOT MOBILE (2026-10-09)
   Tablets show the web layout in both positions. The styling switches to
   web at 768px, but Bootstrap's d-lg-* classes only switch the CONTENT at
   992px, so 768-991px (iPad mini / Air upright) got the MOBILE copy of
   ~50 elements inside the web layout (About text, Our Team, Success
   Formula subtitle, FAQ, footer address, ...) - overlaps and giant mobile
   blocks. Make d-lg-* behave as they do from 992px, so these tablets get
   the same content as the web. The header burger is CSS-driven (no d-lg
   classes) and is unaffected. Phones (<768) and 992px+ are unchanged.
   ============================================================= */
@media (min-width: 768px) and (max-width: 991.98px) and (min-height: 501px) {
  .d-lg-none {
    display: none !important;
  }

  .d-lg-block {
    display: block !important;
  }

  .d-lg-flex {
    display: flex !important;
  }

  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

/* TABLET UPRIGHT - HERO (Why SOLD, Client Success, Insights, Services).
   100vh on an upright tablet stretched the hero photo (object-fit: fill)
   and left a big empty area. Use the web hero's landscape proportion
   (4:3, same as a tablet lying flat). Blog Details' hero is already
   proportional and has no .hero-section. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  section.hero-section {
    height: 75cqi !important;
    min-height: 0 !important;
  }
}

/* TABLET UPRIGHT - HERO BREADCRUMB: the box has the desktop's fixed width,
   so at the 12px tablet size "Why SOLD?" / "Client Success" wrapped onto
   two lines. Let it take its text's width on one line. */
@media (min-height: 501px) {
@container (min-width: 768px) and (max-width: 1023px) {
  :is(.ws-hero-breadcrumb, .client-success-hero-breadcrumb, .services-hero-breadcrumb, .insights-hero-breadcrumb) {
    width: auto !important;
    white-space: nowrap;
  }

  :is(.ws-hero-breadcrumb, .client-success-hero-breadcrumb, .services-hero-breadcrumb, .insights-hero-breadcrumb) > * {
    width: auto !important;
    flex-shrink: 0;
    white-space: nowrap;
  }
}
}

/* TABLET (768-1023px) - pre-footer CTA button ("SPEAK TO AN EXPERT"): the
   button scales down to ~31px tall but the yellow circle keeps its 42x45
   desktop proportion, leaving ~3px above/below - it looked like it touched
   the button's edges. Round circle, an even 5px gap all round. */
@media (min-height: 501px) {
@container (min-width: 768px) and (max-width: 1023px) {
  .btn-pre-footer {
    padding-left: 5px;
  }

  .btn-pre-footer .icon-circle {
    width: calc(4.0278cqi - 10px);
    height: calc(4.0278cqi - 10px);
    border-radius: 50%;
  }
}
}

/* TABLET UPRIGHT (768-991px) - MENU DRAWER (2026-10-09). The header shows the round menu button
   here (see TABLET PORTRAIT - HEADER), but the drawer it opens was only styled for phones (<768px)
   and stayed display:none, so tapping the button did nothing on iPad mini / Air upright. Same
   drawer as phones (px-based, full screen). Phones and 992px+ unchanged. */
@media (min-width: 768px) and (max-width: 991.98px) and (min-height: 501px) {
  .mobile-offcanvas-drawer { position: fixed !important; top: 0px !important; right: -100% !important; width: 100vw !important; max-width: 100vw !important; height: 100vh !important; background: rgb(255, 255, 255) !important; z-index: 99999 !important; display: flex !important; flex-direction: column !important; padding: 0px !important; box-sizing: border-box !important; overflow: hidden !important; transition: right 300ms ease-out !important; }
  .mobile-offcanvas-drawer.open { right: 0px !important; }
  .offcanvas-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 50px 24px 0px 25px !important; width: auto !important; height: 42px !important; padding: 0px !important; }
  .offcanvas-logo { width: 118px !important; height: 42px !important; object-fit: contain !important; }
  .offcanvas-nav { display: flex !important; flex-direction: column !important; gap: 0px !important; margin: 81px 22px 24px 23px !important; width: auto !important; flex: 1 1 auto !important; min-height: 0px !important; overflow-y: auto !important; }
  .offcanvas-link { width: 100% !important; height: 81px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; padding: 10px 10px 10px 0px !important; box-sizing: border-box !important; border-bottom: 1px solid rgb(231, 230, 230) !important; color: rgb(167, 162, 162) !important; text-decoration: none !important; font-family: "Mona Sans", var(--font-heading) !important; font-size: 20px !important; font-weight: 500 !important; line-height: 38px !important; }
  .offcanvas-link.active { color: rgb(27, 56, 52) !important; }
  .offcanvas-link:hover { color: rgb(0, 0, 0) !important; }
  .offcanvas-link:last-child { border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; }
  .offcanvas-item-dropdown { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; width: 100% !important; padding: 10px 10px 10px 0px !important; box-sizing: border-box !important; border-bottom: 1px solid rgb(231, 230, 230) !important; }
  .offcanvas-item-dropdown .offcanvas-link { width: auto !important; height: auto !important; flex: 1 1 auto !important; padding: 0px !important; border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; }
  .offcanvas-dropdown-toggle { background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; padding: 8px !important; margin: 0px !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; }
  .offcanvas-dropdown-arrow { flex-shrink: 0 !important; transition: transform 0.25s !important; }
  .offcanvas-item-dropdown.open .offcanvas-dropdown-arrow { transform: rotate(180deg) !important; }
  .offcanvas-dropdown-menu { flex-basis: 100% !important; width: 100% !important; max-height: 0px !important; overflow: hidden !important; transition: max-height 0.35s !important; display: flex !important; flex-direction: column !important; }
  .offcanvas-item-dropdown.open .offcanvas-dropdown-menu { max-height: 1000px !important; }
  .offcanvas-dropdown-item { display: block !important; padding: 12px 0px 12px 8px !important; color: rgb(167, 162, 162) !important; text-decoration: none !important; font-family: "Mona Sans", var(--font-heading) !important; font-size: 15px !important; font-weight: 500 !important; border-top: 1px solid rgb(231, 230, 230) !important; }
  .offcanvas-dropdown-item:first-child { border-top-width: medium !important; border-top-style: none !important; border-top-color: currentcolor !important; }
  .offcanvas-dropdown-item:hover, .offcanvas-dropdown-item:active { color: rgb(27, 56, 52) !important; }
  .offcanvas-footer { display: none !important; }
  .close-menu-btn { width: 24px !important; height: 24px !important; margin: 9px 0px !important; background: transparent !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; color: rgb(0, 0, 0) !important; font-size: 32px !important; font-weight: 300 !important; cursor: pointer !important; line-height: 24px !important; padding: 0px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
}