/* ============================================================
   RESPONSIVE
   Mobile and tablet overrides only.
   Desktop is the base. These styles override when needed.
   Never redefine entire components — only necessary changes.
   ============================================================ */


/* --------------------------------------------------------
   LARGE DESKTOP  (≥ 1400px)
   -------------------------------------------------------- */

@media (min-width: 1400px) {

}

/* --------------------------------------------------------
   LARGE DESKTOP  (≤ 1399px)
   -------------------------------------------------------- */

@media (max-width: 1399px) {

  .insights-hero .hero__content {
    padding-bottom: var(--space-32);
  }

  .insights-hero .hero__image {
    width: 900px;
  }

}


/* --------------------------------------------------------
   DESKTOP  (≥ 1200px)
   -------------------------------------------------------- */

@media (min-width: 1200px) {

  /* Home banner: keep quote on single line at xl container (1140px) */
  .simple-banner--home .simple-banner__quote {
    font-size: var(--font-size-xl-lg);
  }

}


/* --------------------------------------------------------
   TABLET LANDSCAPE  (≤ 1199px)
   -------------------------------------------------------- */

@media (max-width: 1199px) {

  .hero__title {
    font-size: var(--font-size-4xl);
  }

  /* --- Error Hero (404) --- */

  .error-hero__image-wrap {
    right: 0;
  }

  .error-hero__image {
    width: 260px;
  }
}


/* --------------------------------------------------------
   TABLET LANDSCAPE  (≤ 1199px)
   Slider activates here — 3 items per view.
   -------------------------------------------------------- */

@media (max-width: 1199px) {

  /* --- Proof Bar --- */

  .proof-bar {
    padding: var(--space-8) 0;
  }

  .proof-bar__card {
    min-height: 288px;
  }

  /* --- B2B background --- */

  .b2b__lines {
    width: 680px;
    top: 8%;
  }

  /* --- Insights Hero --- */

  .insights-hero .hero__image-wrap {
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }

  .insights-hero .hero__image {
    width: 750px;
    position: unset;
  }

}


/* --------------------------------------------------------
   TABLET PORTRAIT  (≤ 991px)
   Mobile breakpoint — layout switches here.
   -------------------------------------------------------- */

@media (max-width: 991px) {

  /* --- Proof Bar header --- */

  .proof-bar__header {
    margin-bottom: var(--space-6);
  }

  .proof-bar__title {
    font-size: var(--font-size-2xl);
  }

  .proof-bar__description {
    font-size: var(--font-size-sm);
  }

  /* --- Brand Narrative --- */

  .brand-narrative__text + .brand-narrative__text {
    margin-top: var(--space-4);
  }

  /* --- CTA Banner --- */

  .cta-banner__inner {
    padding: var(--space-10) var(--space-6);
    text-align: center;
  }

  .cta-banner__heading {
    font-size: var(--font-size-xl);
  }

  .cta-banner__actions {
    align-items: center;
  }

  .cta-banner__actions .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* --- Team --- */

  .team {
    padding: var(--space-16) 0;
  }

  .team__title {
    font-size: var(--font-size-2xl);
  }

  /* Mobile featured card:
     image (50%) + header (50%) on top row; bio full-width below.
     display:contents on .team__featured-content lets header and body
     participate directly in the parent flex-wrap layout. */

  .team__featured {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }

  .team__featured-image {
    flex: 0 0 40%;
    max-width: 40%;
    min-height: auto;
    padding-top: 0;
  }

  .team__featured-content {
    display: contents;
  }

  .team__featured-header {
    flex: 0 0 60%;
    max-width: 60%;
    padding: var(--space-4);
    align-self: center;
  }

  .team__featured-body {
    flex: 0 0 100%;
    padding: var(--space-4) 0 0 0;
    gap: var(--space-4);
  }

  .team__featured-name {
    font-size: var(--font-size-xl-sm);
  }

  .section-kicker {
    display: block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .team__photo-wrap {
    width: 140px;
    height: 140px;
  }

  /* --- Brand Narrative --- */

  .brand-narrative {
    padding: var(--space-16) 0;
  }

  .brand-narrative__title {
    font-size: var(--font-size-2xl);
  }

  .brand-narrative__text + .brand-narrative__text {
    margin-top: var(--space-4);
  }

  /* --- About Stat Bar --- */

  .stat-bar {
    padding: var(--space-8) 0;
  }

  .stat-bar__stat {
    font-size: var(--font-size-2xl);
  }

  .stat-bar__icon {
    width: 60px;
    height: 60px;
  }

  /* --- Case Studies --- */

  .case-studies {
    padding: var(--space-16) 0;
  }

  .case-studies__title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--space-8);
  }

  .case-studies__bg {
    display: none;
  }

  /* --- How It Works --- */

  .how-it-works {
    padding: var(--space-16) 0;
  }

  .how-it-works__title {
    font-size: var(--font-size-2xl);
    text-align: center;
    margin-bottom: var(--space-8);
  }

  /* --- Differentiator --- */

  .differentiator {
    padding: var(--space-12) 0;
  }

  .differentiator__content {
    padding-right: 0;
  }

  .differentiator__title {
    font-size: var(--font-size-2xl);
  }

  .differentiator__title br {
    display: none;
  }

  /* --- Proof Bar --- */

  .proof-bar {
    padding: var(--space-8) 0;
  }

  .proof-bar__card {
    min-height: 280px;
  }

  /* --- Problem Framing --- */

  .problem-framing {
    padding: var(--space-8) 0;
  }

  .problem-framing__title {
    font-size: var(--font-size-2xl);
  }

  /* --- B2B background --- */

  .b2b__lines {
    width: 480px;
    top: 14%;
  }

  /* --- Banner --- */

  .simple-banner {
    padding-bottom: var(--space-16);
  }

  .simple-banner__inner {
    padding: var(--space-12) var(--space-6);
  }

  .simple-banner__quote {
    font-size: var(--font-size-xl);
  }

  /* --- Hero --- */

  .hero {
    position: relative;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero__content {
    position: relative;
    z-index: 1;
    padding-top: var(--space-10);
    padding-bottom: var(--space-20);
  }

  .hero__title {
    font-size: var(--font-size-2xl);
  }

  .hero__tagline {
    font-size: var(--font-size-lg);
  }

  .hero__text {
    font-size: var(--font-size-sm);
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .hero__image-col {
    position: absolute;
    bottom: 0;
    right: -16px;
    width: 55%;
    z-index: 0;
    pointer-events: none;
  }

  .hero__image-wrap {
    justify-content: flex-end;
  }

  .hero__divider {
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  }

  .hero__image {
    width: 100%;
    max-width: 100%;
  }

  /* --- Hero stacked variant (mobile: image stacks below content, not absolute) --- */

  .hero--stacked {
    overflow: visible;
  }

  .hero--stacked .hero__image-col {
    position: static;
    width: auto;
    right: auto;
    bottom: auto;
    z-index: auto;
    pointer-events: auto;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .hero--stacked .hero__content {
    padding-bottom: var(--space-6);
  }

  .hero--stacked .hero__image-wrap {
    justify-content: center;
    padding-bottom: var(--space-10);
  }

  /* --- Insights Hero (mobile) --- */

  .insights-hero .row {
    display: flex;
  }

  .insights-hero .hero__content {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .insights-hero .hero__image-col {
    position: static;
    width: 33.3333%;
    top: auto;
    bottom: auto;
    right: auto;
    z-index: auto;
  }

  .insights-hero .hero__image {
    position: absolute;
    width: 90%;
    max-width: unset;
    top: 50%;
    transform: translate(0%, -50%);
  }

  /* --- Error Hero (404) --- */

  .error-hero__inner {
    min-height: auto;
    padding: var(--space-8) 0;
  }

  .error-hero__content {
    text-align: left;
    align-items: flex-start;
    width: 100%;
  }

  .error-hero__top {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
    margin-bottom: var(--space-2);
  }

  .error-hero__code {
    font-size: 5rem;
  }

  .error-hero__image-mobile img {
    max-width: 150px;
    height: auto;
  }

  .error-hero__title {
    font-size: var(--font-size-2xl);
  }

  .error-hero__text {
    max-width: 100%;
  }

  .error-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-3);
    justify-content: flex-start;
  }

  .error-hero__actions .btn-primary,
  .error-hero__actions .btn-ghost {
    width: 100%;
    text-align: center;
  }

  /* --- Smaller logo on mobile --- */
  .site-nav__logo img {
    height: 30px;
    width: auto;
  }

  /* Show hamburger toggle */
  .site-nav__toggle {
    display: flex;
  }

  /* Collapse nav list into panel below navbar */
  .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: auto;
    gap: 0;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    z-index: var(--z-dropdown);
    transition:
      max-height var(--transition-normal),
      opacity var(--transition-normal);
  }

  /* Viewport-safe open state: never taller than the remaining screen space */
  .site-nav__list.is-open {
    max-height: calc(100dvh - var(--header-height-actual, var(--header-height)));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 1;
  }

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

  .site-nav__link {
    display: block;
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-base);
  }

  /* --- Mobile dropdown: accordion style --- */

  /* Remove hover bridge — not needed on touch */
  .site-nav__item--has-dropdown::after {
    display: none;
  }

  /* Reset desktop absolute positioning; become accordion block */
  .site-nav__dropdown {
    position: static;
    min-width: unset;
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: var(--color-surface);
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--transition-normal);
  }

  .site-nav__item--has-dropdown.is-open .site-nav__dropdown {
    max-height: 400px;
  }

  /* Chevron rotates via .is-open on mobile */
  .site-nav__item--has-dropdown.is-open .site-nav__chevron {
    transform: rotate(180deg);
  }

  /* Parent link: fill remaining row space */
  .site-nav__link--parent {
    flex: 1;
    width: auto;
  }

  .site-nav__dropdown-toggle {
    width: 44px;
    height: 44px;
    padding: var(--space-3);
  }

  /* Dropdown links: indented to show hierarchy */
  .site-nav__dropdown-link {
    padding: var(--space-3) var(--space-12);
    font-size: var(--font-size-sm);
    color: var(--color-subtle);
    white-space: normal;
  }

  .site-nav__dropdown-link:hover {
    background-color: var(--color-border);
  }

  /* Switch CTA to outlined style on mobile */
  .site-nav__cta {
    padding: 8px 16px;
    font-size: var(--font-size-xs);
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
  }

  .site-nav__cta:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
  }

  /* Announcement bar: text left, CTA right */
  .announcement-bar__inner {
    justify-content: space-between;
    gap: var(--space-4);
  }

  .announcement-bar__text {
    text-align: left;
    flex: 1;
  }

  /* Hide "New Research:" label on mobile */
  .announcement-bar__label {
    display: none;
  }

  /* --- Trustbar --- */

  .trustbar {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .trustbar__intro {
    margin-bottom: var(--space-6);
    font-size: var(--font-size-sm);
  }

}


/* --------------------------------------------------------
   MOBILE LARGE  (≤ 767px)
   -------------------------------------------------------- */

@media (max-width: 767px) {

  /* --- Insights Hero --- */

  .insights-hero .hero__image {
    width: 100%;
  }

  /* --- Case Studies --- */

  .case-studies {
    padding: var(--space-12) 0;
  }

  .case-studies__title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-6);
  }

  .case-studies__cta .btn-ghost {
    width: 100%;
    justify-content: center;
  }

  /* --- How It Works --- */

  .how-it-works {
    padding: var(--space-12) 0;
  }

  .how-it-works__title {
    font-size: var(--font-size-xl);
  }

  .how-it-works__cta .btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* --- Differentiator --- */

  .differentiator {
    padding: var(--space-10) 0;
  }

  .differentiator__heading {
    margin-bottom: var(--space-8);
  }

  .differentiator__card {
    padding: var(--space-8) var(--space-6);
    min-height: unset;
  }

  .differentiator__quote {
    font-size: var(--font-size-base);
  }

  /* --- Proof Bar --- */

  .proof-bar {
    padding: var(--space-10) 0;
  }

  .proof-bar__card {
    min-height: 248px;
    padding: var(--space-10) var(--space-4);
  }

  /* --- B2B background --- */

  .b2b__lines {
    width: 300px;
    top: 22%;
  }

  /* --- Banner --- */

  .simple-banner__inner {
    padding: var(--space-10) var(--space-4);
    border-radius: var(--radius-lg);
  }

  .simple-banner__quote {
    font-size: var(--font-size-lg);
  }

  /* --- Inquiry Section --- */

  .inquiry-section {
    padding: var(--space-12) 0 var(--space-16);
  }

  .inquiry-panel {
    gap: var(--space-6);
  }

  .inquiry-panel__title {
    font-size: var(--font-size-xl);
  }

  .inquiry-panel__stat-value {
    font-size: var(--font-size-2xl);
  }

  .inquiry-form__submit {
    width: 100%;
    text-align: center;
  }

  .cf7-success-modal {
    padding: var(--space-4);
    align-items: flex-end;
  }

  .cf7-success-modal__dialog {
    padding: var(--space-10) var(--space-6) var(--space-8);
    max-width: 100%;
  }

  .cf7-success-modal__title {
    font-size: var(--font-size-xl);
  }

  .cf7-success-modal__icon svg {
    width: 64px;
    height: 64px;
  }

}


/* --------------------------------------------------------
   MOBILE SMALL  (≤ 575px)
   -------------------------------------------------------- */

@media (max-width: 505px) {

  /* --- Insights Hero --- */

  .insights-hero .hero__image {
    width: 120%;
  }

}

@media (max-width: 450px) {

  /* --- Insights Hero --- */

  .insights-hero .hero__image {
    width: 155%;
  }

}

@media (max-width: 575px) {

  /* --- B2B background --- */

  .b2b__lines {
    width: 220px;
    top: 24%;
  }

  /* --- Footer --- */

  .site-footer__tagline {
    font-size: var(--font-size-xl);
  }

  .site-footer__watermark {
    padding: var(--space-5) 0;
  }

  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
  }

  .site-footer__legal {
    justify-content: center;
  }

}


/* --------------------------------------------------------
   MOBILE XS  (≤ 375px)
   -------------------------------------------------------- */

@media (max-width: 375px) {

  .site-nav__actions {
    gap: var(--space-1);
  }

  .site-nav__cta {
    padding: 8px;
  }

  .announcement-bar__text {
    font-size: var(--font-size-xs);
  }

}


/* ============================================================
   DOWNLOAD HERO — RESPONSIVE
   ============================================================ */

/* Tablet landscape (≤ 1199px) — title already handled globally */

@media (max-width: 991px) {

  /* Reposition decorative bg lines for mobile — top-right only */
  .download-hero__bg {
    width: 50%;
    height: 50%;
    top: 0;
    right: 0;
  }

  .download-hero__bg img {
    object-position: right center;
  }

  /* Reset hero__content padding — no absolutely positioned
     image below, so the large bottom padding is not needed */
  .download-hero .hero__content {
    padding-top: var(--space-10);
    padding-bottom: 0;
  }

  /* Add bottom padding to the section itself */
  .download-hero {
    padding-bottom: var(--space-8);
  }

  /* Full-width button on mobile */
  .download-hero .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .download-hero .hero__actions .btn-primary {
    text-align: center;
  }

  /* Reduce card padding on mobile */
  .signup-card {
    padding: var(--space-8);
  }

  .signup-card__title {
    font-size: var(--font-size-xl);
  }

}


/* ============================================================
   INSIGHTS CARD GRID — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .insights-grid {
    padding: var(--space-8) 0 var(--space-12);
  }

  .insights-grid__cta {
    margin-top: var(--space-8);
  }

  .insights-grid__cta .btn-ghost {
    width: 100%;
  }

}

/* ============================================================
   FEATURED POST — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .featured-post {
    padding: var(--space-8) 0 var(--space-6);
  }

  .featured-post .section-kicker {
    text-align: center;
  }

  /* Stack image above content on mobile */
  .featured-post__card {
    flex-direction: column;
  }

  .featured-post__image-link {
    flex: none;
  }

  .featured-post__content {
    padding: var(--space-6);
  }

  .featured-post__title {
    font-size: var(--font-size-xl);
  }

}


/* ============================================================
   FILTER BAR — Responsive
   ============================================================ */

@media (max-width: 991px) {

  /* Hide desktop tabs, show mobile select */
  .filter-bar__tabs {
    display: none;
  }

  .filter-bar__select-wrap {
    display: flex;
    align-items: center;
    position: relative;
  }

  .filter-bar__separator {
    display: none;
  }

  .filter-bar__inner {
    padding: 8px 0;
    border-top: 1px solid #EDEDED;
    border-bottom: 1px solid #EDEDED;
  }

}

/* ============================================================
   RESOURCES SLIDER — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .resources-slider {
    padding: var(--space-16) 0;
  }

  .resources-slider__title {
    font-size: var(--font-size-2xl);
    text-align: center;
  }

}

@media (max-width: 767px) {

  .resources-slider {
    padding: var(--space-12) 0;
  }

  .resources-slider__title {
    font-size: var(--font-size-xl);
  }

}

/* ============================================================
   ARTICLE HERO — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .article-hero {
    padding: var(--space-10) 0 var(--space-8);
  }

  .article-hero__title {
    font-size: var(--font-size-3xl);
  }

  .article-hero__subtitle {
    max-width: 100%;
  }

}

@media (max-width: 767px) {

  .article-hero__title {
    font-size: var(--font-size-2xl);
  }

}

/* ============================================================
   ARTICLE BODY — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .article-body {
    margin: 0 0 var(--space-12);
  }

  .cta-banner--article {
    margin: var(--space-12) 0;
  }

  /* Sidebar becomes static and shows above content on mobile */
  .article-sidebar {
    position: static;
    margin-bottom: var(--space-6);
  }

  .article-stats {
    grid-template-columns: 1fr;
  }

  .article-section__title {
    font-size: var(--font-size-lg);
  }

  .article-section--card {
    padding: var(--space-4);
  }

  .article-pull-quote {
    padding: var(--space-6);
  }

  .article-pull-quote__text {
    font-size: var(--font-size-base);
  }

  .article-quote-block {
    padding: var(--space-6);
  }

  .article-quote-block__text {
    font-size: var(--font-size-lg);
  }

  .article-summary {
    padding: var(--space-6);
  }

}

@media (max-width: 767px) {

  .article-body {
    margin: 0 0 var(--space-10);
  }

  .cta-banner--article {
    margin: var(--space-10) 0;
  }

}

/* ============================================================
   ARTICLE PREV/NEXT — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .article-prevnext {
    display: none;
  }

}

/* ============================================================
   RELATED ARTICLES — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .related-articles {
    padding: var(--space-12) 0;
  }

  .related-articles__title {
    font-size: var(--font-size-xl);
  }

  /* Show nav row on tablet and mobile */
  .related-articles__nav {
    display: flex;
  }

}

@media (max-width: 767px) {

  .related-articles {
    padding: var(--space-10) 0;
  }

  .related-articles__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

}

/* ============================================================
   ARTICLE HERO IMAGE — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .article-hero-image {
    padding: 0 0 var(--space-12);
  }

  .article-hero-image__wrap {
    aspect-ratio: 16 / 9;
  }

}

@media (max-width: 767px) {

  .article-hero-image {
    padding: 0 0 var(--space-10);
  }

  .article-hero-image__wrap {
    aspect-ratio: 4 / 3;
  }

}

/* ============================================================
   ARTICLE TIP — Responsive
   ============================================================ */

@media (max-width: 767px) {

  .article-tip {
    padding: var(--space-5) var(--space-6);
  }

}

/* ============================================================
   ARTICLE DATA TABLE — Responsive
   ============================================================ */

@media (max-width: 767px) {

  .article-data-table__title {
    font-size: var(--font-size-lg);
  }

  /*
   * Stacked-card technique: hide <thead>, convert each <tr> to a card,
   * each <td> renders as a two-column grid where ::before shows the
   * column label pulled from the data-label attribute set in the template.
   */
  .article-data-table__wrap table,
  .article-data-table__wrap thead,
  .article-data-table__wrap tbody,
  .article-data-table__wrap tr,
  .article-data-table__wrap th,
  .article-data-table__wrap td {
    display: block;
  }

  .article-data-table__wrap thead {
    display: none;
  }

  .article-data-table__wrap tbody tr {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .article-data-table__wrap tbody tr:last-child {
    border-bottom: none;
  }

  .article-data-table__wrap tbody td {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-bottom: none;
    border-right: none;
  }

  .article-data-table__wrap tbody td::before {
    display: block;
    content: attr(data-label);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-heading);
  }

}

/* ============================================================
   ARTICLE BONUS — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .article-bonus {
    padding: var(--space-8) var(--space-8);
  }

  .article-bonus__title,
  .article-bonus__list,
  .article-bonus__outro {
    max-width: 100%;
  }

  .article-bonus__bg {
    width: 160px;
    opacity: 0.6;
  }

}

@media (max-width: 767px) {

  .article-bonus {
    padding: var(--space-6);
  }

  .article-bonus__title {
    font-size: var(--font-size-lg);
  }

  .article-bonus__bg {
    display: none;
  }

}


/* ============================================================
   SERVICE CARDS — RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

  .service-cards {
    padding: var(--space-12) 0;
  }

  .service-cards__header {
    margin-bottom: var(--space-8);
  }

  .service-cards__heading {
    font-size: var(--font-size-xl-lg);
  }

  .service-cards__callout {
    margin-top: var(--space-8);
    padding: var(--space-8);
  }

  .service-cards__callout-title {
    font-size: var(--font-size-xl-lg);
  }

  .service-cards__callout-image img {
    max-width: 200px;
    margin-bottom: var(--space-4);
  }

  .service-cards__callout-quote {
    font-size: var(--font-size-xl);
  }

}

@media (max-width: 767px) {

  .service-cards {
    padding: var(--space-10) 0;
  }

  .service-cards__callout {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
  }

  .service-cards__callout-title {
    font-size: var(--font-size-xl);
  }

  .service-card {
    padding: var(--space-6);
  }

  .content-card {
    padding: var(--space-6);
  }

  .approach-card {
    padding: var(--space-6);
  }

  .service-cards__callout-quote {
    font-size: var(--font-size-lg);
  }

  .service-cards__callout-dots {
    width: 30px;
  }

}


/* ============================================================
   PROCESS STEPS — RESPONSIVE
   ============================================================ */

@media (max-width: 991px) {

  .process-steps {
    padding: var(--space-16) 0 var(--space-20) 0;
  }

  .process-steps__content {
    padding-right: 0;
    margin-bottom: var(--space-6);
  }

  .process-steps__title {
    font-size: var(--font-size-2xl);
  }

  .process-steps__text {
    max-width: 100%;
  }

  .process-steps__bg {
    width: 100%;
  }

}

@media (max-width: 767px) {

  .process-steps {
    padding: var(--space-12) 0 var(--space-16) 0;
  }

  .process-steps__title {
    font-size: var(--font-size-xl-lg);
  }

  .process-steps__num {
    font-size: var(--font-size-2xl);
    min-width: 2.5rem;
  }

  .process-steps__item-title {
    font-size: var(--font-size-base);
  }

}


/* ============================================================
   WHY REDPOINT — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .why-redpoint {
    padding: var(--space-12) 0;
  }

  .why-redpoint__heading {
    font-size: var(--font-size-2xl);
    max-width: 100%;
  }

  .why-features {
    margin-top: var(--space-12);
    margin-bottom: var(--space-12);
    overflow: visible; /* Allow Splide pagination to render below the track */
  }
  
  .why-redpoint__cards {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }

  .why-redpoint__testimonial-wrap {
    margin-top: var(--space-10);
  }

}

@media (max-width: 767px) {

  .why-redpoint {
    padding: var(--space-10) 0;
  }

  .why-redpoint__heading {
    font-size: var(--font-size-xl);
  }

  .why-redpoint__intro {
    font-size: var(--font-size-sm);
  }

  .why-features {
    margin-top: var(--space-10);
    margin-bottom: var(--space-10);
  }

  .why-redpoint__cards {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .work-card {
    padding: var(--space-6);
  }

}


/* ============================================================
   FAQ SECTION — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .faq-section {
    padding: var(--space-12) 0;
  }

  .faq-section__title {
    font-size: var(--font-size-2xl);
    max-width: 100%;
  }

}

@media (max-width: 767px) {

  .faq-section {
    padding: var(--space-10) 0;
  }

  .faq-section__title {
    font-size: var(--font-size-xl-lg);
  }

  .faq-item__question {
    font-size: var(--font-size-sm);
  }

}

/* ============================================================
   PROCESS GRID — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .process-grid {
    padding: var(--space-12) 0;
  }

  .process-grid__header {
    margin-bottom: var(--space-3);
  }

  .process-grid__title {
    font-size: var(--font-size-2xl);
  }

  .process-grid__step--divided {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .process-grid__steps {
    border-top: none;
  }

  .process-grid__step {
    /*border-top: 1px solid rgba(255, 255, 255, 0.12);*/
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    /*padding-left: 0;
    padding-right: 0;*/
  }

}

@media (max-width: 767px) {

  .process-grid {
    padding: var(--space-10) 0;
  }

  .process-grid__num {
    font-size: var(--font-size-2xl);
  }

}


/* ============================================================
   RESEARCH FEATURED + RESEARCH CARD — Responsive
   ============================================================ */

@media (max-width: 991px) {

  .research-featured {
    padding: var(--space-8);
  }

  .research-featured__client {
    font-size: var(--font-size-xl);
  }

  .research-featured__stats {
    margin-top: var(--space-5);
    gap: var(--space-8);
  }

  .research-featured__stat-value {
    font-size: var(--font-size-2xl);
  }

  .why-redpoint__research-cards {
    margin-top: var(--space-4);
  }

}

@media (max-width: 767px) {

  .research-featured {
    padding: var(--space-6);
  }

  .research-featured__client {
    font-size: var(--font-size-lg);
  }

  .research-card {
    padding: var(--space-6);
  }


}

/* ============================================================
   PAGE DATA TABLE — Responsive
   ============================================================ */

@media (max-width: 767px) {

  .page-data-table {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .page-data-table__title {
    font-size: var(--font-size-2xl);
  }

  .page-data-table__subtitle {
    font-size: var(--font-size-lg);
  }

}