/* =========================================================================
   Client Success Page Styles
   Using VW (Viewport Width) for fluid 1:1 scaling from 1440px Figma design
   ========================================================================= */

/* For Desktop (Web screens) - Fluid scaling based on 1440px */
@media (min-width: 768px) {

  .client-success-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    background: #FFFFFF;
    overflow: hidden;
  }

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

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

  .client-success-hero-title {
    position: absolute;
    top: 16.5972vw;
    /* 239/1440 */
    left: 4.4444vw;
    /* 64/1440 */
    width: 54.5139vw;
    /* 785/1440 */
    height: 8.1944vw;
    /* 118/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.6528vw;
    /* 67/1440 */
    line-height: 4.7917vw;
    /* 69/1440 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

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

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

  .client-success-hero-btn .btn-text-custom {
    position: absolute;
    top: 0.8181vw;
    left: 4.5694vw;
    width: 16.9444vw;
    height: 2.0833vw;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.7361vw;
    /* 25/1440 */
    line-height: 2.0833vw;
    letter-spacing: 0.01em;
    color: #1B3834;
    margin: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

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

  /* Breadcrumb (Bottom Left) */
  .client-success-hero-breadcrumb {
    position: absolute;
    bottom: 4.1667vw;
    /* Anchored to bottom */
    left: 7.2222vw;
    /* 104/1440 */
    width: 16.3889vw;
    height: 2.0139vw;
    display: flex;
    align-items: center;
    gap: 0.5556vw;
  }

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

  .client-success-hero-breadcrumb .breadcrumb-icon {
    width: 1.5972vw;
    height: 1.0417vw;
    object-fit: cover !important;
  }

  .client-success-hero-breadcrumb .breadcrumb-services-wrapper {
    width: 9.8611vw;
    height: 2.0139vw;
    display: flex;
    align-items: flex-end;
  }

  .client-success-hero-breadcrumb .current {
    width: auto;
    height: 2.0139vw;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 2.0139vw;
    letter-spacing: 0.01em;
    color: #FFFFFF;
    display: flex;
    align-items: flex-end;
  }

  /* =========================================================================
     Intro Section
     ========================================================================= */
  .cs-intro-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 7.6389vw;
    /* 935px absolute top - 825px hero height = 110px margin-top */
    margin-bottom: 7.6389vw;
    /* Symmetrical margin for spacing */
  }

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

  .cs-intro-label {
    height: 2.0833vw;
    /* 30/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833vw;
    /* 30/1440 */
    line-height: 2.0833vw;
    /* 30/1440 */
    letter-spacing: 0;
    color: #FFA726;
    display: flex;
    align-items: flex-start;
    /* vertical-align: middle */
    gap: 0.7639vw;
    /* 11/1440 gap between line and text */
  }

  .cs-intro-label::before {
    content: '';
    display: block;
    width: 0.2778vw;
    /* 4/1440 */
    height: 100%;
    background: #FFA726;
  }

  .cs-intro-text {
    width: 68.2639vw;
    /* 983/1440 */
    height: 8.75vw;
    /* 126/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 2.2222vw;
    /* 32/1440 */
    line-height: 2.9167vw;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: -0.3472vw;
  }

  /* =========================================================================
     Cards Section
     ========================================================================= */
  .cs-cards-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Figma parent: alignItems center */
    margin-top: 8.0556vw;
    /* 116px gap to the above section */
    gap: 7.3611vw;
    /* 106/1440 gap between boxes */
  }

  /* --- White card wrapper (default) --- */
  .cs-card-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    /* Center the hug-width card */
    box-sizing: border-box;
  }

  /* --- Grey card wrapper --- */
  .cs-card-wrapper.bg-grey {
    background: #E9EAEB;
    position: relative;
    height: 37.6389vw;
    /* 542/1440 fixed height */
  }

  /* Grey card inner content positioned absolutely inside the grey wrapper */
  .cs-card-wrapper.bg-grey .cs-card {
    position: absolute;
  }

  /* Default grey card content position: x:126, y:113 */
  .cs-card-2 .cs-card {
    left: 8.75vw;
    top: 7.8472vw;
  }

  /* 126/1440, 113/1440 */
  .cs-card-4 .cs-card {
    left: 8.75vw;
    top: 8.0903vw;
  }

  /* 126/1440, 116.5/1440 */
  .cs-card-6 .cs-card {
    left: 8.75vw;
    top: 7.8125vw;
  }

  /* 126/1440, 112.5/1440 */
  .cs-card-8 .cs-card {
    left: 8.6806vw;
    top: 7.0139vw;
  }

  /* 125/1440, 101/1440 */
  .cs-card-10 .cs-card {
    left: 8.0903vw;
    top: 7.0139vw;
  }

  /* 116.5/1440, 101/1440 */

  /* --- Card row (inner flex container) --- */
  .cs-card {
    display: flex;
    gap: 8.8889vw;
    /* 128/1440 */
    align-items: flex-end;
    /* Default: flex-end */
  }

  /* Card 5: no alignItems (default stretch/start) */
  .cs-card-5 .cs-card {
    align-items: stretch;
  }

  /* Card 9: alignItems center */
  .cs-card-9 .cs-card {
    align-items: center;
  }

  /* --- Left column --- */
  .cs-card-left {
    width: 34.7917vw;
    /* 501/1440 */
    display: flex;
    flex-direction: column;
    gap: 3.6111vw;
    /* 52/1440 default */
  }

  /* Card 5: left column gap 115px, fixed height 358px */
  .cs-card-5 .cs-card-left {
    gap: 7.9861vw;
    /* 115/1440 */
    height: 24.8611vw;
    /* 358/1440 */
  }

  /* Card 9: left column gap 100px */
  .cs-card-9 .cs-card-left {
    gap: 6.9444vw;
    /* 100/1440 */
  }

  /* --- Logo dimensions per card (Figma exact) --- */
  /* contain, not cover: the box sizes below are the Figma dimensions of each
     client's own logo, so cover only looked right for artwork whose aspect
     ratio matched exactly. Any other upload (e.g. a PNG with different padding)
     got cropped. Mobile has always used contain for the same reason. */
  .cs-card-logo {
    object-fit: contain !important;
    object-position: left;
  }

  /* Card 1: Mered - 235×176 */
  .cs-card-1 .cs-card-logo {
    width: 16.3194vw;
    /* 235/1440 */
    height: 12.2222vw;
    /* 176/1440 */
  }

  /* Card 2: Ellington - 253×114 */
  .cs-card-2 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 7.9167vw;
    /* 114/1440 */
  }

  /* Card 3: Jubail Island - 253×157 */
  .cs-card-3 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 10.9028vw;
    /* 157/1440 */
  }

  /* Card 4: Knight Frank - 253×107 */
  .cs-card-4 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 7.4306vw;
    /* 107/1440 */
  }

  /* Card 5: Beyond - 310×79 */
  .cs-card-5 .cs-card-logo {
    width: 21.5278vw;
    /* 310/1440 */
    height: 5.4861vw;
    /* 79/1440 */
  }

  /* Card 6: Banyan Group - 253×115 */
  .cs-card-6 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 7.9861vw;
    /* 115/1440 */
  }

  /* Card 7: Regus - 253×114 */
  .cs-card-7 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 7.9167vw;
    /* 114/1440 */
  }

  /* Card 8: Masaraj - 253×131 */
  .cs-card-8 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 9.0972vw;
    /* 131/1440 */
  }

  /* Card 9: Better Homes - 306×54 */
  .cs-card-9 .cs-card-logo {
    width: 21.25vw;
    /* 306/1440 */
    height: 3.75vw;
    /* 54/1440 */
  }

  /* Card 10: Ayat - 253×94 */
  .cs-card-10 .cs-card-logo {
    width: 17.5694vw;
    /* 253/1440 */
    height: 6.5278vw;
    /* 94/1440 */
  }

  .cs-card-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 2.7083vw;
    /* 39/1440 */
    line-height: 3.4722vw;
    /* 50/1440 */
    letter-spacing: 0.01em;
    color: #263238;
    /* Reverted to Figma's real base colour - the earlier "make it all
       orange" pass was a misread of the design; Figma actually uses
       #263238 as the base with only a specific phrase per card in
       #FFA726 (see .cs-title-highlight below), never a uniform colour. */
    margin: 0;
  }

  .cs-card-title .cs-title-highlight {
    color: #FFA726;
  }

  /* Cards 2, 6 have title width 445px */
  .cs-card-2 .cs-card-title,
  .cs-card-6 .cs-card-title {
    width: 30.9028vw;
    /* 445/1440 */
  }

  /* Cards 7, 9 have title width 471px */
  .cs-card-7 .cs-card-title,
  .cs-card-9 .cs-card-title {
    width: 32.7083vw;
    /* 471/1440 */
  }

  /* --- Right column --- */
  .cs-card-right {
    width: 39.0278vw;
    /* 562/1440 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Figma: button aligns to the right side */
    gap: 7.0833vw;
    /* 102/1440 default */
  }

  /* Cards 7, 8, 9, 10: right column gap 78px */
  .cs-card-7 .cs-card-right,
  .cs-card-8 .cs-card-right,
  .cs-card-9 .cs-card-right,
  .cs-card-10 .cs-card-right {
    gap: 5.4167vw;
    /* 78/1440 */
  }

  /* Cards 7, 9: right column button uses full-width wrapper with flex-end alignment */
  .cs-card-7 .cs-card-right,
  .cs-card-9 .cs-card-right {
    align-items: flex-end;
  }

  /* Card 10: right column width 581px */
  .cs-card-10 .cs-card-right {
    width: 40.3472vw;
    /* 581/1440 */
  }

  /* Cards 6, 7, 8, 9: desc width 521px */
  .cs-card-6 .cs-card-desc,
  .cs-card-7 .cs-card-desc,
  .cs-card-8 .cs-card-desc,
  .cs-card-9 .cs-card-desc {
    width: 36.1806vw;
    /* 521/1440 */
  }

  /* Double-quotes accent, web only - COLUMN (icon above the description),
     per client correction after v1.0.72's row attempt. Client gave an exact
     alignment spec this round: the icon's RIGHT edge should land exactly on
     the description's LEFT edge (i.e. sit fully outside/left of the text
     column, not overlapping it), plus sit ~12px higher than the description.
     Mobile's own row layout (v1.0.69) and the description's own position
     are both untouched - web only. */
  .cs-card-quote-block {
    width: 100%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6944vw;
    /* 10px - unchanged; the icon's vertical nudge below uses a transform
       instead of touching this gap, specifically so the description's own
       position is not affected by the icon moving. */
  }

  .cs-card-quote-icon {
    width: 2.7083vw;
    /* 39px natural width */
    height: 1.8056vw;
    /* 26px natural height */
    display: block;
    margin-left: -2.7083vw;
    /* Exactly cancels the icon's own width (same vw value, negated), so its
       right edge always lands precisely on the description's left edge
       (x=0 of this flex column) at any viewport width - not a guessed px
       value like the last two rounds, which only lined up at one width. */
    transform: translateY(-12px);
    /* Moves the icon 12px higher without affecting layout flow - a margin
       change here would also push the description down (same flex column,
       gap-based spacing), which the client explicitly said to keep
       unchanged. transform is purely visual, so the description doesn't
       move. */
  }

  .cs-card-desc {
    width: 100%;
    align-self: stretch;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5972vw;
    /* 23/1440 */
    line-height: 2.0139vw;
    /* 29/1440 */
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
    text-align: left;
  }

  .cs-card-btn {
    position: relative;
    width: 21.3889vw;
    /* 308/1440 */
    height: 4.0972vw;
    /* 59/1440 */
    border-radius: 3.8194vw;
    /* 55/1440 */
    background: #263238;
    text-decoration: none;
    display: block;
  }

  .cs-card-btn-text {
    position: absolute;
    width: 15.9431vw;
    /* 229.58/1440 */
    height: 2.0833vw;
    /* 30/1440 */
    top: 1.0417vw;
    /* 15/1440 */
    left: 5.525vw;
    /* 79.56/1440 */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.7361vw;
    /* 25/1440 */
    line-height: 2.0833vw;
    /* 30/1440 */
    color: #FFFFFF;
    display: flex;
    align-items: center;
  }

  .cs-card-btn-icon {
    position: absolute;
    width: 3.3333vw;
    /* 48/1440 */
    height: 3.3333vw;
    /* 48/1440 */
    top: 0.3472vw;
    /* 5/1440 */
    left: 0.4861vw;
    /* 7/1440 */
    border-radius: 1.6667vw;
    /* 24/1440 */
    background: #FFA726;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* =========================================================================
   Success Formula Section (client-success.html)
   ========================================================================= */
.cs-success-formula-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 5.2778vw;
  /* 76px gap from cards section - matches services.html/why-sold.html .steps-section margin-top */
}

.sf-container {
  width: 100%;
  /* No max-width: children are positioned with vw/cqi units that scale off
     the full viewport width (same as .page-container, which has no cap
     either - see Services/Why SOLD's equivalent wrapper). Capping this
     container's width without also capping those units caused the whole
     section to drift right of center on screens wider than 1440px. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Header */
.sf-header {
  position: relative;
  width: 100%;
  height: 12vw;
  /* ~172px space before timeline starts */
}

.sf-title-wrapper {
  position: absolute;
  top: 1.0417vw;
  /* 15px */
  left: 25.0694vw;
  /* 361px left gap */
  width: 50.0694vw;
  /* 721px */
  height: 4.0972vw;
  /* 59px */
  display: flex;
  justify-content: center;
  gap: .9vw;
  /* Tightly pack elements to match Figma design */
  align-items: baseline;
  /* perfectly aligns logo bottom to text baseline */
}

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

.sf-title-logo {
  width: 9.375vw;
  /* 135px */
  height: 3.3333vw;
  /* 48px */
  object-fit: contain !important;
  transform: translateY(0.4vw);
  /* Nudge down slightly relative to text baseline */
}

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

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


/* --- Pre-Footer Overrides for Client Success Page --- */
@media (min-width: 768px) {
.cs-pre-footer .pre-footer-title {
  max-width: 52.0139vw;
  /* 749/1440 - this page's own title needs more width than the 669/1440
     shared default before it wraps. Was also a fixed width/height/top/
     transform tied to the old fixed-box absolute-positioning system -
     those are gone now that the shared base (style-v2.css) is dynamic:
     no fixed height, real padding, flexbox centering the title against
     the button automatically regardless of how many lines it wraps to. */
}
}
/* The mobile override that used to live here (its own ~80-line copy of the
   whole fixed-height/absolute-position system, hand-tuned to a height of
   350px and a button position of exactly 250px for this page's specific
   3-line headline) is gone - the shared base in style-v2.css now handles
   every page's pre-footer dynamically, including this one, with no
   per-page copy needed. See DEPLOY.md for the verification this was
   checked against, not just deleted and assumed fine. */

/* --- Plus Divider Override for Client Success Page --- */
.client-success-page-body .plus-btn-divider {
  position: relative !important;
  width: 83.9583vw !important;
  /* 1209/1440 */
  left: 9.0278vw !important;
  /* 130/1440 */
  margin: 0.9028vw 0 2.9861vw 0 !important;
  justify-content: flex-start !important;
  padding-left: 40.2431vw !important;
  /* 579.5/1440 */
  box-sizing: border-box !important;
  max-width: none !important;
}

/* --- Web FAQ padding override --- */
.client-success-page-body .faq-section {
  /* Client-requested: this section's background was #F4F5F5 (light grey),
     inconsistent with Services/Why SOLD, which both use the base
     .faq-section rule's white (#FFFFFF, css/style-v2.css) - removed so this
     page inherits the same white instead of duplicating/hardcoding it here.
     The padding-top override below is unrelated and stays: FAQ now sits
     right after Pre-footer (was the other way round), so its top gap is
     matched to its own 65px bottom gap - the standard spacing already used
     site-wide between stacked sections - instead of the 27px inherited from
     the base .faq-section rule. */
  padding-top: 4.5139cqi !important;
  /* 65px */
}

/* Tablet dead zone (768-991px): the mobile FAQ markup (#faq-mobile) is what
   Bootstrap's d-lg-none/d-lg-block actually show below 992px, but the mobile
   padding rule further down is gated at max-width:767px - so without this,
   .faq-section-mobile got 0px top padding in this range, crowding it
   straight against Pre-footer. Matches the 56px used <=767px. */
@media (min-width: 768px) and (max-width: 991px) {
  .faq-section-mobile {
    padding-top: 56px !important;
  }
}

/* For Mobile (Below 992px) - Fallback to standard px/layout so it stacks nicely like services.html */
@media (max-width: 767px) {

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

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

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

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

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

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

  .client-success-page-body {
    background-color: #FFFFFF !important;
  }

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

  .client-success-hero-content {
    position: relative;
    /* The children are absolutely positioned, so the whole block is nudged up
       as one with this offset rather than by editing each child's top - that
       keeps every gap between title, subtitle and breadcrumb exactly as it is.
       336px (current start) - 135px = 201px, matching the Home hero. */
    /* Was -135px, which pinned the block at Home's 201px. This page's block
       is only 226px tall, so that left the lower hero empty. Now centred
       slightly above the middle: 45vh - 113px (half the block). The block
       naturally starts 336px down, hence the -449px. vh (not px) because
       this hero is 100vh, so 45%% must track the phone's height. */
    top: calc(45vh - 449px);
    transform: none;
    left: 0;
    padding: 0;
    /* Remove padding for absolute positioning of children */
    height: auto;
    display: block;
    /* Changed from flex to block */
    z-index: 3 !important;
    /* Ensure it stays above the absolute background image */
  }

  .client-success-hero-title-container {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-bottom: 23px;
    display: flex;
    flex-direction: column;
  }

  .client-success-hero-title {
    position: absolute !important;
    top: 342px !important;
    left: 6.3613vw !important;
    /* 25px */
    width: calc(100% - 12.7226vw) !important;
    /* Full width minus left+right margins */
    height: auto !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 9.7201vw !important;
    /* 38.2px */
    line-height: 10.9415vw !important;
    /* 43px */
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .client-success-hero-subtitle {
    position: absolute !important;
    top: 488px !important;
    left: 26px !important;
    width: 187px !important;
    height: 30px !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    margin: 0 !important;
  }

  .client-success-hero-desc {
    display: none !important;
    /* Hidden on mobile as per Figma */
  }

  .client-success-hero-btn {
    display: none !important;
    /* Hidden on mobile as per Figma */
  }

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

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

  .client-success-hero-breadcrumb {
    position: absolute !important;
    top: 533px !important;
    left: 26px !important;
    width: max-content !important;
    height: 29px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .client-success-hero-breadcrumb .breadcrumb-home,
  .client-success-hero-breadcrumb .breadcrumb-services-wrapper span {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 29px !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    height: auto !important;
    width: auto !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }

  .client-success-hero-breadcrumb .breadcrumb-icon {
    width: 23px !important;
    height: 15px !important;
    object-fit: fill !important;
  }

  /* Intro Section Mobile */
  .cs-intro-section {
    position: relative !important;
    height: 298px !important;
    /* text bottom (227) + gap (71) = 298px */
    padding: 0 !important;
    background: transparent !important;
  }

  .cs-intro-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .cs-intro-label {
    position: absolute !important;
    top: 54px !important;
    /* 906px - 852px (hero height) = 54px */
    left: 22px !important;
    width: max-content !important;
    height: 35px !important;
    white-space: nowrap !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    color: #FFA726 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    /* Gap for the vertical bar */
    margin: 0 !important;
  }

  .cs-intro-label::before {
    content: '' !important;
    display: block !important;
    width: 3.76px !important;
    height: 31px !important;
    background: #FFA726 !important;
  }

  .cs-intro-text {
    position: absolute !important;
    top: 117px !important;
    /* 969px - 852px = 117px */
    left: 5.3435vw !important;
    /* 21px */
    width: calc(100% - 10.6870vw) !important;
    /* Full width minus left+right */
    height: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16px */
    line-height: 5.5980vw !important;
    /* 22px */
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
  }

  .cs-intro-text br {
    display: none !important;
    /* Let text wrap naturally on mobile */
  }

  /* Cards Section Mobile */
  .cs-cards-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 70px !important;
    /* Exactly 70px gap between the wrappers per Figma */
    margin-top: 0 !important;
    /* Removed to ensure exact 71px gap from text to card */
    padding: 0 !important;
    width: 100% !important;
  }

  .cs-card-wrapper {
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    /* Centers the 356px card */
    height: auto !important;
  }

  .cs-card-wrapper.bg-white {
    background: #FFFFFF !important;
  }

  .cs-card-wrapper.bg-grey {
    background: #E9EAEB !important;
    height: auto !important;
    position: static !important;
    padding-top: 49px !important;
    /* Exact 49px gap from gray background top to content top */
    padding-bottom: 49px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .cs-card-wrapper.bg-grey .cs-card {
    position: static !important;
  }

  .cs-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 33px !important;
    width: 100% !important;
    /* Fill available space within padded wrapper */
    max-width: 90.5852vw !important;
    /* 356px cap on 393px screens */
    height: auto !important;
    min-height: auto !important;
  }

  .cs-card-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }

  .cs-card-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    /* Gap below the description (down to the button): 57px -> 33px -> 40px
       -> 14px (v1.0.84) -> REVERTED back to 40px. Mobile only. */
    width: 100% !important;
  }

  .cs-card-logo {
    object-fit: contain !important;
    object-position: left !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cs-card-1 .cs-card-logo {
    width: 99px !important;
    height: 74px !important;
  }

  .cs-card-2 .cs-card-logo {
    width: 110px !important;
    height: 50px !important;
  }

  .cs-card-3 .cs-card-logo {
    width: 99px !important;
    height: 62px !important;
  }

  .cs-card-4 .cs-card-logo {
    width: 125px !important;
    height: 53px !important;
  }

  .cs-card-5 .cs-card-logo {
    width: 172px !important;
    height: 44px !important;
  }

  .cs-card-6 .cs-card-logo {
    width: 156px !important;
    height: 71px !important;
  }

  .cs-card-7 .cs-card-logo {
    width: 131px !important;
    height: 59px !important;
  }

  .cs-card-8 .cs-card-logo {
    width: 151px !important;
    height: 78px !important;
  }

  .cs-card-9 .cs-card-logo {
    width: 188px !important;
    height: 33px !important;
  }

  .cs-card-10 .cs-card-logo {
    width: 124px !important;
    height: 46px !important;
  }

  .cs-card-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 7.1247vw !important;
    /* 28px relative to 393px */
    line-height: 10.1781vw !important;
    /* 40px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    /* Reverted to its original base colour - matches the desktop revert
       (real Figma design is a per-card highlighted phrase, not a uniform
       colour); same .cs-title-highlight span used for the orange portion. */
    margin: 0 !important;
    padding: 0 !important;
  }

  .cs-card-title .cs-title-highlight {
    color: #FFA726 !important;
  }

  /* Layout axis changed from column (icon stacked above the text) to row
     (icon beside the text, to its left) - client confirmed against Figma
     that the quote sits to the LEFT of the description on mobile, not
     above it (the desktop placement above the text is unchanged - not
     asked about, left alone). Figma gave absolute screen-edge gaps (716px
     left / 687px right) for this element, but those don't fit this
     project's actual mobile frame - every other mobile value in this
     codebase is derived from a 393px-wide Figma frame (see any `vw`
     comment in this file, e.g. "18px relative to 393px" a few lines
     below), and 716 alone is already almost double that. Rather than
     guess a scaling/offset that could be wrong in either direction, used
     a reasoned gap instead (12px, this project's other common small-gap
     value) - flag for the client to confirm the exact spacing, or supply
     the frame width the 716/687 figures were measured against. */
  /* REVERTED from row back to column (client correction): the quote icon
     was sitting beside the description on mobile ("same line"), but should
     be above it, like the original v1.0.69 layout. The icon's left edge was
     first set to an 18px inset (a guessed value), then corrected to align
     exactly with the description's own left edge - client feedback:
     "positioned slightly too far to the right" - measured an 18px offset
     between them before that fix, now 0. Mobile only - desktop's row
     layout (v1.0.75, icon flush left of text) is untouched.

     Gap history: spec was 20px above (icon-to-description) / 33px below
     (description-to-button, `.cs-card-right`'s own gap) - both verified
     exactly correct via getBoundingClientRect at the time, a visual-weight
     perception effect rather than a bug. Nudged to 14px above / 40px below
     (v1.0.83) to compensate. v1.0.84 then swapped to 33px above / 14px
     below - REVERTED back to v1.0.83's 14px above / 40px below (see
     `.cs-card-right` for the below value). */
  .cs-card-quote-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .cs-card-quote-icon {
    width: 39px !important;
    height: 26px !important;
    display: block !important;
    margin: 0 !important;
  }

  .cs-card-desc {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.5802vw !important;
    /* 18px relative to 393px */
    line-height: 6.8702vw !important;
    /* 27px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .cs-card-btn {
    position: relative !important;
    width: 249px !important;
    height: 43px !important;
    border-radius: 55px !important;
    background: #263238 !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .cs-card-btn-text {
    position: absolute !important;
    top: 7px !important;
    left: 60.82px !important;
    width: 233.13px !important;
    height: 30px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 21px !important;
    line-height: 30px !important;
    letter-spacing: 0.01em !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .cs-card-btn-icon {
    position: absolute !important;
    width: 35px !important;
    height: 35px !important;
    top: 4px !important;
    left: 6px !important;
    border-radius: 24px !important;
    background: #FFA726 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Success Formula Mobile (matches services.html / why-sold.html) */
  .cs-success-formula-section {
    padding: 51px 0 0 0 !important;
    /* No horizontal inset, matches services/why-sold .steps-section so the
       title row has the same available width and stays on one line */
  }

  .sf-title-wrapper {
    position: relative !important;
    top: auto !important;
    transform: none !important;left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 11px !important;
    /* Adjust gap to mimic Figma's single line */
    margin-bottom: 0 !important;
    /* Spacing handled by subtitle margin */
  }

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

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

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

  /* Steps Timeline Mobile Overrides for Client Success Page */
  .steps-container {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    padding: 0 6.87vw !important;
    /* Removed top/bottom padding to ensure exact container height */
    display: grid !important;
    grid-template-columns: 100% !important;
    gap: 0 !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .step-circle-1,
  .step-circle-2,
  .step-circle-3 {
    position: relative !important;
    top: auto !important;
    transform: none !important;left: auto !important;
    margin: 0 !important;
    width: 9.16vw !important;
    height: 9.16vw !important;
    background-color: #FFFFFF !important;
    border: none !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 5 !important;
    transform: none !important;
    grid-column: 1 !important;
    justify-self: center !important;
    transition: background-color 0.4s ease !important;
  }

  .step-circle-1.filled,
  .step-circle-2.filled,
  .step-circle-3.filled,
  .step-circle.filled {
    background-color: #FFA726 !important;
  }

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

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

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

  .step-circle-1 span,
  .step-circle-2 span,
  .step-circle-3 span {
    font-size: 5.09vw !important;
    color: #263238 !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .step-line-1 {
    position: relative !important;
    top: auto !important;
    transform: none !important;left: auto !important;
    transform: none !important;
    height: calc(100% - 18px) !important;
    width: 3px !important;
    background-color: #263238 !important;
    border: none !important;
    border-left: none !important;
    grid-row: 3 / 9 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    z-index: 1 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 4.58vw !important;
  }

  .step-highlight-line {
    position: relative !important;
    top: auto !important;
    transform: none !important;left: auto !important;
    transform: none !important;
    width: 3px !important;
    height: 0;
    background-color: #FFA726 !important;
    border: none !important;
    border-left: none !important;
    grid-row: 3 / 9 !important;
    grid-column: 1 !important;
    justify-self: center !important;
    align-self: start !important;
    z-index: 2 !important;
    display: block !important;
    margin: 0 !important;
    margin-top: 4.58vw !important;
    border-radius: 4px !important;
    transition: height 0.05s linear !important;
  }

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

  .step-card-1,
  .step-card-2,
  .step-card-3 {
    position: relative !important;
    top: auto !important;
    transform: none !important;left: auto !important;
    margin: 0 !important;
    width: 339px !important;
    max-width: none !important;
    min-height: 0 !important;
    height: 194px !important;
    background-color: #E9EAEB !important;
    border-radius: 26px !important;
    padding: 36px 34px 39px 34px !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    grid-column: 1 !important;
    justify-self: center !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .step-card-1 {
    grid-row: 4 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 12.21vw !important;
  }

  .step-card-2 {
    grid-row: 6 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 8.91vw !important;
  }

  .step-card-3 {
    grid-row: 8 !important;
    margin-top: 37.4vw !important;
    margin-bottom: 10.69vw !important;
  }

  .step-card-inner,
  .step-card-inner-2,
  .step-card-inner-3 {
    width: 271px !important;
    height: 119px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0px !important;
    align-items: flex-start !important;
  }

  .step-card-title-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 28px !important;
    margin: 0 0 9px 0 !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  .step-number {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    width: auto !important;
    height: 28px !important;
    line-height: 28px !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  .step-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    width: auto !important;
    height: 28px !important;
    line-height: 28px !important;
    letter-spacing: -0.04em !important;
    margin: 0 !important;
  }

  .step-desc,
  .step-desc-2,
  .step-desc-3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    color: #000 !important;
    width: 271px !important;
    height: 72px !important;
    text-align: left !important;
    margin: 0 !important;
  }

  .step-desc .desktop-break,
  .step-desc-2 .desktop-break,
  .step-desc-3 .desktop-break {
    display: none !important;
  }

  /* Reset Plus Divider for Mobile (overriding the desktop vw rules) */
  .client-success-page-body .plus-btn-divider {
    width: 100% !important;
    left: 0 !important;
    padding-left: 0 !important;
    justify-content: center !important;
    margin-top: 12px !important;
    /* Exactly 12px gap from section above per Figma */
    margin-bottom: 72px !important;
    /* 72px + 11px (SVG height) + 12px (margin-top) = 95px total gap */
  }

  /* FAQ Section Mobile */
  .faq-section-mobile {
    width: 100% !important;
    padding-top: 56px !important;
    /* FAQ now sits right after Pre-footer (was the other way round) -
       matches the 56px top gap used on Home/Services/Why SOLD mobile, was
       0 when Pre-footer came after FAQ instead of before it. */
    padding-bottom: 50px !important;
    /* Matches the FAQ-to-pre-footer gap used on every other page */
  }

  .faq-mobile-container {
    padding: 0 5.8524vw !important;
    /* 23px */
    display: flex !important;
    flex-direction: column !important;
    gap: 9.16vw !important;
  }

  .faq-mobile-header {
    display: flex !important;
    align-items: center !important;
    gap: 2.29vw !important;
  }

  .faq-mobile-bar {
    width: 0.51vw !important;
    height: 5.6vw !important;
    background: #FFA726 !important;
  }

  .faq-mobile-label {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.09vw !important;
    line-height: 7.63vw !important;
    color: #FFA726 !important;
    margin: 0 !important;
  }

  .faq-mobile-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .faq-mobile-item {
    padding-top: 2.54vw !important;
    padding-bottom: 5.34vw !important;
    border-bottom: 1px solid rgba(162, 162, 162, 0.32) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
  }

  .faq-mobile-item:last-child {
    border-bottom: none !important;
  }



  .faq-mobile-question {
    width: 100% !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    text-align: left !important;
  }

  .faq-mobile-question:focus {
    outline: none !important;
  }

  .faq-mobile-question-text {
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 3.5623vw !important;
    /* 14px relative to 393px */
    line-height: 5.0891vw !important;
    /* 20px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #000 !important;
    display: block !important;
  }

  .faq-mobile-answer {
    display: none !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
    margin-top: 0 !important;
  }

  .faq-mobile-item.active .faq-mobile-answer {
    display: block !important;
    margin-top: 3.05vw !important;
  }

  .faq-mobile-answer p {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 3.5623vw !important;
    /* 14px relative to 393px */
    line-height: 5.0891vw !important;
    /* 20px relative to 393px */
    letter-spacing: 0.01em !important;
    color: #3A3939 !important;
    margin: 0 !important;
  }

  /* Mobile padding overrides for Client Success Cards to ensure exactly 18px edge gap */
  .client-success-page-body .cs-cards-section .cs-card-wrapper {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =============================================================
   TABLET (768-1199px) - CLIENT SUCCESS
   Breadcrumb is sized in vw here and drops to 9.6px at 768, and this
   file loads after style-v2.css so the shared floor there cannot win.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  .client-success-hero-breadcrumb .breadcrumb-home,
  .client-success-hero-breadcrumb .current,
  .client-success-hero-breadcrumb a,
  .client-success-hero-breadcrumb .breadcrumb-services-wrapper span,
  .client-success-hero-breadcrumb .ws-breadcrumb-home {
    font-size: max(12px, 1.25vw);
  }
}

/* ==========================================================================
   Client Success MOBILE - intro text + card button to Figma (mobile only, <768) - 2026-09-25
   ========================================================================== */
@media (max-width: 767px) {
  /* Intro 2079:822/823 ("iPhone 14 & 15 Pro - 1" 2079:808): text at (21, 953) = 101 below the hero (852), Mona
     Sans Medium 24/37, 0.01em, #0B0B0B, 352 wide, 7 lines (was Inter 16/22 at 117). Label bar at y 896 = 44 below
     the hero (was 54). The text is now in flow (was absolute in a fixed 298px section sized to the old 5 lines):
     section = 101 top + text + the same 71 below it as before. vw so every phone width wraps like Figma. */
  .cs-intro-section {
    height: auto !important;
    padding: 25.6997vw 0 18.0662vw !important;
  }

  .cs-intro-label {
    top: 11.1959vw !important;
  }

  .cs-intro-text {
    position: relative !important;
    top: auto !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 6.1069vw !important;
    line-height: 9.4148vw !important;
    letter-spacing: 0.01em !important;
  }

  /* Card button 2095:1200: 234 x 43, arrow 35x35 at (6,4), "FIND OUT MORE" at x 47.16 = 6px after the arrow
     (was 60.82 = 19.8px gap, button 249 wide). */
  .cs-card-btn {
    width: 234px !important;
  }

  .cs-card-btn-text {
    left: 47.16px !important;
    width: auto !important;
    white-space: nowrap !important;
  }
}


/* ==========================================================================
   SEO heading structure - Client Success (client sheet, 2026-09-29): tags changed, design unchanged.
   (FAQ + Success Formula h2/h3 resets are the shared ones at the end of style-v2.css.)
   ========================================================================== */
/* "Client Success" intro label: <div> -> <h2>. Take away the heading defaults the div never had. */
h2:where(.cs-intro-label) {
  display: block;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* "Designed For Deals" (phone hero subtitle): <h2> -> <div>. Keep the heading defaults the h2 had. */
div:where(.client-success-hero-subtitle) {
  margin-top: 0;
  margin-bottom: .5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.2;
  font-size: calc(1.325rem + .9vw);
  color: var(--bs-heading-color, inherit);
}

@media (min-width: 1200px) {
  div:where(.client-success-hero-subtitle) {
    font-size: 2rem;
  }
}