/* =========================================================================
   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 */
.insights-page-body {
  background-color: #F4F5F5 !important;
}

@media (min-width: 768px) {

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

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

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

  .insights-hero-title {
    position: absolute;
    top: 13.5972vw;
    /* 239/1440 */
    left: 4.4444vw;
    /* 64/1440 */
    width: 64.7917vw;
    /* 933/1440 */
    height: 8.1944vw;
    /* 118/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 4.6528vw;
    /* 67/1440 (Figma 1867:1774) - was 4.1528vw, which is only ~60px and
       rendered the title visibly smaller than Figma / Client Success. */
    line-height: 4.7917vw;
    /* 69/1440 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

  .insights-hero-title .hero-title-highlight {
    color: #FFA726;
  }

  /* --- Text + Button Container (Right) ---
     Matches Figma's own "Frame 9" container exactly (node 1867:1766):
     fixed width, flex-column with a real 56px gap. Bottom/left-anchored,
     NOT top-anchored - `.insights-hero` is `height: 100vh` (the real
     browser viewport height, which varies per screen and is very often
     shorter than Figma's own 825px-tall reference frame). A top-anchor
     keeps this 227px-tall block pinned at a fixed distance from the top
     regardless of the hero's actual height, so on a shorter browser window
     it can overflow past the hero's real bottom edge into the section
     below - reported as the block "going down" past where it should sit.
     Bottom-anchoring keeps it glued to the hero's actual bottom edge at
     any real viewport height, same as it was before this container existed
     (just with the correct 107px inset now, from Figma's real numbers,
     instead of the old two-elements-with-drifted-values approach). */
  .insights-hero-text-container {
    position: absolute;
    left: 60.9722vw;
    /* 878/1440 */
    bottom: 6.9444vw;
    /* 100/1440 - gap from the button's bottom to the hero's bottom edge,
       per Figma 1867:1766. */
    width: 35vw;
    /* 504/1440 */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.8889vw;
    /* 56/1440 */
  }

  /* --- Text Paragraph --- */
  .insights-hero-desc {
    width: 34.6528vw;
    /* 499/1440 */
    height: 8.0556vw;
    /* 116/1440 - 4 lines x 29 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5972vw;
    /* 23/1440 (Figma 1867:1767, same as Client Success) - was 1.4972vw
       (~21.6px), which wrapped to 3 lines instead of Figma's 4. */
    line-height: 2.0139vw;
    /* 29/1440 */
    letter-spacing: 0.01em;
    color: #FFFFFF;
    margin: 0;
  }

  /* --- Button --- */
  .insights-hero-btn {
    position: relative;
    /* Anchors .icon-circle/.btn-text-custom below, which are still
       absolutely positioned relative to the button itself. */
    width: 27.2917vw;
    /* 393/1440 */
    height: 3.8194vw;
    /* 55/1440 */
    border-radius: 2.0139vw;
    /* 29/1440 */
    background: #FFFFFF;
    text-decoration: none;
    display: block;
    flex-shrink: 0;
  }

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

  .insights-hero-btn .icon-circle {
    position: absolute;
    top: 0.3472vw;
    /* 5/1440 */
    left: 0.7639vw;
    /* 11/1440 */
    width: 3.0556vw;
    /* 44/1440 */
    height: 3.0556vw;
    /* 44/1440 */
    border-radius: 1.6667vw;
    /* 24/1440 */
    background: #FFA726;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Breadcrumb (Bottom Left) */
  .insights-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;
  }

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

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

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

  .insights-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
     ========================================================================= */
  .insights-blogs-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 7.6389vw;
    /* 935px absolute top - 825px hero height = 110px margin-top */
    margin-bottom: 0;
  }

  .insights-blogs-container {
    width: 91.6667vw;
    /* 1320/1440 */
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5.2083vw;
    /* 75/1440 - Figma's own gap-[75px] between the label and the paragraph
       (node 1867:1915), used directly instead of relying on
       justify-content:space-between to approximate it from the two
       children's widths, which landed a couple px short. */
  }

  .insights-blogs-label {
    width: 18.3611vw;
    /* 264.4/1440 (line 4 + gap 11 + text 249.4) */
    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;
    text-transform: uppercase;
    /* Figma 1867:1931 - "ARTICLES" */
    display: block;
    /* Export correct baseline for text */
    border-left: 0.2778vw solid #FFA726;
    /* Replaces ::before */
    padding-left: 0.7639vw;
    box-sizing: border-box;
    margin-top: 0;
  }

  .insights-blogs-text {
    width: 68.2639vw;
    /* 983/1440 */
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 2.3611vw;
    /* 34/1440 - was 2.2222vw (32px), node 1867:1932 is 34px */
    line-height: 2.9167vw;
    /* 42/1440 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    margin-top: -0.4167vw;
    /* -6px to pull up baseline so it aligns with label without pushing container down */
  }

  /* --- Search + Category Filter Bar ---
     Moved here (right after the Articles intro) from the Feed section
     further down the page, to match Figma's real order (node 3929:4896).
     Reuses the .insights-feed-search/.insights-feed-divider/
     .insights-feed-categories rules further below unchanged - those
     already matched Figma's numbers exactly (1277px divider, 19px/20px
     type), the only actual bug was the block's page position. */
  .insights-searchbar-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 5vw;
    /* 72/1440 - reduced on request from Figma's 126px (intro bottom 1061
       -> search top 1187), which read as too much empty space. */
    margin-bottom: 0;
  }

  .insights-searchbar-container {
    width: 91.6667vw;
    /* 1320/1440 - same standard container width every other section here
       uses, for consistent left/right edges page-wide */
  }

  /* --- Featured Story Section --- */
  .insights-featured-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    margin-top: 4.6528vw;
    /* 67/1440 - gap from the search bar's bottom edge (1187+95=1282) to
       Featured Story's top (1349). Was 6.4583vw (93px), tuned for the old
       flow before the search bar sat between these two sections. */
  }

  .insights-featured-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 91.7361vw;
    /* 1321/1440 */
    gap: 1.5278vw;
    /* 22px / 1440 - gap between title and card */
    margin-top: 0 !important;
    margin-bottom: 0;
  }

  .insights-featured-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2.6vw, 45px);
    /* responsive but capped */
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #000000;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
  }

  .insights-featured-card {
    display: flex;
    flex-direction: column;
    width: 75vw;
    /* reduced width for tighter layout */
    background-color: #E9EAEB;
    border-radius: 1.3194vw;
    /* 19/1440 */
    padding: 1.5vh 1.9444vw 1.2vh 1.9444vw;
    padding: 1.5dvh 1.9444vw 1.2dvh 1.9444vw;
    gap: 2vh;
    gap: 2dvh;
    flex: 0 1 auto;
  }

  .insights-featured-img-wrap {
    width: 100%;
    height: 45vh;
    height: 45dvh;
    min-height: 15vw;
    max-height: 26.6667vw;
    /* cap at original Figma size on wide screens */
    border-radius: 1.8056vw;
    /* 26/1440 */
    overflow: hidden;
  }

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

  .insights-featured-content {
    display: flex;
    flex-direction: column;
    padding-left: 1.8056vw;
    /* 26/1440 */
    gap: 0.9028vw;
    /* 13/1440 - Figma 1867:1938's gap between date / headline / text /
       Read More. Was 0.6vh (~5px, and varying with window height). */
    flex-shrink: 0;
  }

  .insights-featured-date {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* 7/1440 */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.3889vw;
    /* 20/1440 - was clamp(12px, 1.1vw, 20px), only reaching 15.84px at the
       1440px reference. Same fix applied to every clamp() rule below in
       this card - node 1867:1936. */
    line-height: 1.1;
    /* row height comes from the 32px calendar icon, as in Figma (1867:1939) */
    color: #000000;
  }

  .insights-calendar-icon {
    width: 2.3611vw;
    /* 34/1440 */
    height: 2.2222vw;
    /* 32/1440 */
    object-fit: cover !important;
  }

  .insights-featured-headline {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    /* 45/1440 - was clamp(20px, 2.4vw, 40px); node 1867:1952 is 45px, not
       even the old 40px ceiling. */
    line-height: 3.4722vw;
    /* 50/1440 - Figma 1867:1952 */
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-featured-excerpt {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.5972vw;
    /* 23/1440 - node 1867:1953. Was clamp(12px, 1.25vw, 21px), and the old
       21px ceiling was also short of Figma's real 23px. */
    line-height: 2.0139vw;
    /* 29/1440 - Figma 1867:1953 */
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
    width: 100%;
    /* fill available card width */
  }

  .insights-featured-readmore {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    /* 21/1440 - node 1867:1954 */
    line-height: 2.3611vw;
    /* 34/1440 - Figma's Read More box height */
    letter-spacing: 0.01em;
    color: #000000;
    text-decoration: none;
    margin: 0;
  }

  /* --- Latest Blogs Section --- */
  .insights-latest-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    /* Respect left margin */
  }

  .insights-latest-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: 4.1667%;
    /* 60/1440 - use % so scrollbar doesn't skew right gap */
    width: 91.7361%;
    /* 1321/1440 - leaves exactly 59px (4.0972%) on the right */
    gap: 4.29vw;
    /* 62/1440 gap between title and grid */
    margin-top: 6.875vw;
    /* 99/1440 gap to featured story section */
    margin-bottom: 0;
  }

  .insights-latest-title-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7639vw;
    /* 11/1440 gap mapped correctly to viewport width instead of height */
  }

  .insights-latest-bar {
    width: 0.2778vw;
    /* 4/1440 */
    height: 2.4438vw;
    /* 35.19/1440 */
    background-color: #FFA726;

  }

  .insights-latest-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.1vw, 30px);
    /* 30/1440 */
    line-height: 1.1;
    color: #FFA726;
    margin: 0;
  }

  .insights-latest-grid {
    display: grid;
    width: 100%;
    /* span full container to respect 60/59 side gaps */
    grid-template-columns: 1fr 1fr;
    /* 2 columns */
    column-gap: 1.9167vw;
    /* 42/1440 */
    row-gap: 2.2222vw;
    /* 32/1440 - node 1867:1955: row 2 top (662) - row 1 bottom (630) = 32.
       Was 3vh/4dvh (viewport-height-relative, didn't match Figma's real
       32px gap at the 1440px reference). */
  }

  .insights-latest-card {
    display: flex;
    flex-direction: column;
    background-color: #E9EAEB;
    border-radius: 1.3194vw;
    /* 19/1440 */
    padding: 1.5vh 1.3889vw 2vh 1.3889vw;
    /* 17px 20px 44px */
    padding: 1.5dvh 1.3889vw 2dvh 1.3889vw;
    gap: 2vh;
    /* 33/1440 */
    gap: 2dvh;
    flex: 0 1 auto;
  }

  .insights-latest-img-wrap {
    width: 100%;
    height: 23.2639vw;
    /* 335/1440 - Figma 1867:1975. Was 35dvh capped at 335, so on a typical
       ~900px-tall window it was only 315px and cropped more of each photo
       than Figma does. */
    border-radius: 1.4583vw;
    /* 21/1440 - was 1.8056vw (26px), that's Featured Story's own larger
       image radius (node 1867:1937) reused by mistake here; Latest Blogs'
       own image (node 1867:1975) is 21px. */
    overflow: hidden;
  }

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

  .insights-latest-content {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    /* Removing the 26px padding that was only for Featured Story */
    gap: 1vh;
    /* 13/1440 */
    gap: 1dvh;
  }

  .insights-latest-date {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* 7/1440 */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.3889vw;
    /* 20/1440 - was clamp(12px, 1vw, 20px), which only reaches 14.4px at
       the 1440px reference (1vw never gets to its own 20px ceiling there) -
       same fix applied to every clamp() rule below in this card. */
    line-height: 1.5;
    color: #000000;
  }

  .insights-latest-icon {
    width: 2.3611vw;
    /* 34/1440 */
    height: 2.2222vw;
    /* 32/1440 */
    object-fit: cover !important;
  }

  .insights-latest-headline {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 2.2222vw;
    /* 32/1440 - node 1867:1990 */
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-latest-excerpt {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 - node 1867:1991 */
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
    width: auto;
  }

  .insights-latest-readmore {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    /* 21/1440 - node 1867:1992 */
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #000000;
    text-decoration: none;
    margin: 0;
  }

  /* --- Feed Section Placeholder --- */
  .insights-feed-section {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }

  .insights-feed-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align contents to left edge */
    margin-left: 4.1667%;
    /* 60/1440 - use % so scrollbar doesn't skew */
    width: 91.7361%;
    /* 1321/1440 (leaves exactly 59px on the right edge) */
    gap: 4.5833vw;
    /* 66/1440 */
    margin-top: 8.8757vw;
    /* 127.81/1440 strict gap from Latest Blogs */
    margin-bottom: 2vw;
    /* Reduced from 59.81/1440 gap to pre-footer */
  }

  .insights-feed-title-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.7639vw;
    /* 11/1440 */
  }

  .insights-feed-bar {
    width: 0.2778vw;
    /* 4/1440 */
    height: 2.4438vw;
    /* 35.19/1440 */
    background-color: #FFA726;
  }

  .insights-feed-title {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 600;
    font-size: 2.0833vw;
    /* 30/1440 */
    line-height: 2.0833vw;
    color: #FFA726;
    margin: 0;
  }

  .insights-feed-headline {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    /* 45/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
    width: 49.9306vw;
    /* 719/1440 */
  }

  .insights-feed-main-content {
    display: flex;
    flex-direction: column;
    gap: 3.8194vw;
    /* 55/1440 - harmless now that the filter bar moved out (single child),
       kept in case a 2nd child is ever added back here. */
  }

  .insights-feed-main-content .insights-featured-card {
    margin-left: 3.028%;
    /* 40/1321 relative to parent. Total left gap to screen = 100px */
    width: 90.6132%;
    /* 1197/1321 relative to parent. Total right gap to screen = 143px */
  }

  .insights-feed-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.3194vw;
    /* 19/1440 */
  }

  .insights-feed-search {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 1.3889vw;
    /* 20/1440 */
    line-height: 1;
    color: #000000;
  }

  .insights-feed-divider {
    width: 88.6806vw;
    /* 1277/1440 */
    height: 0px;
    border: 1px solid #FFA726;
    margin: 0;
    opacity: 1;
  }

  .insights-feed-categories {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 500;
    font-size: 1.3889vw;
    /* 20/1440 */
    line-height: 1;
    color: #000000;
  }

  .insights-feed-categories .filter-link {
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .insights-feed-categories .filter-link:hover {
    color: #FFA726;
  }

  .insights-feed-categories .filter-link.active {
    color: #FFA726;
  }

  /* --- Small Feed Grid --- */
  .insights-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8333vw;
    /* 12/1440 */
  }

  .insights-blog-card {
    display: flex;
    flex-direction: column;
    background-color: #E9EAEB;
    border-radius: 1.3194vw;
    /* 19/1440 */
    padding: 1.1806vw 1.3889vw 3.0556vw 1.3889vw;
    /* 17px 20px 44px */
    gap: 2.2917vw;
    /* 33/1440 */
  }

  .insights-blog-img-wrap {
    width: 100%;
    height: 18.4028vw;
    /* 265/1440 */
    border-radius: 1.4583vw;
    /* 21/1440 */
    overflow: hidden;
  }

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

  .insights-blog-content {
    display: flex;
    flex-direction: column;
    gap: 0.9028vw;
    /* 13/1440 */
  }

  .insights-blog-date {
    display: flex;
    align-items: center;
    gap: 0.4861vw;
    /* 7/1440 */
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1.25vw;
    /* 18/1440 */
    line-height: 1;
    color: #000000;
  }

  .insights-blog-icon {
    width: 1.8056vw;
    /* 26/1440 */
    height: 1.7361vw;
    /* 25/1440 */
    object-fit: cover !important;
  }

  .insights-blog-headline {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.6667vw;
    /* 24/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    margin: 0;
  }

  .insights-blog-excerpt {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9722vw;
    /* 14/1440 */
    line-height: 1.3889vw;
    /* 20/1440 */
    letter-spacing: 0.01em;
    color: #292626;
    margin: 0;
  }

  .insights-blog-readmore {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.4583vw;
    /* 21/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    text-decoration: none;
    margin: 0;
  }

  .insights-load-more {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 3.125vw;
    /* 45/1440 */
    line-height: 1;
    letter-spacing: 0.01em;
    color: #000000;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    margin: 0;
  }

  /* =========================================================================
     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) --- */
  .cs-card-logo {
    object-fit: cover !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: #000000;
    margin: 0;
  }

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

  .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: 8.6111vw;
  /* 124px gap from cards section */
}

.sf-container {
  width: 100%;
  max-width: 1440px;
  /* Constrain on ultra-wide screens */
  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 (shared .cs-pre-footer styling, reused here) --- */
@media (min-width: 768px) {
  .cs-pre-footer .pre-footer-title {
    max-width: 52.0139vw;
    /* 749/1440 - was also a fixed width/height/top/transform tied to the
       old fixed-box absolute-positioning system; gone now that the shared
       base (style-v2.css) is dynamic - see client-success.css's identical
       fix for the full reasoning. */
  }
}

/* --- Plus Divider Override for Client Success Page --- */
.insights-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 Background Override --- */
.insights-page-body .faq-section {
  background-color: #F4F5F5 !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 */
  .insights-hero-breadcrumb {
    margin-left: 0 !important;
    gap: 11px !important;
  }

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

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

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

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

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

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

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

  .insights-hero-content {
    position: relative;
    /* Hero content centred slightly above the middle: 45vh - 114px (half of
       the 229px block). Children are absolutely positioned and naturally
       start 333px down, hence the -448px - offsetting the wrapper moves the
       whole block as one and leaves every inner gap untouched. vh because
       this hero is 100vh. */
    top: calc(45vh - 448px);
    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 */
  }

  .insights-hero-title-container {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .insights-hero-title {
    position: absolute !important;
    top: 333px !important;
    left: 25px !important;
    width: 278px !important;
    height: 215px !important;
    /* Was 160px (fit ~3-4 wrapped lines) - the title's new 3-segment
       default ("UAE Real Estate<br>Insights, Trends &<br>Marketing") wraps
       to 5 lines at this width/font-size (43px each), so the box needs to
       grow to fit it without overlapping the breadcrumb below. Breadcrumb's
       own `top` shifted down by the same +55px so the original ~40px gap
       between title and breadcrumb is preserved exactly. */
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 38.2px !important;
    line-height: 43px !important;
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
  }

  .insights-hero-title .hero-title-highlight {
    /* Same two-tone as desktop (Figma 1867:1774): "UAE Real Estate" white,
       "Insights, Trends & Marketing" orange. */
    color: #FFA726 !important;
  }

  .insights-hero-desc {
    display: none !important;
    /* Hide on mobile like client-success approach */
  }

  .insights-hero-btn {
    display: none !important;
    /* Hide CTA button on mobile insights page */
  }

  /* Mobile Breadcrumb Injection */
  .insights-hero-breadcrumb-mobile {
    position: absolute !important;
    top: 588px !important;
    /* Was 533px - shifted down 55px to match the title box's new 215px
       height (was 160px), keeping the same visual gap below the title. */
    left: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 4 !important;
  }

  .insights-hero-breadcrumb-mobile .breadcrumb-home {
    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;
    text-decoration: none !important;
  }

  .insights-hero-breadcrumb-mobile .breadcrumb-icon {
    width: 23px !important;
    height: 15px !important;
    object-fit: contain !important;
  }

  .insights-hero-breadcrumb-mobile .current {
    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;
  }

  /* Target both standard and mobile-specific breadcrumbs if any exist */
  .insights-hero-breadcrumb {
    position: absolute !important;
    top: auto !important;
    bottom: 20px !important;
    left: 30px !important;
    width: 174px !important;
    height: 29px !important;
    display: flex !important;
    /* Override d-none */
    align-items: center !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .insights-hero-breadcrumb .breadcrumb-home,
  .insights-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;
    text-decoration: none !important;
  }

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

  /* Intro Section Mobile */
  .insights-blogs-section {
    position: relative !important;
    height: auto !important;
    padding: 29.7709vw 0 0 !important;
    /* 117/393 - the text's Figma top. Was a fixed height (227px = 117 + a
       5-line, 110px text) sized to the old copy; the paragraph now flows in
       this padding, so the section ends at the text's real bottom for any
       text length. */
    background: transparent !important;
  }

  .insights-blogs-container {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .insights-blogs-label {
    position: absolute !important;
    top: 13.7404vw !important;
    /* 54/393 */
    left: 5.5979vw !important;
    /* 22/393 */
    width: max-content !important;
    height: 8.9058vw !important;
    /* 35/393 */
    white-space: nowrap !important;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.0890vw !important;
    /* 20/393 */
    line-height: 7.6335vw !important;
    /* 30/393 */
    color: #FFA726 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 2.7989vw !important;
    /* 11/393 */
    margin: 0 !important;
  }

  .insights-blogs-label::before {
    content: '' !important;
    display: block !important;
    width: 0.9567vw !important;
    /* 3.76/393 */
    height: 7.8880vw !important;
    /* 31/393 */
    background: #FFA726 !important;
  }

  .insights-blogs-text {
    position: relative !important;
    /* In flow (was absolute) - see .insights-blogs-section above */
    top: auto !important;
    left: 5.3435vw !important;
    /* 21/393 */
    width: 89.5674vw !important;
    /* 352/393 */
    height: auto !important;
    /* let text flow naturally */
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16/393 */
    line-height: 5.5979vw !important;
    /* 22/393 */
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
    margin: 0 !important;
  }

  /* Search + Category Filter Bar Mobile - moved here from the Feed section,
     same reason as desktop. No dedicated mobile Figma spec given yet for
     this block, so kept in normal document flow (matches how it already
     behaved inside the Feed section on mobile - .insights-feed-filter-wrap
     itself has no position:absolute at this breakpoint) with the same
     horizontal inset Featured Story below it uses, for a consistent look. */
  .insights-searchbar-section {
    width: 100%;
  }

  .insights-searchbar-container {
    width: 100%;
    padding: 0 4.8346vw !important;
    /* 19/393 - matches Featured Story's own mobile inset */
    margin-top: 6.1069vw !important;
    /* 24/393 - reduced on request (was 33/393) */
    box-sizing: border-box;
  }

  /* Featured Story Mobile */
  .insights-featured-container {
    width: 100%;
    padding: 0 4.8346vw !important;
    /* 19/393 */
    margin-top: 8.3969vw !important;
    /* 33/393 gap */
    margin-bottom: 13.7404vw !important;
    /* 54/393 gap */
    gap: 6.1068vw !important;
    /* 24/393 */
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .insights-featured-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.5979vw !important;
    /* 22/393 */
    line-height: normal !important;
    /* removed 50px to fix artificial gap */
    letter-spacing: 0.01em !important;
    text-align: center !important;
    width: 100%;
  }

  .insights-featured-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #E9EAEB !important;
    padding: 3.0534vw 3.8167vw 3.5623vw 3.8167vw !important;
    /* 12px 15px 14px 15px */
    gap: 4.5801vw !important;
    /* 18/393 */
    border-radius: 2.7989vw !important;
    /* 11/393 */
    width: 100% !important;
    /* 356px max width contextually */
    max-width: 90.5852vw !important;
    /* 356/393 */
  }

  .insights-featured-img-wrap {
    width: 100% !important;
    height: 48.0916vw !important;
    /* 189/393 */
    border-radius: 3.0534vw !important;
    /* 12/393 */
    overflow: hidden !important;
  }

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

  .insights-featured-content {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important;
    gap: 3.3078vw !important;
    /* 13/393 */
  }

  .insights-featured-date {
    display: flex !important;
    align-items: center !important;
    gap: 1.7811vw !important;
    /* 7/393 */
    margin: 0 !important;
  }

  .insights-featured-date span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 4.0712vw !important;
    /* 16/393 */
    line-height: 5.5979vw !important;
    /* 22/393 to match fixed box height */
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-calendar-icon {
    width: 6.6157vw !important;
    /* 26/393 */
    height: 6.1068vw !important;
    /* 24/393 */
  }

  .insights-featured-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 5.0890vw !important;
    /* 20/393 */
    line-height: 6.6157vw !important;
    /* 26/393 to match fixed box height */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-featured-excerpt {
    width: 100%;
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 3.3078vw !important;
    /* 13/393 */
    line-height: 4.8346vw !important;
    /* 19/393 */
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
  }

  .insights-featured-readmore {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 4.0712vw !important;
    /* 16/393 */
    line-height: 8.6513vw !important;
    /* 34/393 to match fixed box height */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  /* Latest Blogs Mobile */
  .insights-latest-container {
    width: 100%;
    padding: 0 4.8346vw !important;
    /* 19/393 */
    margin-top: 13.7404vw !important;
    /* 54/393 gap */
    margin-bottom: 47px !important;
    gap: 14px !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column !important;
  }

  .insights-latest-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 2.0356vw !important;
    /* 8/393 */
    margin-left: 2px !important;
    /* 19px padding + 2px margin = 21px left edge gap */
    margin-right: 201px !important;
    /* 19px padding + 201px margin = 220px right edge gap */
  }

  .insights-latest-bar {
    width: 1.0178vw !important;
    /* 4/393 */
    height: 6.1068vw !important;
    /* 24/393 */
    background-color: #FFA726 !important;
  }

  .insights-latest-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
    color: #FFA726 !important;
    margin: 0 !important;
  }

  .insights-latest-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* 2 columns on mobile */
    column-gap: 11px !important;
    row-gap: 11px !important;
  }

  .insights-latest-card {
    display: flex !important;
    flex-direction: column !important;
    background-color: #E9EAEB !important;
    padding: 7px 8px 14px 8px !important;
    gap: 6px !important;
    border-radius: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .insights-latest-img-wrap {
    width: 100% !important;
    height: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

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

  .insights-latest-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .insights-latest-date {
    display: flex !important;
    align-items: center !important;
    height: 16px !important;
    gap: 4px !important;
  }

  .insights-latest-date span {
    font-family: 'Inter', sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    letter-spacing: 0 !important;
    color: #000000 !important;
  }

  .insights-latest-icon {
    width: 13px !important;
    height: 12px !important;
  }

  .insights-latest-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-latest-excerpt {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
  }

  .insights-latest-readmore {
    font-family: 'Mona Sans', sans-serif !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  /* Feed Section Placeholder Mobile */
  .insights-feed-container {
    width: 100%;
    padding: 0 4.5801vw !important;
    /* 18px */
    margin-top: 47px !important;
    margin-bottom: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5.0890vw !important;
    /* 20px gap for Title -> Headline -> Content */
    box-sizing: border-box;
  }

  .insights-page-body .faq-section-mobile {
    padding-top: 0 !important;
  }

  .insights-feed-title-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2.0356vw !important;
    /* 8/393 */
  }

  .insights-feed-bar {
    width: 1.0178vw !important;
    /* 4/393 */
    height: 7.8880vw !important;
    /* 31/393 */
    background-color: #FFA726 !important;
  }

  .insights-feed-title {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
    color: #FFA726 !important;
    margin: 0 !important;
  }

  .insights-feed-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 5.0890vw !important;
    /* 20/393 */
    line-height: 6.1068vw !important;
    /* 24/393 */
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .insights-feed-main-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 6.8702vw !important;
    /* 27/393 */
  }

  .insights-feed-filter-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .insights-feed-search {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 2.5445vw !important;
    /* 10/393 */
    line-height: 3.5623vw !important;
    /* 14/393 */
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 0 2.0356vw 0 !important;
    /* 8px gap */
  }

  .insights-feed-divider {
    width: 89.5674vw !important;
    /* 352/393 */
    height: 0px !important;
    border: 1px solid #FFA726 !important;
    margin: 0 0 4.8346vw 0 !important;
    /* 19px gap */
    opacity: 1 !important;
  }

  .insights-feed-categories {
    font-family: 'Inter', sans-serif !important;
    font-size: 3.3078vw !important;
    /* 13/393 */
    line-height: 4.5801vw !important;
    /* 18/393 */
    letter-spacing: 0.01em !important;
    color: #0B0B0B !important;
  }

  .insights-feed-categories .filter-link {
    font-weight: 500 !important;
    color: #0B0B0B !important;
    text-decoration: none !important;
  }

  .insights-feed-categories .filter-link.active {
    color: #FFA726 !important;
  }

  /* --- Small Feed Grid Mobile --- */
  .insights-blog-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2.7990vw 2.0356vw !important;
    /* 11px row gap, 8px col gap */
    margin-top: 0 !important;
  }

  .insights-blog-card {
    display: flex !important;
    flex-direction: column !important;
    padding: 7px 8px 14px 8px !important;
    gap: 6px !important;
    border-radius: 5px !important;
    background-color: #E9EAEB !important;
    box-sizing: border-box !important;
    height: 251px !important;
    min-width: 0 !important;
  }

  .insights-blog-card.d-none {
    display: none !important;
  }

  .insights-blog-img-wrap {
    width: 100% !important;
    height: 92px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }

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

  .insights-blog-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .insights-blog-date {
    display: flex !important;
    align-items: center !important;
    height: 16px !important;
    gap: 4px !important;
    margin: 0 !important;
  }

  .insights-blog-date span {
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
    font-size: 8px !important;
    line-height: normal !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-blog-icon {
    width: 13px !important;
    height: 12px !important;
  }

  .insights-blog-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    margin: 0 !important;
  }

  .insights-blog-excerpt {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 10px !important;
    line-height: 14px !important;
    letter-spacing: 0.01em !important;
    color: #292626 !important;
    margin: 0 !important;
  }

  .insights-blog-readmore {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 8px !important;
    line-height: normal !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-decoration: none !important;
    margin: 0 !important;
  }

  .insights-load-more {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 0.01em !important;
    color: #000000 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    width: max-content !important;
    height: auto !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    margin: 6px auto 0 auto !important;
    /* 20px flex gap + 6px margin = 26px total gap */
  }

  /* Cards Section Mobile */
  .cs-cards-section {
    display: flex;
    flex-direction: column;
  }

  .cs-card-wrapper {
    padding: 60px 20px;
    width: 100%;
  }

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

  .cs-card-wrapper.bg-grey {
    background: #E9EAEB;
    height: auto;
    /* Reset fixed height from desktop */
    position: static;
    /* Reset relative positioning */
  }

  .cs-card-wrapper.bg-grey .cs-card {
    position: static;
    /* Reset absolute positioning from desktop */
  }

  .cs-card {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

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

  .cs-card-logo {
    width: 200px;
    height: auto;
  }

  .cs-card-title {
    font-size: 28px;
    line-height: 36px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    color: #000000;
  }

  .cs-card-desc {
    font-size: 18px;
    line-height: 26px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 400;
    color: #292626;
  }

  .cs-card-btn {
    position: relative;
    width: 250px;
    height: 50px;
    border-radius: 25px;
    background: #263238;
    text-decoration: none;
    display: block;
    margin-top: 20px;
  }

  .cs-card-btn-text {
    position: absolute;
    top: 10px;
    left: 65px;
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #FFFFFF;
  }

  .cs-card-btn-icon {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 5px;
    left: 5px;
    border-radius: 20px;
    background: #FFA726;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Success Formula Mobile */
  .cs-success-formula-section {
    padding: 60px 20px;
  }

  .sf-title-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
  }

  .sf-title-part {
    font-size: 32px;
    line-height: 42px;
    text-align: center;
  }

  .sf-title-logo {
    width: 90px;
    height: auto;
  }

  .sf-subtitle {
    position: relative;
    top: -10px;
    font-size: 16px;
    line-height: 24px;
    width: 100%;
  }

  /* The old ~80-line fixed-height/absolute-position override that used to
     live here is gone - the shared base (style-v2.css) now handles every
     page's pre-footer dynamically, including this one. Kept: the one rule
     that was a genuine content difference, not a positioning hack. */
  .insights-page-body .cs-pre-footer .insights-mobile-pre-footer-title {
    color: #FFFFFF !important;
  }

}

/* =============================================================
   TABLET (768-1199px)
   Card excerpts/dates are 0.9722cqi, which is 7.5px at 768. This file
   loads after style-v2.css so it needs its own floor.
   ============================================================= */
@container (min-width: 768px) and (max-width: 1199px) {

  .insights-blog-excerpt,
  .insights-blog-date,
  .insights-blog-title,
  .insights-small-excerpt,
  .insights-large-excerpt,
  .insights-small-date,
  .insights-large-date {
    font-size: max(12px, 0.9722cqi);
  }

  .insights-hero-breadcrumb .breadcrumb-home,
  .insights-hero-breadcrumb .current,
  .insights-hero-breadcrumb a,
  .breadcrumb-services-wrapper .current {
    font-size: max(12px, 1.25cqi);
  }

  .insights-hero-desc {
    font-size: max(12px, 1.5cqi);
  }

  .filter-link,
  .insights-feed-categories a {
    font-size: max(12px, 1.3889cqi);
  }

  .insights-blog-readmore,
  .insights-blog-readmore a {
    font-size: max(12px, 1.4583cqi);
  }

  /* Feed search field + Go button. The base rule sizes the wrapper in vw
     (1.3889vw -> 10.7px at 768) and the controls inherit it, so the floor
     is written in the same unit - a cqi floor did not resolve here. */
  .insights-feed-search,
  .insights-feed-search button,
  .insights-feed-search input,
  .insights-feed-search-form button,
  .insights-feed-search-form input {
    font-size: max(12px, 1.3889vw) !important;
  }
}

/* Search field placeholder - Figma 3929:4897 shows "Search" in solid black,
   not the browser's default grey placeholder. */
.insights-feed-search input::placeholder {
  color: #000000;
  opacity: 1;
}

/* ==========================================================================
   Featured Story + Latest Blogs cards to Figma (web only, 768px+) - 2026-09-25
   Figma "Desktop - 7": Featured 1867:1934/1936, Latest Blogs 1867:1955 (cards 1867:1974 / 1993 / 2013 / 2032).
   Before, card padding/gaps and the Featured image height used vh/dvh, so the cards changed size with the
   window HEIGHT and never matched Figma. Everything below is width-based (/1440), so every web screen shows
   the same proportions.
   ========================================================================== */
@media (min-width: 768px) {
  /* Featured: title -> card 32px (card y 82 - title 50) */
  .insights-featured-container {
    gap: 2.2222vw;
  }

  /* Featured card 1197 x 695, padding 17 / 28 / 44, gap 33 (was 75vw = 1080 wide, vh-based spacing) */
  .insights-featured-card {
    box-sizing: border-box;
    width: 83.125vw;
    height: 48.2639vw;
    padding: 1.1806vw 1.9444vw 3.0556vw;
    gap: 2.2917vw;
    overflow: hidden;
  }

  /* Featured image 1141 x 384 (was 45dvh, capped at 384) */
  .insights-featured-img-wrap {
    height: 26.6667vw;
    min-height: 0;
    max-height: none;
    flex-shrink: 0;
  }

  /* Latest Blogs grid: 2 x 589 + 32 gap = 1210, centred in the 1321 container (Figma row 2 at 55.5 / 676.5).
     Was 1fr 1fr with a 42px gap = two 646.7 cards spanning the full 1321. */
  .insights-latest-grid {
    grid-template-columns: repeat(2, 40.9028vw);
    column-gap: 2.2222vw;
    justify-content: center;
  }

  /* Latest card 589 wide, padding 17 / 20 / 33, gap 33 (582 tall with Figma's text) */
  .insights-latest-card {
    box-sizing: border-box;
    padding: 1.1806vw 1.3889vw 2.2917vw;
    gap: 2.2917vw;
  }

  /* Latest image 549 x 298 (was 335 tall) */
  .insights-latest-img-wrap {
    height: 20.6944vw;
    flex-shrink: 0;
  }

  /* date / headline / excerpt / Read More gap 13 (was 1dvh) */
  .insights-latest-content {
    gap: 0.9028vw;
  }
}

/* Latest card text to Figma 1867:1976 (web only): text block 201 = date 32 + headline 50 + excerpt 46 + Read More 34
   + 3 x 13 gaps, so the card is 582 tall like Figma. Real post titles are longer than Figma's sample, and were
   wrapping to 2 lines + a 3-line excerpt (card 643 tall): headline now 1 line (32px, line-height 50, "..." if
   longer - full title is on the post itself), excerpt 2 lines (18px / 23px, "..."). */
@media (min-width: 768px) {
  .insights-latest-headline {
    line-height: 3.4722vw;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .insights-latest-excerpt {
    line-height: 1.5972vw;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* line-clamp needs display:-webkit-box, but Bootstrap's d-*-block classes on the two excerpt variants force
   display:block !important - override only on the variant that is visible at each width */
@media (min-width: 768px) and (max-width: 991.98px) {
  .insights-latest-excerpt.d-lg-none {
    display: -webkit-box !important;
  }
}

@media (min-width: 992px) {
  .insights-latest-excerpt.d-lg-block {
    display: -webkit-box !important;
  }
}

/* Intro label (web + mobile): shown exactly as typed in the admin (Insights page -> "2. Blogs Intro Section" ->
   Label), no forced capitals - the saved value is now "ARTICLES" (Figma 1867:1931). Before, the admin said
   "articles" while CSS uppercased it on screen. */
.insights-blogs-label {
  text-transform: none !important;
}

/* ==========================================================================
   Insights MOBILE hero heading + intro text to Figma (mobile only, <768) - 2026-09-25
   Figma "iPhone 14 & 15 Pro - 15" (1997:258, 393 wide): heading 1997:274, intro text 1997:277.
   ========================================================================== */
@media (max-width: 767px) {
  /* Heading 1997:274: box 344 wide x 224 at (25, 269), Mona Sans Bold 38.2/43, lines centred vertically ->
     3 lines "UAE Real Estate" (white) / "Insights, Trends" / "& Marketing" (orange). Live box was 278 wide and
     top-aligned -> 5 lines ("UAE Real / Estate / Insights, / Trends & / Marketing"). The fallback/admin title has
     a <br> after "Trends &" (the desktop break); hidden here so the orange part wraps like Figma. Width 330 (not
     344) so " &" drops to line 3 as in Figma (both lines fit 330: 313 / 305px). Top/left unchanged: at an 852px
     tall screen the box already starts at Figma's y 269. */
  .insights-hero-title {
    width: min(330px, calc(100vw - 49px)) !important;
    height: 224px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

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

  /* Breadcrumb: Figma centre y 498 (top 483.5) -> 548 in this block's coordinates (was 588, sized for the
     5-line title) */
  .insights-hero-breadcrumb-mobile {
    top: 548px !important;
  }

  /* Intro 1997:276/277: text at (21, 949) = 97 below the hero (852), Mona Sans Medium 24/35, 0.01em, #0B0B0B,
     352 wide (was Inter 16/22 at 117). Label frame 1997:380 at y 896 = 44 below the hero (was 54), so the
     label -> text gap stays Figma's 18px. */
  .insights-blogs-section {
    padding-top: 24.6819vw !important;
  }

  .insights-blogs-label {
    top: 11.1959vw !important;
  }

  .insights-blogs-text {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 500 !important;
    font-size: 6.1069vw !important;
    line-height: 8.9059vw !important;
    letter-spacing: 0.01em !important;
  }
}

/* Smallest phones (<360): the heading needs 5 lines there (215 of the 224 box), so its last line reached the
   breadcrumb - 20px more room. 360+ phones (3-4 lines) keep Figma's 548. */
@media (max-width: 359px) {
  .insights-hero-breadcrumb-mobile {
    top: 568px !important;
  }
}

/* ==========================================================================
   Insights MOBILE - Latest Blogs: one card per row (was a 2 x 2 grid) - 2026-09-28
   Figma "iPhone" 4050:1736 (393 wide): 4 cards stacked, each 333 wide (30 from each side), 10 apart.
   Card 4050:1574: #E9EAEB, radius 5, padding 7 / 8 / 10, gap 6; image 4050:1575 317 x 160, radius 4.
   Text 4050:1576: date row 16 (icon 13x12, gap 7, Inter 8), title Mona Sans Bold 12 in a 22 row (1 line),
   excerpt Mona Sans 11 / 14 (#292626, 3 lines), Read More Mona Sans SemiBold 9 in a 24 row -> card 287 tall.
   All in vw (/393) so every phone width shows the same card. Mobile only; web unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  .insights-latest-grid {
    grid-template-columns: 1fr !important;
    row-gap: 2.5445vw !important;
    column-gap: 0 !important;
    width: 84.7328vw !important;
    margin: 0 auto !important;
  }

  .insights-latest-card {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 1.7812vw 2.0356vw 2.5445vw !important;
    gap: 1.5267vw !important;
    border-radius: 1.2723vw !important;
  }

  .insights-latest-img-wrap {
    height: 40.7125vw !important;
    border-radius: 1.0178vw !important;
    flex-shrink: 0 !important;
  }

  .insights-latest-content {
    gap: 0 !important;
    min-width: 0 !important;
  }

  .insights-latest-date {
    height: 4.0712vw !important;
    gap: 1.7812vw !important;
  }

  .insights-latest-date span {
    font-size: 2.0356vw !important;
    line-height: 4.0712vw !important;
  }

  .insights-latest-icon {
    width: 3.3079vw !important;
    height: 3.0534vw !important;
    flex-shrink: 0 !important;
  }

  .insights-latest-headline {
    font-size: 3.0534vw !important;
    line-height: 5.598vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 3 lines, then "..."; fixed to 3 lines so all four cards are the same height */
  .insights-latest-excerpt {
    font-size: 2.799vw !important;
    line-height: 3.5623vw !important;
    height: 10.687vw !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .insights-latest-excerpt.d-lg-none {
    display: -webkit-box !important;
  }

  .insights-latest-readmore {
    font-size: 2.2901vw !important;
    line-height: 6.1069vw !important;
    display: block !important;
  }

  /* "Latest Blogs" heading: an older fixed 201px right margin made it wrap to 2 lines on phones under ~375px
     ("Latest / Blogs"). One line on every phone, same left position (21px) as before. */
  .insights-latest-title-wrap {
    margin-right: 0 !important;
  }

  .insights-latest-title {
    white-space: nowrap !important;
  }

  /* Heading -> first card spacing to Figma 4050:1514 / 4050:1736 (2026-09-28): heading block 35 tall (bar 3.77 x 31,
     text 20/30 SemiBold 8 after the bar), first card 27 below it (was a 30 block with a 4 x 24 bar and a 14 gap).
     vw (/393) like the cards, so every phone keeps the same proportions. */
  .insights-latest-container {
    gap: 6.8702vw !important;
  }

  .insights-latest-title-wrap {
    height: 8.9059vw !important;
    gap: 2.0356vw !important;
  }

  .insights-latest-bar {
    width: 0.9567vw !important;
    height: 7.888vw !important;
    flex-shrink: 0 !important;
  }

  .insights-latest-title {
    font-size: 5.089vw !important;
    line-height: 7.6336vw !important;
  }
}

/* ==========================================================================
   Insights MOBILE - "Explore All Insights": one card per row (was 2 per row) - 2026-09-29
   Figma 4050:1735 (393 frame): heading 4050:1530 (35 tall, bar 5.4 x 31, text SemiBold 20/30 orange 11.2 after the bar,
   left 21) -> 29 -> headline 4050:1570 (Bold 20/24, left 20, 352 wide) -> 29 -> 4 cards 4050:1651 (333 x 278, 30 from
   each side, 8 apart). Card 4050:1653: #E9EAEB r5, padding 7 / 8 / 14, gap 6, image 317 x 147 r4; text 4050:1655: date row
   16 (Inter 8, icon 13x12, gap 7), title Bold 10 in a 22 row (1 line), excerpt 10 / 14 (#292626, 3 lines), Read More
   SemiBold 8 in a 24 row. vw (/393) so every phone shows the same card. Mobile only; web unchanged.
   ========================================================================== */
@media (max-width: 767px) {
  .insights-feed-container {
    gap: 7.3791vw !important;
  }

  .insights-feed-title-wrap {
    height: 8.9059vw !important;
    margin-left: 0.7634vw !important;
    gap: 2.8575vw !important;
  }

  .insights-feed-bar {
    width: 1.3741vw !important;
    height: 7.888vw !important;
    flex-shrink: 0 !important;
  }

  .insights-feed-title {
    font-size: 5.089vw !important;
    line-height: 7.6336vw !important;
    white-space: nowrap !important;
  }

  .insights-feed-headline {
    margin-left: 0.5089vw !important;
    width: 89.5674vw !important;
  }

  .insights-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 2.0356vw 0 !important;
    width: 84.7328vw !important;
    margin: 0 auto !important;
  }

  .insights-blog-card {
    height: auto !important;
    width: 100% !important;
    padding: 1.7812vw 2.0356vw 3.5623vw !important;
    gap: 1.5267vw !important;
    border-radius: 1.2723vw !important;
  }

  .insights-blog-img-wrap {
    height: 37.4046vw !important;
    border-radius: 1.0178vw !important;
    flex-shrink: 0 !important;
  }

  .insights-blog-img {
    border-radius: 1.0178vw !important;
  }

  .insights-blog-content {
    gap: 0 !important;
    min-width: 0 !important;
  }

  .insights-blog-date {
    height: 4.0712vw !important;
    gap: 1.7812vw !important;
  }

  .insights-blog-date span {
    font-size: 2.0356vw !important;
    line-height: 4.0712vw !important;
  }

  .insights-blog-icon {
    width: 3.3079vw !important;
    height: 3.0534vw !important;
    flex-shrink: 0 !important;
  }

  .insights-blog-headline {
    font-size: 2.5445vw !important;
    line-height: 5.598vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .insights-blog-excerpt {
    font-size: 2.5445vw !important;
    line-height: 3.5623vw !important;
    height: 10.687vw !important;
    overflow: hidden !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  .insights-blog-excerpt.d-lg-none {
    display: -webkit-box !important;
  }

  .insights-blog-readmore {
    font-size: 2.0356vw !important;
    line-height: 6.1069vw !important;
    display: block !important;
  }
}

/* Featured Story card shows the featured post's own title + excerpt (was fixed
   section copy). The card is a fixed-height design box on tablet/desktop, so
   the text keeps the design's line counts: title 1 line, excerpt 2 lines
   (4 on mobile), ending in "…" when longer - same card size as before. */
.insights-featured-headline {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.insights-featured-excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .insights-featured-excerpt {
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
  }
}

/* Insights - web/tablet: Featured Story + Latest Blogs card headings use the
   Explore All Insights card heading size (24px at 1440, line height 1) - was
   45px / 32px on one line. With the smaller size a title may use up to 2 lines
   ("…" only beyond that). Mobile is unchanged. */
@media (min-width: 768px) {
  .insights-featured-headline,
  .insights-latest-headline {
    font-size: 1.6667vw !important;
    /* 24/1440 = .insights-blog-headline */
    line-height: 1 !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
  }
}

/* ==========================================================================
   Insights - Featured Story + Latest Article cards (2026-10-02)
   1) web: card headings show in full (no "..." / 2-line cut).
   2) web: Featured card centred, a little narrower + shorter; its image is shown
      whole (no top/bottom crop) inside the image area.
   3) web + mobile: heading + description use the Explore All Insights card
      heading / description font, size and weight.
   ========================================================================== */
@media (min-width: 768px) {
  /* 1 + 3: heading = .insights-blog-headline (Mona Sans 700, 24/1440, line height 1), full title */
  .insights-featured-headline,
  .insights-latest-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.6667vw !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    line-clamp: none !important;
  }

  /* 3: description = .insights-blog-excerpt (Mona Sans 400, 14/20 at 1440); still 2 lines then "..." */
  .insights-featured-excerpt,
  .insights-latest-excerpt {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.9722vw !important;
    line-height: 1.3889vw !important;
    letter-spacing: 0.01em !important;
  }

  /* 2: Featured card centred and smaller - was 1197 x 695 at 1440 (fixed height); now 900 wide and its
     height follows the content (about 600 at 1440), so a long title is never cut */
  .insights-featured-container .insights-featured-card {
    width: 62.5vw !important;
    /* 900/1440 */
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .insights-featured-img-wrap {
    height: 23.6111vw !important;
    /* 340/1440 (was 384) */
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  /* whole image, its own shape, centred in the image area, rounded like before */
  .insights-featured-img {
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 1.8056vw !important;
    /* 26/1440 */
  }
}

/* tablet: same 12px floor the Explore description has (768-1199) */
@media (min-width: 768px) and (max-width: 1199px) {
  .insights-featured-excerpt,
  .insights-latest-excerpt {
    font-size: max(12px, 0.9722vw) !important;
  }
}

/* 3 (mobile): = Explore card mobile heading (10/22 at 393, 700, one line "...") + description (10/14 at 393) */
@media (max-width: 767px) {
  .insights-featured-headline,
  .insights-latest-headline {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.5445vw !important;
    line-height: 5.598vw !important;
    letter-spacing: 0.01em !important;
  }

  .insights-featured-excerpt,
  .insights-latest-excerpt {
    font-family: 'Mona Sans', sans-serif !important;
    font-weight: 400 !important;
    font-size: 2.5445vw !important;
    line-height: 3.5623vw !important;
    letter-spacing: 0.01em !important;
  }
}

/* Featured Story card (web) - 2026-10-02 update: width + image width back to the earlier size (card 1197 wide at
   1440, image the full card width), only the height is smaller: image area 340 tall (was 384), card height follows
   its content (was fixed 695 with empty space at the bottom). */
@media (min-width: 768px) {
  .insights-featured-container .insights-featured-card {
    width: 83.125vw !important;
    /* 1197/1440 - as before */
  }

  .insights-featured-img-wrap {
    display: block !important;
    overflow: hidden !important;
    border-radius: 1.8056vw !important;
    /* 26/1440 - as before */
  }

  .insights-featured-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }
}

/* Featured Story card (web): the whole image shows, at the full card width - the image area takes the
   image's own shape (no top/bottom crop), so the card is as tall as the image needs. */
@media (min-width: 768px) {
  .insights-featured-img-wrap {
    height: auto !important;
  }

  .insights-featured-img {
    height: auto !important;
    display: block !important;
  }
}

/* Featured Story card (web) - back to the earlier size (client 2026-10-02): card 1197 x 695 at 1440, image area
   1141 x 384 filled by the image (object-fit cover, like before). Overrides the three Featured blocks above;
   headings/description fonts from those blocks stay. Mobile unchanged. */
@media (min-width: 768px) {
  .insights-featured-container .insights-featured-card {
    width: 83.125vw !important;
    /* 1197/1440 */
    height: 48.2639vw !important;
    /* 695/1440 */
  }

  .insights-featured-img-wrap {
    height: 26.6667vw !important;
    /* 384/1440 */
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }

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

/* TABLET (2026-10-09) - tablets now get the web content at 768-991px (d-lg
   switch in style-v2.css), but the rule above still forced the PHONE excerpt
   visible there, so Latest Blogs cards showed the excerpt twice and ran into
   "Read More". Same as 992px+: web excerpt only. */
@media (min-width: 768px) and (max-width: 991.98px) and (min-height: 501px) {
  .insights-latest-excerpt.d-lg-none {
    display: none !important;
  }

  .insights-latest-excerpt.d-lg-block {
    display: -webkit-box !important;
  }
}

/* TABLET (768-1199px): the excerpts are floored at 12px but kept the
   desktop's ~10-14px line-height, so the lines touched. 15px minimum. */
@media (min-width: 768px) and (max-width: 1199px) and (min-height: 501px) {
  .insights-featured-excerpt,
  .insights-latest-excerpt {
    line-height: max(15px, 1.3889vw) !important;
  }
}