/* 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;
}

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: 23.636%;
  /* 195/825 proportion relative to exact hero height */
  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: 72.484%;
  /* 598/825 proportion mapped vertically to perfectly fit within any screen aspect ratio */
  left: 0;
  /* 0px - full width anchor frame */
  width: 100cqi;
  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: 58.3138cqi;
  /* Offset shifted manually right to account for No. 1 swap */
  height: 5.4166cqi;
  /* 78px */
  margin: 0;
  padding: 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: left;
}

.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: 21.3194cqi;
  /* 307px direct Figma X coordinate */
  height: 5.4166cqi;
  /* 78px */
  margin: 0;
  padding: 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: left;
}

/* ============================
   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 - on web only,
   starts above the "Design" heading top instead of flush with it (or
   below it); bottom edge kept in place, so only the top moved up. */
.what-we-do-content::before {
  content: "";
  position: absolute;
  top: 2.2917cqi;
  /* 33px (was 63px originally) */
  left: 8.1250cqi;
  /* 117px */
  width: 0.0694cqi;
  /* 1px */
  height: 37.3610cqi;
  /* 538px (was 508px originally, lengthened by the same 30px the top moved up) */
  background: linear-gradient(180deg, #C8C9C9 0%, #EAEBEB 95.47%);
  z-index: 1;
}

/* Vertical line between left container and right container - removed on
   web (desktop/tablet) per request. Mobile already hides this via its own
   max-width:767px override further below, which is untouched. */
.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;
  display: none;
}

@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: 7.8472cqi;
  /* 113px - matches the logo width exactly (was 86px, narrower than the logo) */
  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;
  margin-left: -1.0417cqi;
  /* -15px - nudge the logo a little further left */
  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: contain !important;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

/* Same logo (logoweb.png, 113x98) and size for Design, Launch and Sell */
.feature-icon-cell .placeholder-svg-icon {
  width: 7.8472cqi;
  /* 113px */
  height: 6.8055cqi;
  /* 98px */
}

.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;
}

/* Position/size lives on the base rule so it applies to EVERY client logo
   uniformly, including any new one added later - not just the three brands
   below. Those three used to duplicate these exact same numbers, gated
   behind a filename match in testimonials.php, so a logo whose filename
   didn't contain "ellington"/"banyan"/"regus" got no sizing at all and
   rendered unsized in the top-left corner. */
.client-logo {
  object-fit: contain !important;
  object-position: left center;
  position: absolute;
  z-index: 0;
  /* Behind stars and quote box */
  width: 39.419%;
  /* Client-requested +15px, width only, left/top ("starting") untouched:
     175/482=36.307% (Figma) + 15px -> 190/482=39.419%. Height stays at the
     original Figma value below - only width changed. */
  height: 23.032%;
  /* 79/343 */
  top: 5.831%;
  /* 20/343 */
  left: 7.054%;
  /* 34/482 */
}

/* Kept as harmless no-ops in case any markup still references these classes -
   same values as the base rule above, so they change nothing. */
.logo-ellington,
.logo-banyan,
.logo-regus {
  margin-top: 0;
}

/* 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;
  object-position: center top;
  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 SECTION (Web Only)
   ============================ */
.faq-section {
  background: var(--color-bg-light);
  padding: 4.5139cqi 8.0208cqi 4.5139cqi;
  /* top/bottom: 65px, left/right: 115.5px. Top was 27px (1.875cqi) when this
     section sat right after the hero-area content; now that Pre-footer
     comes right before it, top is matched to the section's own bottom gap -
     the standard spacing already used site-wide between stacked sections -
     so "Have Questions ?" isn't crowded against the pre-footer above it. */
}

.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 rgba(162, 162, 162, 0.32);
  /* 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;
}

/* ============================
   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.
   ============================ */
.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); see style-v2.css's identical
     fix for the full reasoning (this file carries a byte-for-byte copy of
     the same pre-2026-09-23 rule, just for Home specifically). */
}

.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 */
  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 wrapping cap only */
}

.btn-pre-footer {
  flex-shrink: 0;
  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.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.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;
    transform: none !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: 28px !important;
    bottom: 555px !important;
    right: 313px !important;
    width: 57px !important;
    height: 49px !important;
  }

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

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

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

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

  .feature-grid-item:nth-child(3) .placeholder-svg-icon {
    width: 57px !important;
    height: 49px !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.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.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;
    transform: none !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: 28px !important;
    bottom: 555px !important;
    right: 313px !important;
    width: 57px !important;
    height: 49px !important;
  }

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

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

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

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

  .feature-grid-item:nth-child(3) .placeholder-svg-icon {
    width: 57px !important;
    height: 49px !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.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.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;
    transform: none !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;
  }

  .who-we-work-container {
    width: 369px !important;
    height: 1219px !important;
    /* 199px top + 4*240px cards + 3*12px gaps + 47px 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: 169px !important;
    display: block !important;
    margin: 0 0 30px 0 !important;
    /* resets inherited margin-left from desktop */
  }

  .who-title-wrapper {
    position: absolute !important;
    width: 348px !important;
    height: 169px !important;
    left: 1px !important;
    top: 0 !important;
    display: block !important;
  }

  .who-title {
    position: absolute !important;
    width: 331px !important;
    height: 169px !important;
    left: 17px !important;
    /* original requested gap */
    top: 0 !important;
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 700 !important;
    font-size: 50px !important;
    line-height: 56px !important;
    color: #263238 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .who-title-logo {
    position: absolute !important;
    width: 145px !important;
    height: 48px !important;
    top: 60px !important;
    left: 13px !important;
    object-fit: contain !important;
  }

  .logo-spacer {
    display: inline-block !important;
    width: 139px !important;
    /* 126px logo + gap */
  }

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

  .with-text {
    display: block !important;
  }

  .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: 199px !important;
    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;
    transform: none !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;
    transform: none !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 {
    /* Centered with auto margins on a block-level flex container, not the
       old left:50% + translateX(-50%) trick - that positions itself against
       a percentage of the parent while transforming by a percentage of its
       OWN (container-query-scaled) width, and any rounding mismatch between
       the two pushes the element off-center. At narrow phone widths (~320px)
       it drifted far enough to push the left arrow button off-screen
       entirely. margin:auto has no such rounding trap. */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: min(331px, 100%) !important;
    /* Shrinks to fit on phones narrower than ~331px+padding instead of
       overflowing or (via the desktop rule's uncontested max-width:75.1166cqi
       bleeding through) getting squeezed smaller than its own content, which
       used to push the left arrow button off-screen entirely. container-type
       below lets every child (buttons, dots, lines) scale down with it
       proportionally, via cqi, so nothing overflows or gets clipped at any
       width - centered with auto margins rather than the old
       left:50%+translateX(-50%) trick, which had its own rounding-mismatch
       version of this same bug. */
    container-type: inline-size;
    height: 41px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.511cqi !important;
    /* 5/331 */
    align-items: center !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .testimonials-controls .carousel-btn {
    width: 10.876cqi !important;
    /* 36/331 */
    min-width: 24px !important;
    height: 10.575cqi !important;
    /* 35/331 */
    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: 6.344cqi !important;
    /* 21/331 */
    height: 6.344cqi !important;
    min-width: 14px !important;
    min-height: 14px !important;
    stroke: #858585 !important;
    stroke-width: 1.5px !important;
  }

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

  .carousel-dots-center {
    display: flex !important;
    gap: 0.604cqi !important;
    /* 2/331 */
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .carousel-dots-center::before {
    content: "" !important;
    width: 22.253cqi !important;
    /* 73.64/331 */
    min-width: 12px !important;
    height: 1px !important;
    background: #EEEDED !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .carousel-dots-center::after {
    content: "" !important;
    width: 23.072cqi !important;
    /* 76.36/331 */
    min-width: 12px !important;
    height: 1px !important;
    background: #EEEDED !important;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 1 !important;
  }

  .carousel-dots-center .dot {
    width: 4.834cqi !important;
    /* 16/331 */
    height: 5.019cqi !important;
    /* 16.61/331 */
    min-width: 9px !important;
    min-height: 9px !important;
    border: 1.5px solid #CCCCCC !important;
    border-radius: 50% !important;
    background: transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !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.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: 71px !important;
    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;
    /* flex-wrap:nowrap (the default) only keeps the "Our Offices" span and
       the rest of the text on the same flex row - it does not stop the text
       *inside* each of those from line-wrapping on its own, which is what
       was actually happening. white-space:nowrap stops that, and since
       .why-sold-container itself is a fixed 341px box (not vw/cqi-scaled)
       that just centers via margin:auto, this single mobile media query
       already covers every phone width identically - no extra breakpoint
       logic needed. */
    white-space: nowrap !important;
  }

  .offices-text span.text-primary-brand {
    font-family: "Mona Sans", var(--font-heading) !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    /* larger than the rest of the line (14px) so "Our Offices" stands out more */
    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; see style-v2.css's identical fix for the
       full reasoning. */
  }

  .pre-footer-inner {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 32px !important;
    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;
  }

  /* Pre-footer button: matches client-success.html's mobile button design
     (used as the reference for a consistent button UI across all pages). */
  .btn-pre-footer {
    display: flex !important;
    align-items: center !important;
    gap: 9.47px !important;
    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 .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;
  }

  .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;
  }

  /* ============================
     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;
    transform: none !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;
    transform: none !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;
    transform: none !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, wider than 320-375px phones, so the address was
       clipped on the right on the home page (style-v2.css, used by every
       other page, already had this fix). Same values as there. */
    height: auto !important;
    white-space: nowrap !important;
    /* Keeps the admin/theme line breaks as the only breaks, so every phone
       shows the same 4 lines; the font scales down instead of re-wrapping. */
    font-size: clamp(13px, 4vw, 16px) !important;
    line-height: 1.5625 !important;
    /* 25/16 - unitless so it scales with the clamped size (as style-v2.css) */
    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 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: 100px 20px 50px 20px;
    height: auto;
  }

  .services-hero-title-container {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
  }

  .services-hero-title-top {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    font-size: 40px;
    line-height: 1.2;
  }

  .services-hero-title-bottom {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    flex-wrap: wrap;
  }

  .services-hero-title-bottom .orange-italic,
  .services-hero-title-bottom .white-bold {
    font-size: 42px;
    line-height: 1.2;
  }

  .services-hero-desc {
    position: relative;
    bottom: auto;
    right: auto;
    width: 100%;
    height: auto;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 30px;
  }

  .services-hero-btn {
    position: relative;
    bottom: auto;
    right: auto;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 28px 10px 10px;
    gap: 12px;
    border-radius: 29px;
    margin-bottom: 40px;
  }

  .services-hero-btn .btn-text-custom {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    font-size: 18px;
    line-height: 1.2;
  }

  .services-hero-btn .icon-circle {
    position: relative;
    top: auto;
    left: auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .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 --- */
  .steps-section {
    margin-top: 40px;
  }

  .steps-container {
    position: relative;
    width: 100%;
    height: auto;
    left: 0;
    padding: 0 20px;
  }

  .steps-title-wrapper {
    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 {
    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-card-1,
  .step-card-2,
  .step-card-3 {
    position: relative;
    top: auto !important;
    left: auto !important;
    width: 100%;
    height: auto;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transform: none !important;
    opacity: 1 !important;
  }

  .step-card-inner,
  .step-card-inner-2,
  .step-card-inner-3 {
    width: 100%;
    gap: 16px;
  }

  .step-card-title-wrapper {
    height: auto;
    gap: 8px;
  }

  .step-number,
  .step-title {
    font-size: 22px;
  }

  .step-desc,
  .step-desc-2,
  .step-desc-3 {
    width: 100%;
    font-size: 16px;
    line-height: 24px;
  }

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

  .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;
}

.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', sanZ-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: 22.9cqi;
    /* 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: 99 !important;
  height: 0;
}

/* --- 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;
  }

  .services-who-section {
    background: #FFFFFF !important;
    padding-top: 6.3194cqi !important;
    padding-bottom: 7.6388cqi !important;
    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;
  }
}

/* =============================================================
   TABLET (768-1199px) - HOME
   The layout here is the desktop one (the @container breakpoint above
   switches at 767px), which is correct: it is built on cqi units, so it
   scales proportionally and needs no separate tablet layout.
   The one thing that does NOT survive the scale-down is type: at 768px
   the design lands at ~53% of its 1440px size, which pushes body copy to
   9.6px. These max() floors keep the cqi scaling wherever it is already
   comfortable and stop it shrinking past a readable size below that.
   Each line-height is floored in the same proportion as its font-size, so
   the vertical rhythm is preserved rather than squashed.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  /* body copy: 1.25cqi -> floored at 13px (crossover ~1040px) */
  .feature-content-cell p {
    font-size: max(13px, 1.25cqi);
    line-height: max(15.9px, 1.5277cqi);
  }

  /* feature headings: 1.3888cqi -> floored at 14px */
  .feature-content-cell h3 {
    font-size: max(14px, 1.3888cqi);
    line-height: max(21px, 2.0833cqi);
  }

  /* hero intro paragraph: 1.5277cqi -> floored at 13px */
  .hero-text-block p {
    font-size: max(13px, 1.5277cqi);
    line-height: max(17.1px, 2.0138cqi);
  }

  /* services accordion copy: 1.3888cqi -> floored at 13px */
  .service-desc {
    font-size: max(13px, 1.3888cqi);
    line-height: max(13.7px, 1.4583cqi);
  }

  /* 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);
  }

  /* 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 - two-deep to match the base rules' specificity */
  .services-hero-breadcrumb .breadcrumb-home,
  .services-hero-breadcrumb .current,
  .services-hero-breadcrumb a,
  .breadcrumb-services-wrapper .current {
    font-size: max(12px, 1.25cqi);
  }

  /* services accordion: number + description (1.3888cqi) */
  .service-list-item .num,
  .service-desc {
    font-size: max(12px, 1.3888cqi);
  }

  /* testimonial quotes (1.1111cqi) - 8.5px at 768 unfloored */
  .testi-quote,
  .testi-name,
  .testi-role {
    font-size: max(12px, 1.1111cqi);
  }

  /* header nav: only shown from 992px up (below that the burger takes over),
     where there is room for a 12px floor without hitting BOOK A CALL */
  .nav-link,
  .btn-book-call {
    font-size: max(12px, 1.1111cqi);
  }

  /* insights cards: small excerpt (0.9722cqi) - 7.5px at 768 unfloored */
  .insights-small-excerpt,
  .insights-large-excerpt,
  .insights-small-date,
  .insights-large-date {
    font-size: max(12px, 0.9722cqi);
  }

  /* FAQ questions: 1.4583cqi -> floored at 14px */
  .faq-question-text {
    font-size: max(14px, 1.4583cqi);
    line-height: max(13.4px, 1.3889cqi);
  }
}


/* =============================================================
   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;
  }
}

/* ============================
   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;
  }
}
/* =============================================================
   Home "What we do" image - mobile (Figma iPhone frame 1363:570, node
   1363:671). Keeps Figma's exact 331x355 proportion at every phone width
   instead of a fixed 355px height with a width that changed per phone,
   which cropped the same square photo differently on every device (at
   320px it cut the "Campaigns That Reach / The Right Buyers" headline).
   - left 30 / right 32 (Figma x=30, w=331 in a 393 frame)
   - top: 74px below the last feature line (Figma: text bottom 1913 ->
     image top 1987). Feature text ends at a fixed 954px here.
   - section ends at the image bottom, so the existing 50px gap to "Who do
     SOLD work with" is kept (Figma 2342 -> 2392 = 50).
   At 393px this renders exactly 331x355, and object-fit:cover in a box of
   the same proportion shows the photo framed exactly as in Figma.
   Declared last so it overrides the earlier mobile blocks (1033/1106px).
   ============================================================= */
@container (max-width: 767px) {
  .what-we-do-section {
    height: calc(1028px + (100cqi - 62px) * 355 / 331) !important;
  }

  .features-right {
    top: 1028px !important;
    left: 30px !important;
    right: auto !important;
    bottom: auto !important;
    width: calc(100% - 62px) !important;
    height: auto !important;
    aspect-ratio: 331 / 355;
  }
}

/* =============================================================
   Home Insights cards - web + mobile (Figma 1363:909 large, 3620:1077 /
   3620:1096 small; mobile 1363:926). Figma shows each card's title in at
   most 2 lines and the excerpt in 2 lines ending "...". Real post titles
   and excerpts are longer (3-4 line titles, 4-5 line excerpts), and the
   text boxes are fixed-position, so on mobile the title ran into the
   excerpt and the excerpt ran past the bottom of the card; on desktop the
   small cards' excerpt also overflowed the card. Clamp both to 2 lines
   with an ellipsis - positions, sizes and fonts stay as they were (they
   already match Figma). Cards still link to the post's details page.
   ============================================================= */
.insights-small-title,
.insights-small-excerpt,
.insights-large-title,
.insights-large-excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2;
  overflow: hidden !important;
  text-overflow: ellipsis;
  /* The mobile rules give these fixed heights (e.g. the large card excerpt
     58px = almost 3 lines); with a fixed height the browser draws the
     ellipsis but still shows the next line. Auto height lets the clamp
     actually end the box after line 2. Top positions are unchanged. */
  height: auto !important;
}

@media (min-width: 768px) {
  /* Desktop large card text is left-anchored with no right edge, so give
     it one (same 28.29px inset as the left) for the 2-line clamp to wrap
     against instead of the card's edge. */
  .insights-large-title,
  .insights-large-excerpt {
    right: 1.9645cqi;
  }
}

/* Home "What we do" lead - web + mobile (Figma 3620:1154): the orange
   highlight "delivering more sales, faster" is Mona Sans SemiBold (600),
   with "faster" SemiBold Italic; the rest of the sentence stays Medium
   (500). The highlight is a <span> inside the ACF lead_text, so this
   applies to whatever wording the editor puts in that span. */
.what-we-do-lead span,
.what-we-do-lead span i,
.what-we-do-lead span em {
  font-weight: 600 !important;
}

/* Testimonials (768px+): quote text wraps around the double-quote icon instead of running under it.
   The icon is absolutely positioned in the box's bottom-right (Figma), and long quotes used to reach it
   (the old quote.png also had an opaque #263238 square, so it hid the letters - it is transparent now).
   A right float the full height of the text column, with shape-outside cut down to the bottom-right
   corner, pushes only the lines that reach the icon; lines above keep the full width.
   Box geometry at 1440 (all cqi-scaled): icon left edge 100px (6.944cqi) from the box's right edge,
   icon top 59.2px (4.111cqi) above its bottom. Bottom padding reduced to 0.5cqi so the text column
   (and the float) reach the icon; text still starts at the same top position. Mobile unchanged. */
@media (min-width: 768px) {
  .testi-quote-box {
    padding-bottom: 0.5cqi;
  }

  .testi-quote {
    align-self: stretch;
    position: relative;
    z-index: 1;
  }

  .testi-quote::before {
    content: '';
    float: right;
    height: 100%;
    /* 6.944 - 1.8055 side padding + 0.5 gap */
    width: 5.64cqi;
    /* 4.111 - 0.5 bottom padding + 0.1 gap (more pushed line 1 too) */
    shape-outside: inset(calc(100% - 3.71cqi) 0 0 0);
  }
}

/* Tablet (768-1023): the box is small here and the quote font is floored at 12px (see the 768+ font
   floors), so the corner wrap above still ran up to 13px past the box on 5-line quotes. Instead the
   box grows downward (min = the Figma height) into the empty strip below it in the card, with enough
   bottom padding that the icon (pinned bottom-right) sits under the last line. Longest live quote at
   768: box ends 3px inside the card. */
@media (min-width: 768px) and (max-width: 1023px) {
  .testi-quote-box {
    height: auto;
    /* room under the last line for the icon */
    padding-bottom: 4.6cqi;
  }

  .testi-quote {
    align-self: auto;
    padding-right: 0;
    /* the 12px font floor kept the 1.3888cqi line-height (10.7px at 768), so lines overlapped */
    line-height: 1.35;
  }

  .testi-quote::before {
    display: none;
  }

  /* Card +3.68cqi taller (~28px at 768) so the grown box fits (card has overflow:hidden). Logo, stars
     and box keep their original spots: their % tops (of the old 23.8194cqi card) converted to cqi. */
  .testimonial-card {
    height: 27.5cqi;
  }

  .client-logo {
    /* inline style sets top:5.8% */
    top: 1.3815cqi !important;
  }

  .testi-stars {
    top: 7.8252cqi;
  }

  .testi-quote-box {
    top: 11.0027cqi;
    min-height: 8.1136cqi;
  }
}

/* Home "Insights" label line (mobile) - Figma 1363:886: 1.88 x 26.36 orange bar, 8px gap, "Insights" 20/30.
   The bar was set but invisible: the wrap is fixed at 86.88px and bar + 11px gap + 77px text didn't fit, so flex
   shrank the ::before to 0px wide. Now it can't shrink, and the gap is Figma's 8 (1.88 + 8 + 77 = 86.88). */
@media (max-width: 767px) {
  .insights-label-wrap {
    gap: 8px !important;
  }

  .insights-label-wrap::before {
    flex-shrink: 0 !important;
    width: 1.88px !important;
    height: 26.36px !important;
    background: #FFA726 !important;
  }
}

/* ==========================================================================
   SEO heading structure - Homepage (client sheet, 2026-09-29): tags changed, design unchanged.
   These elements became h2/h3 (were span/div). Headings get Bootstrap/global defaults (margin-bottom .5rem,
   heading font, weight 500, line-height 1.2) that the old span/div never had - put back what they had.
   :where() keeps this at tag-level priority, so each element's own class rules still win exactly as before.
   ========================================================================== */
h2:where(.what-we-do-label, .why-sold-label, .insights-label, .faq-mobile-label),
h3:where(.title, .faq-mobile-question-text) {
  display: inline;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

h2:where(.services-text) {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* 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;
}

/* =============================================================
   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;
  }
}

/* =============================================================
   HOME - TABLET UPRIGHT (2026-10-09). Tablets show the web layout in both
   positions; these fixes only touch what broke on narrow tablets
   (768-1023px - every iPad upright except the 12.9" Pro). Desktop,
   tablets lying flat (1024px+) and phones (<768px) are unchanged.
   ============================================================= */

/* Hero: 100vh on an upright tablet made the photo (object-fit: fill)
   stretch tall and left a big empty area. Use the web hero's own
   landscape proportion (4:3, same as a tablet lying flat). */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero-section {
    height: 75cqi;
    min-height: 0;
  }
}

@media (min-height: 501px) {
@container (min-width: 768px) and (max-width: 1023px) {

  /* Hero title: the mobile-only line break before "Agency" (class
     d-lg-none, hidden from 992px) also showed at 768-991px, pushing the
     title onto 3 lines. Keep the web's 2 lines. */
  .hero-title-bottom br.d-lg-none {
    display: none;
  }

  /* Insights small cards: the date + excerpt are floored at 12px here but
     the text box kept its desktop height, so the title was cut off under
     the excerpt. Start the text just under the image (the desktop box sat
     a large gap lower) and let the box take its content's height; title
     floored at 12px too so it isn't smaller than the excerpt. */
  .insights-small-content {
    top: 13.8889cqi;
    height: auto;
  }

  .insights-small-date {
    margin-bottom: 8px;
  }

  .insights-small-title {
    font-size: max(12px, 1.25cqi);
  }

  /* Footer: at 12px the address wraps to 3 lines, but its box kept the
     desktop 2-line height, so the last line ran under the phone number. */
  .footer-address-text {
    height: auto;
  }
}
}

/* 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; }
}