/* ==========================================================================
   Mobile Responsive Styles
   Breakpoint: max-width 768px
   Based on Figma mobile designs (~403px viewport)
   ========================================================================== */

/* ---- Desktop-only: hide mobile-only elements ---- */
.header__menu-toggle {
  display: none;
}

.client-item__card-image {
  display: none;
}

/* ---- Mobile Menu Overlay (hidden by default, slides in) ---- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background: var(--blue-100);
  display: flex;
  flex-direction: column;
  padding: 16px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-menu--open {
  transform: translateX(0);
}

.mobile-menu__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 60px;
  flex-shrink: 0;
}

.mobile-menu__logo {
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--green-1200);
  text-decoration: none;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1.1;
  color: var(--green-1200);
}

.mobile-menu__close-icon {
  width: 16px;
  height: 24px;
  flex-shrink: 0;
}

.mobile-menu__close-icon img {
  width: 100%;
  height: 100%;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mobile-menu__link {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 2.75rem;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--green-1200);
  text-decoration: none;
  padding: 8px 0;
}

.mobile-menu__bars {
  position: relative;
  width: 100%;
  height: 120px;
  flex-shrink: 0;
  margin-top: auto;
}

.mobile-menu__bar {
  position: absolute;
  left: 0;
  bottom: 0;
}

.mobile-menu__bar--green {
  width: 100%;
  height: 120px;
  background: var(--green-800);
}

.mobile-menu__bar--pink {
  width: 80%;
  height: 90px;
  background: var(--pink-200);
}

.mobile-menu__bar--orange {
  width: 60%;
  height: 60px;
  background: var(--yellow-600);
}

.mobile-menu__bar--blue {
  width: 40%;
  height: 30px;
  background: var(--blue-200);
}

/* ==========================================================================
   Mobile Breakpoint
   ========================================================================== */
@media (max-width: 768px) {

  /* ===================== Global Layout ===================== */
  .page__inner {
    margin: 8px;
  }

  .page::after {
    border-width: 8px;
  }

  .main-wrapper {
    padding-top: 0;
  }

  .sections {
    gap: 48px;
  }

  /* ===================== Header ===================== */
  .header-wrapper {
    height: 63px;
    padding: 0;
  }

  .header {
    top: calc(8px + var(--admin-bar-h, 0px));
    left: 8px;
    right: 8px;
    padding: 0 9px;
    height: 63px;
    overflow: clip;
  }

  .header__logo {
    height: 42px;
    font-size: 2.625rem;
    align-items: center;
  }

  /* Always show logo text on mobile (no scroll animation) */
  .header__logo-text {
    opacity: 1;
  }

  /* Hide desktop navigation */
  .header__nav-wrapper {
    display: none;
  }

  /* Hide desktop bracket icon */
  .header__lang-icon {
    display: none;
  }

  /* Show mobile menu toggle */
  .header__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 53px;
    padding: 12px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    line-height: 1.1;
    color: var(--green-1200);
  }

  .header__menu-toggle-icon {
    display: none;
  }

  /* ===================== Hero (Homepage) ===================== */
  .hero-area__top {
    padding-bottom: 0;
  }

  .hero {
    margin: 0;
    aspect-ratio: auto;
    align-self: stretch;
    position: relative;
    display: block;
  }

  .hero__bars {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
    width: 100%;
    left: auto;
    top: auto;
    bottom: auto;
  }

  .hero__bar {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .hero__bar--blue {
    display: none;
  }

  .hero__bar--orange {
    width: 100%;
    height: 194px;
    margin-top: 12px;
  }

  .hero__bar--pink {
    width: 92.2%;  /* 356/386 */
    height: 169px;
  }

  .hero__bar--green {
    width: 83.4%;  /* 322/386 */
    height: 127px;
  }

  /* Hide desktop hero title on mobile — logo is in the header */
  .hero__title {
    display: none;
  }

  /* Hide scroll spacer on mobile */
  .hero-area__scroll-spacer {
    display: none;
  }

  /* Disable scroll animation GPU hints on mobile */
  .hero__title--animating {
    will-change: auto;
  }

  .hero__bars--animating {
    will-change: auto;
  }

  /* ===================== Intro ===================== */
  .intro {
    padding: 0 9px;
  }

  .intro__text {
    font-size: 2.125rem; /* 34px — Mob/Med/H2 */
    line-height: 1.2;
    letter-spacing: -0.68px;
    font-weight: var(--fw-medium);
  }

  /* ===================== Photos ===================== */
  .photos {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0;
    justify-content: center;
    scrollbar-width: none;
  }

  .photos::-webkit-scrollbar {
    display: none;
  }

  .photos__item {
    flex: 0 0 288px;
    scroll-snap-align: start;
    aspect-ratio: auto;
    height: 397px;
    border-radius: var(--radius-card);
  }

  .photos__item--video,
  .photos__item:nth-child(2) {
    flex: 0 0 240px;
  }

  /* ===================== Section Label (shared) ===================== */
  .section-label {
    gap: 8px;
  }

  .section-label__bracket-char {
    font-size: 1.625rem; /* 26px */
    color: var(--blue-600);
    letter-spacing: -0.13px;
  }

  .section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .section-label__bracket {
    width: 11px;
  }

  /* ===================== Services ===================== */
  .services {
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
    align-items: flex-start;
  }

  .services__cards {
    width: 100%;
    align-items: stretch;
  }

  .services__list {
    max-width: 100%;
    gap: 8px;
  }

  .service-card {
    width: 100%;
  }

  .service-card__inner {
    padding: 10px 12px 12px;
  }

  .service-card__content {
    flex-direction: column;
    gap: 6px;
  }

  .service-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    font-weight: var(--fw-semibold);
    line-height: 1.22;
  }

  .service-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .service-card__desc-col {
    gap: 16px;
  }

  .btn {
    padding: 8px 12px;
    gap: 6px;
  }

  .btn__label {
    font-size: 0.8125rem; /* 13px — Mob/SBld/Sm-Cap */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  .btn__arrow {
    font-family: var(--font-inter);
    font-weight: var(--fw-semibold);
    font-size: 1rem;
    letter-spacing: -0.08px;
    line-height: 1.4;
  }

  /* ===================== Clients / Cases (mobile) ===================== */
  .clients {
    flex-direction: column;
    min-height: auto;
    padding: 0 8px;
    overflow: visible;
  }

  .clients__bg {
    display: none;
  }

  .clients__content {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    background: none;
    gap: 12px;
  }

  .clients__list {
    gap: 12px;
  }

  /* Override desktop spacing for all client-items */
  .client-item,
  .client-item:first-child,
  .client-item:last-child,
  .client-item:not(:first-child):not(:last-child) {
    padding: 0;
  }

  .client-item {
    display: flex;
    flex-direction: column;
    border-bottom: none;
    position: relative;
    gap: 0;
    cursor: default;
    overflow: hidden;
    border-radius: var(--radius-small);
  }

  /* Card image — shown on mobile, hidden on desktop */
  .client-item__card-image {
    display: block;
    width: 100%;
    height: 247px;
    position: relative;
    overflow: hidden;
  }

  .client-item__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Logo row overlays the card image at bottom-left */
  .client-item__logo-row {
    position: absolute;
    top: calc(247px - 12px - 38px); /* image height − padding − logo height */
    left: 12px;
    z-index: 2;
  }

  .client-item__logo-box {
    width: auto;
    height: 38px;
    padding: 0 6.909px;
    background: var(--base-200);
    border-radius: var(--radius-small);
    gap: 6.909px;
    transition: none;
  }

  .client-item__name {
    opacity: 1;
    transition: none;
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
    line-height: 1.4;
  }

  .client-item__quote {
    font-size: 1.375rem; /* 22px — Mob/Med/H5 */
    font-weight: var(--fw-medium);
    line-height: 1.22;
    background: var(--blue-100);
    padding: 10px 12px 12px;
    border-radius: 0 0 var(--radius-small) var(--radius-small);
  }

  .clients__image {
    display: none;
  }

  /* ===================== Insights ===================== */
  .insights-cta-wrapper {
    gap: 48px;
    padding-top: 0;
    align-items: stretch;
  }

  .insights__inner {
    padding: 24px 16px;
  }

  .insights__layout {
    flex-direction: column;
    gap: 12px;
    max-width: 100%;
    padding-left: 0;
  }

  .insights__label {
    width: auto;
  }

  .insights__cards-wrapper {
    width: 100%;
    flex: 0 0 auto; /* reset desktop flex: 1 that stretches vertically */
  }

  .insights__cards-inner {
    padding-right: 0;
  }

  .insights__cards {
    flex-direction: column;
    gap: 12px;
  }

  /* Insight cards on mobile: grid layout (thumb left, text right) */
  .insight-card {
    width: 100%;
    flex: 0 0 auto; /* reset desktop flex: 1 0 0 that stretches in column */
    display: grid;
    grid-template-columns: 105px 1fr;
    grid-template-rows: 1fr auto;
    background: var(--base-100);
    padding: 8px 10px;
    gap: 0;
    border-radius: var(--radius-card);
    align-items: start;
  }

  /* Stretch card's content wrapper becomes transparent to grid */
  .insight-card--stretch .insight-card__content {
    display: contents;
  }

  .insight-card__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 105px;
    height: 111px;
    flex-shrink: 0;
    border-radius: var(--radius-small);
    overflow: hidden;
  }

  .insight-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .insight-card__title {
    grid-column: 2;
    align-self: start;
    padding-left: 12px;
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .insight-card__date {
    grid-column: 2;
    align-self: end;
    padding-left: 12px;
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    font-weight: var(--fw-regular);
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  /* ===================== CTA ===================== */
  .cta {
    padding: 0 8px;
    padding-left: 8px; /* override desktop 33.8% */
    gap: 16px;
  }

  .cta__text-wrapper {
    padding-right: 0;
    max-width: 100%;
  }

  .cta__heading {
    font-size: 1.75rem; /* 28px — Mob/Med/H3 */
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.28px;
  }

  .cta__button {
    font-size: 0.9375rem; /* 15px */
    font-weight: var(--fw-semibold);
    letter-spacing: 0.15px;
    padding: 12px 16px;
    line-height: 1.4;
  }

  /* ===================== Footer ===================== */
  /* Bars-bg sits exactly above the bottom bar (~53px tall),
     occupying the decoration zone (242px tall) */
  .footer__bars-bg {
    height: 242px;
    top: auto;
    bottom: 53px;
  }

  .footer__container {
    display: flex;
    flex-direction: column;
  }

  .footer__content {
    order: 1;
  }

  /* Footer bar colors differ on mobile (Figma component override) */
  .footer__bar--orange {
    height: 242px;
    width: 100%;
    top: 0;
  }

  .footer__bar--green {
    top: 45px;
    height: 197px;
    width: 88.6%; /* 357/403 */
    background: var(--pink-200); /* pink on mobile, teal on desktop */
  }

  .footer__bar--blue {
    top: 96px;
    height: 146px;
    width: 77.4%; /* 312/403 */
    background: var(--green-800); /* teal on mobile, light blue on desktop */
  }

  .footer__bar--white {
    top: 140px;
    height: 102px;
    width: 66.5%; /* 268/403 */
    background: var(--blue-100); /* blue-100 on mobile, white on desktop */
  }

  /* Footer info: blue-100 bg on mobile (white on desktop) */
  .footer__info {
    padding: 24px 16px;
    background: var(--blue-100);
  }

  .footer__info-inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    height: auto;
    padding: 0;
    gap: 0;
  }

  .footer__info-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 243px;
  }

  .footer__info-block {
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .footer__info-text {
    font-size: 0.9375rem; /* 15px */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.075px;
    white-space: normal;
  }

  /* Hide arrow spans; show underline on link text blocks */
  .footer__info-link-arrow {
    display: none;
  }

  .footer__info-block:nth-child(4) .footer__info-text,
  .footer__info-block:nth-child(5) .footer__info-text {
    text-decoration: underline;
    text-decoration-color: #95CEFF;
    text-underline-offset: 2px;
  }

  .footer__partner-logo {
    height: 50px;
    width: 105.846px;
  }

  /* Footer decoration: bars area with Leene text */
  .footer__decoration {
    height: 242px;
    position: relative;
  }

  /* Sizes match Figma imgGroup13's actual content (not the empty SVG canvas):
     Leene letters span 225/403 ≈ 56% wide, bracket spans 36.5/403 ≈ 9% wide */
  .footer__leene-text {
    width: 56%;
    left: 16px;
    bottom: 16px;
    top: auto;
  }

  .footer__corner-mark {
    right: 16px;
    top: 21px;
    width: 9%;
  }

  /* Bottom bar */
  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 16px;
    white-space: nowrap;
    font-size: 0.9375rem; /* 15px */
    letter-spacing: 0.075px;
  }

  .footer__bottom-links {
    gap: 0;
    justify-content: space-between;
    flex: 1;
    padding-left: 32px;
  }

  /* Only show Privacyverklaring and Gedragscode on mobile */
  .footer__bottom-links a:first-child,
  .footer__bottom-links a:last-child {
    display: none;
  }

  /* Underline on bottom bar links */
  .footer__bottom-links a {
    text-decoration: underline;
    text-decoration-color: #95CEFF;
    text-underline-offset: 2px;
  }

  /* ===================== Expertises Page ===================== */
  /* Figma mobile node 717:8036 — 386px viewport, gap-48px between sections */
  .expertises-page .expertises-content {
    gap: 48px;
    padding: 48px 0;
  }

  .expertises-hero {
    padding: 0 9px;
    gap: 16px;
    width: 100%;
  }

  .expertises-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .expertises-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Section: stack label above cards */
  .expertises-section {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 8px;
  }

  .expertises-section__label {
    width: auto;
    gap: 8px;
  }

  /* Mobile section label text: 18px Mob/SBld/P (desktop is 22px) */
  .expertises-section__label-text {
    font-size: 1.125rem; /* 18px */
    letter-spacing: 0.09px;
    padding: 10px 0;
  }

  .expertises-cards {
    width: 100%;
    gap: 8px;
  }

  /* Card stays HORIZONTAL on mobile (text left, image right) — matches Figma */
  .expertise-card {
    width: 100%;
    border-radius: var(--radius-small);
  }

  .expertise-card__inner {
    flex-direction: row;
    gap: 17px;
    padding: 12px;
    align-items: stretch;
  }

  .expertise-card__content {
    flex-direction: column;
    justify-content: space-between;
    width: 164px;
    flex: 0 0 164px;
    padding: 0;
    gap: 0;
  }

  .expertise-card__text {
    gap: 8px;
  }

  .expertise-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .expertise-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .expertise-card__btn {
    padding: 8px 12px;
    gap: 6px;
    border-radius: var(--radius-card);
  }

  .expertise-card__btn-label {
    font-size: 0.8125rem; /* 13px — Mob/SBld/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  .expertise-card__btn-arrow {
    font-size: 1rem; /* 16px */
    letter-spacing: -0.08px;
    line-height: 1.4;
  }

  .expertise-card__image {
    width: auto;
    height: auto;
    flex: 1 1 0;
    min-width: 0;
    align-self: stretch;
  }

  .expertise-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* CTA on expertises page — full width with mobile padding */
  .expertises-page .cta {
    width: 100%;
    padding: 0 8px;
  }

  /* ===================== Werkwijze Page ===================== */
  .werkwijze__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .werkwijze-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .werkwijze-hero__content {
    gap: 16px;
  }

  .werkwijze-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .werkwijze-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  /* Static centered layout (Figma mobile node 717:7618):
     middle photo prominent, side photos peek ~6% each side */
  .werkwijze-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 7px;
    padding: 0;
  }

  .werkwijze-photos__item,
  .werkwijze-photos__item:last-child {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    margin: 0;
  }

  .werkwijze-photos__item:nth-child(2) {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
  }

  .werkwijze-photos__image {
    height: auto;
    aspect-ratio: 326 / 378;
    border-radius: 2px;
  }

  .werkwijze-photos__caption {
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
  }

  .werkwijze-photos__arrow {
    width: 14.5px;
    height: 14.5px;
  }

  /* Wat we doen cards: white bg, no button, compact padding (Figma mobile) */
  .page--werkwijze .services {
    padding: 0 16px;
  }

  .page--werkwijze .service-card__inner {
    background: var(--base-100);
    padding: 10px 12px;
    gap: 0;
  }

  .page--werkwijze .service-card__content {
    gap: 2px;
  }

  .page--werkwijze .service-card__desc-col {
    gap: 2px;
  }

  .page--werkwijze .service-card .btn {
    display: none;
  }

  /* Werkwijze Clients */
  .werkwijze-clients__inner {
    padding: 24px 16px;
  }

  .werkwijze-clients__layout {
    flex-direction: column;
    gap: 12px;
  }

  .werkwijze-clients__label {
    width: auto;
  }

  .werkwijze-clients__content {
    gap: 12px;
    width: 100%;
  }

  .werkwijze-clients__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  .werkwijze-clients__logos {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    padding-right: 0;
    justify-content: flex-start;
  }

  .werkwijze-clients__logo-box {
    width: calc(50% - 6px);
  }

  /* ===================== Case Detail Page ===================== */
  /* Figma mobile node 717:7523 — 386px viewport, gap-48px between sections */
  .case-page .case-body {
    gap: 48px;
    padding-bottom: 0;
    align-items: stretch;
  }

  .case-page .case-upper {
    gap: 40px;
  }

  .case-page .case-hero-meta {
    gap: 40px;
  }

  .case-page .case-hero-with-image {
    flex-direction: column;
    gap: 16px;
  }

  .case-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .case-hero__text {
    gap: 16px;
  }

  .case-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .case-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Hero image: full bleed within page__inner */
  .case-hero-image {
    width: 100%;
    padding: 0;
  }

  .case-hero-image__img {
    width: 100%;
    height: 278px;
    max-width: none;
    object-fit: cover;
    border-radius: 3px;
  }

  /* Meta: only Klant shown on mobile (Figma hides service tags) */
  .case-meta {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    padding: 0 16px;
  }

  .case-meta__client-label {
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    letter-spacing: 0.15px;
  }

  .case-meta__client-name {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
  }

  .case-meta__services {
    display: none;
  }

  /* Section label: Mob/SBld/P */
  .case-section-label__bracket-char {
    font-size: 1.625rem; /* 26px */
    letter-spacing: -0.13px;
  }

  .case-section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
  }

  /* Content rows: stack and full width */
  .case-content-row {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .case-content-row__body {
    width: 100%;
    padding-right: 0;
  }

  .case-content-row__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Result section: blue-100 panel */
  .case-result {
    padding: 24px 16px;
    gap: 16px;
    align-items: flex-start;
    overflow: visible;
  }

  .case-result__top {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .case-result__heading-col {
    width: 100%;
    gap: 16px;
  }

  .case-result__heading {
    font-size: 1.75rem; /* 28px — Mob/SBld/H3 */
    line-height: 1.2;
    letter-spacing: -0.28px;
  }

  .case-result__heading-desc {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .case-result__items {
    width: 100%;
    gap: 4px;
  }

  .case-result__item {
    padding: 14px 12px 16px;
    border-radius: 2px;
  }

  .case-result__item-text {
    font-size: 1.25rem; /* 20px — Mob/Med/H6 */
    font-weight: var(--fw-medium);
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* Gallery: stack vertically with 370/249 aspect ratio */
  .case-gallery {
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 16px;
    overflow: visible;
  }

  .case-gallery__item--large,
  .case-gallery__item--medium {
    width: 100%;
    height: auto;
    aspect-ratio: 370 / 249;
    border-radius: 3px;
  }

  .case-gallery__item--large img,
  .case-gallery__item--medium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Quote: body above attribution (column-reverse since HTML has attribution first) */
  .case-quote {
    flex-direction: column-reverse;
    gap: 12px;
    margin: 0;
    padding: 24px 0 0;
    width: 100%;
  }

  .case-quote__body {
    width: 100%;
    padding-right: 0;
  }

  .case-quote__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .case-quote__attribution {
    gap: 8px;
  }

  .case-quote__attribution-text {
    padding: 10px 0;
  }

  .case-quote__attribution-name {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .case-quote__attribution-role {
    font-size: 1.125rem; /* 18px — Mob/Reg/P */
    font-weight: var(--fw-regular);
    line-height: 1.4;
    letter-spacing: 0;
  }

  /* CTA on case page */
  .case-page .cta {
    padding: 0 16px 48px;
  }

  /* ===================== Insight Detail Page ===================== */

  /* Page layout: tighter section gap on mobile (Figma: 48px between blocks) */
  .insight-body {
    gap: 48px;
    padding-bottom: 48px;
  }

  /* Breadcrumb hidden on mobile (not in Figma mobile design) */
  .insight-page .insight-breadcrumb {
    display: none;
  }

  /* Hero: stack image first, then text below (Figma mobile order) */
  .insight-hero {
    flex-direction: column-reverse;
    gap: 24px;
  }

  .insight-hero__text {
    width: 100%;
    height: auto;
    padding: 0 8px;
    gap: 48px;
  }

  .insight-hero__content {
    gap: 48px;
  }

  .insight-hero__heading {
    gap: 9px;
  }

  .insight-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .insight-hero__date {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .insight-hero__author-name,
  .insight-hero__author-role {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .insight-hero__image {
    width: 100%;
    height: 278px;
    padding: 0;
  }

  .insight-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Article section (blue-100 bg) */
  .insight-article {
    padding: 40px 12px;
  }

  .insight-article__inner {
    flex-direction: column;
    gap: 48px;
    width: 100%;
    margin: 0;
  }

  /* Share row: horizontal "Delen via | URL | Linkedin" */
  .insight-share {
    width: auto;
    padding: 0;
    order: 1;
  }

  .insight-share__inner {
    flex-direction: row;
    gap: 5px;
    align-items: center;
  }

  .insight-share__label {
    font-size: 1.125rem; /* 18px — Dsktp/SBld/Cap */
    padding: 6px 12px 6px 0;
  }

  .insight-share__buttons {
    flex-direction: row;
    gap: 5px;
  }

  .insight-share__button {
    font-size: 1.125rem; /* 18px */
    padding: 6px 12px;
    border-radius: 3px;
  }

  /* Content body */
  .insight-content {
    order: 2;
    gap: 48px;
  }

  .insight-content__section {
    width: 100%;
    gap: 16px;
  }

  .insight-content__section > p,
  .insight-content__text p,
  .insight-content__list-item p {
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .insight-content__heading {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .insight-content__list {
    gap: 4px;
  }

  .insight-content__list-item {
    padding: 8px 12px;
  }

  /* Related insights: stack label above cards */
  .insight-related {
    padding: 0 8px;
  }

  .insight-related__inner {
    flex-direction: column;
    gap: 12px;
    padding-left: 0;
    width: 100%;
  }

  .insight-related__label {
    width: auto;
  }

  .insight-related__cards {
    width: 100%;
  }

  .insight-related__cards-inner {
    width: 100%;
    padding-right: 0;
  }

  /* Section label text smaller on mobile within insight-related */
  .insight-related .case-section-label__text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
  }

  /* CTA on insight page: align with article side padding */
  .insight-page .cta {
    padding: 0 8px;
  }

  /* ===================== Over (About) Page ===================== */
  /* Figma mobile node 717:7754 — 386px viewport, gap-48px between sections */
  .over__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 0;
  }

  /* Override desktop 22px section-label for over page — Figma mobile uses 18px (Mob/SBld/P) */
  .page--over .section-label__text {
    font-size: 1.125rem;
    letter-spacing: 0.09px;
  }

  .over-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .over-hero__content {
    gap: 16px;
  }

  .over-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .over-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    font-weight: var(--fw-regular);
  }

  /* Static centered layout (Figma mobile node 717:7769):
     middle photo prominent, side photos clipped to peek */
  .over-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 6.594px;
    padding: 0;
  }

  .over-photos__item--left,
  .over-photos__item--right {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    height: auto;
    aspect-ratio: 390 / 320;
    border-radius: 2px;
  }

  .over-photos__item--center {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
    height: auto;
    aspect-ratio: 326 / 320;
    border-radius: 2px;
  }

  /* Waarom section */
  .over-waarom {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .over-waarom__label {
    width: auto;
  }

  .over-waarom__content {
    width: 100%;
  }

  .over-waarom__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  /* Geloven section */
  .over-geloven {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .over-geloven__label {
    width: auto;
  }

  .over-geloven__content {
    gap: 24px;
    width: 100%;
    max-width: 100%;
  }

  .over-geloven__cards {
    gap: 8px;
    max-width: 100%;
  }

  .value-card {
    width: 100%;
    padding: 12px 12px 16px;
    border-radius: 2px;
  }

  .value-card__content {
    gap: 8px;
    flex-direction: column;
  }

  .value-card__title-col,
  .value-card__desc-col {
    width: 100%;
    align-items: flex-start;
  }

  .value-card__title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .value-card__desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  .over-geloven__closing {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    max-width: 100%;
  }

  /* Team section — blue-100 bg wrapper with 24/16 padding (Figma mobile node 717:7801) */
  .over-team {
    width: 100%;
  }

  .over-team__inner {
    background: var(--blue-100);
    padding: 24px 16px;
    gap: 48px;
    align-items: stretch;
  }

  .over-team__header {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .over-team__label {
    width: auto;
  }

  .over-team__intro-text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .over-team__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
  }

  /* Reset feature card grid spans for 2-col mobile */
  .team-feature--1,
  .team-feature--2,
  .team-feature--3 {
    grid-column: span 1;
    grid-row: span 1;
  }

  .team-card {
    width: 100%;
    border-radius: 3px;
  }

  .team-card__photo {
    aspect-ratio: 274 / 284;
    height: auto;
    border-radius: 3px;
  }

  .team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .team-card__name {
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
    padding: 4px 8px 0;
  }

  .team-card__role {
    font-size: 0.8125rem; /* 13px — Mob/Med/Sm-Cap */
    line-height: 1.1;
    letter-spacing: 0.26px;
    padding: 0 8px 8px;
  }

  /* Vacatures section in Over page — blue-100 bg on mobile to match Figma */
  .over-vacatures {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 24px 16px;
    background: var(--blue-100);
  }

  .over-vacatures__label {
    width: auto;
  }

  .over-vacatures__content {
    width: 100%;
    max-width: 100%;
  }

  .over-vacatures__list {
    width: 100%;
    gap: 8px;
    max-width: 100%;
  }

  /* Vacancy row — match Figma mobile node 717:7853
     Title flex-shrinks; hours hidden (Figma render shows only title + arrow);
     blue-200 arrow box pinned to the right via the row's justify-between. */
  .vacancy-row {
    border-radius: 3px;
  }

  .vacancy-row__info {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 12px;
    gap: 17px;
  }

  .vacancy-row__title {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
  }

  /* Hours clipped out of view on mobile (Figma design intent) */
  .vacancy-row__hours {
    display: none;
  }

  .vacancy-row__arrow {
    width: 51px;
    height: 51px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 8px;
    background: var(--blue-200);
  }

  .vacancy-row__arrow img {
    width: 24px;
    height: 24px;
  }

  /* Over page CTA — align with side padding, add top padding since Vacatures fills its bg */
  .page--over .cta {
    padding: 24px 16px 48px;
  }

  /* ===================== WerkenBij Page ===================== */
  /* Figma mobile node 717:7922 — 386px viewport, gap-48px between sections */
  .werkenbij__body {
    gap: 48px;
    padding-top: 32px;
    padding-bottom: 48px;
  }

  /* Override desktop 22px section-label — Figma mobile uses 18px (Mob/SBld/P) */
  .page--werkenbij .section-label__text {
    font-size: 1.125rem;
    letter-spacing: 0.09px;
  }

  .werkenbij-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .werkenbij-hero__content {
    gap: 16px;
  }

  .werkenbij-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
  }

  .werkenbij-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  /* Static centered layout (Figma mobile node 717:7937):
     middle photo prominent, side photos clipped to peek */
  .werkenbij-photos {
    flex-wrap: nowrap;
    overflow: hidden;
    justify-content: center;
    align-items: flex-start;
    gap: 6.594px;
    padding: 0;
  }

  .werkenbij-photos__item,
  .werkenbij-photos__item:last-child {
    flex: 0 0 101vw; /* sides: 390/386 from Figma — clipped to peek */
    height: auto;
    aspect-ratio: 390 / 320;
    border-radius: 2px;
  }

  .werkenbij-photos__item:nth-child(2) {
    flex: 0 0 84.5vw; /* middle: 326/386 from Figma — fully visible */
    aspect-ratio: 326 / 320;
  }

  /* USP section */
  .werkenbij-usp {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
    align-items: flex-start;
  }

  .werkenbij-usp__label {
    width: auto;
  }

  .werkenbij-usp__cards {
    max-width: 100%;
    gap: 12px;
  }

  .werkenbij-usp__card {
    width: 100%;
    padding: 12px 12px 16px;
    border-radius: 2px;
  }

  .werkenbij-usp__card-title {
    font-size: 1.375rem; /* 22px — Mob/SBld/H5 */
    line-height: 1.22;
    letter-spacing: 0;
  }

  .werkenbij-usp__card-desc {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    line-height: 1.4;
    letter-spacing: 0.075px;
  }

  /* Seek section */
  .werkenbij-seek {
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
    width: 100%;
    align-items: flex-start;
  }

  .werkenbij-seek__label {
    width: auto;
  }

  .werkenbij-seek__content {
    width: 100%;
  }

  .werkenbij-seek__text {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
    padding-right: 0;
  }

  /* Vacatures section */
  .werkenbij-vacatures {
    width: 100%;
  }

  .werkenbij-vacatures__inner {
    flex-direction: column;
    gap: 12px;
    padding: 24px 16px;
  }

  .werkenbij-vacatures__label {
    width: auto;
  }

  .werkenbij-vacatures__list {
    width: 100%;
    gap: 8px;
  }

  /* Vacature card keeps row layout on mobile (title | hours | arrow) */
  .vacature-card {
    flex-direction: row;
    padding: 0 0 0 12px;
    gap: 17px;
    align-items: center;
    border-radius: 3px;
  }

  .vacature-card__info {
    flex: 1 1 0;
    min-width: 0;
    gap: 17px;
  }

  .vacature-card__title {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding: 13px 0;
    font-size: 0.9375rem; /* 15px — Mob/SBld/Cap */
    line-height: 1.4;
    letter-spacing: 0.15px;
  }

  /* Hours are clipped out of view on mobile (Figma design intent) */
  .vacature-card__hours {
    display: none;
  }

  .vacature-card__arrow {
    width: 51px;
    height: 51px;
    align-self: stretch;
    padding: 8px;
  }

  /* ===================== Vacancy Detail Page ===================== */
  .vacancy__body {
    gap: 48px;
    padding: 32px 0 48px;
  }

  .vacancy-hero {
    padding: 0 16px;
    gap: 24px;
  }

  .vacancy-hero__title {
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .vacancy-hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* Photos — horizontal scroll */
  .vacancy-photos {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    padding: 0 16px;
    scrollbar-width: none;
  }

  .vacancy-photos::-webkit-scrollbar {
    display: none;
  }

  .vacancy-photos__item {
    flex: 0 0 75vw;
    height: 350px;
    scroll-snap-align: start;
  }

  .vacancy-photos__item--wide {
    flex: 0 0 80vw;
  }

  .vacancy-photos--bottom .vacancy-photos__item {
    flex: 0 0 70vw;
    height: 280px;
  }

  .vacancy-photos--bottom .vacancy-photos__item--first {
    flex: 0 0 75vw;
  }

  /* Text sections */
  .vacancy-text-section {
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 0 16px;
  }

  .vacancy-text-section__label {
    width: auto;
  }

  .vacancy-text-section__content {
    max-width: 100%;
    padding-right: 0;
  }

  .vacancy-text-section__text {
    font-size: 1.125rem;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }

  .vacancy-list {
    padding-left: 24px;
  }

  .vacancy-list li {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  .vacancy-link {
    font-size: 1.125rem;
  }

  /* ===================== Contact Page ===================== */
  .contact-content {
    gap: 40px;
    padding: 40px 16px 80px;
  }

  .contact-content__title {
    font-size: 2.75rem;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }

  .contact-columns {
    flex-direction: column;
    gap: 40px;
  }

  .contact-cta {
    width: 100%;
  }

  .contact-cta__heading {
    font-size: 1.375rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .contact-cta__button {
    font-size: 1.125rem;
    padding: 12px 16px;
  }

  .contact-details {
    width: 100%;
  }

  .contact-details__group {
    padding: 16px 0;
  }

  .contact-details__label {
    font-size: 0.8125rem;
    letter-spacing: 0.125em;
  }

  .contact-details__link,
  .contact-details__value {
    font-size: 1.125rem;
    line-height: 1.4;
  }

  /* ===================== Breadcrumbs (shared) ===================== */
  .breadcrumb,
  .case-breadcrumb,
  .insight-breadcrumb,
  .themas-breadcrumb__text {
    font-size: 0.875rem;
  }

  /* ===================== Themas Page =====================
     Figma mobile node 717:7390 — 386px viewport, gap-48px between sections */

  .themas-page .themas-body {
    overflow: hidden;
  }

  .themas-page .themas-content {
    gap: 48px;
    padding: 8px 0 0;
  }

  /* Hero */
  .themas-hero {
    padding: 0 9px;
    gap: 24px;
    width: 100%;
  }

  .themas-breadcrumb__icon {
    width: 20px;
    height: 20px;
  }

  .themas-hero__text {
    gap: 16px;
  }

  .themas-hero__title {
    font-size: 2.75rem; /* 44px — Mob/Med/H1 */
    line-height: 1.1;
    letter-spacing: -1.32px;
    max-width: 100%;
  }

  .themas-hero__subtitle {
    font-size: 1.375rem; /* 22px — Mob/Reg/H5 */
    line-height: 1.22;
    letter-spacing: 0;
    max-width: 100%;
    font-weight: var(--fw-regular);
  }

  /* Photo strip — overflow-center: 3 photos centered, side photos clipped */
  .themas-photos-wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 0;
  }

  .themas-photos {
    display: flex;
    gap: 6.594px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    padding: 0;
    width: max-content;
  }

  .themas-photo {
    flex: 0 0 auto;
    flex-shrink: 0;
    gap: 2.638px;
  }

  /* Side photos: 390/386 ≈ 101vw — overflow viewport edges */
  .themas-photo--1 .themas-photo__image,
  .themas-photo--3 .themas-photo__image {
    width: 101vw;
    max-width: none;
    height: auto;
    aspect-ratio: 390 / 378;
    border-radius: 2px;
  }

  /* Middle photo: 326/386 ≈ 84.5vw — fully visible */
  .themas-photo--2 .themas-photo__image {
    width: 84.5vw;
    max-width: none;
    height: auto;
    aspect-ratio: 326 / 378;
    border-radius: 2px;
  }

  .themas-photo__caption {
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
    white-space: normal;
  }

  /* Intro */
  .themas-intro {
    flex-direction: column;
    gap: 12px;
    padding: 0 8px;
    width: 100%;
    align-items: flex-start;
  }

  .themas-intro__label {
    width: auto;
    flex: 0 0 auto;
  }

  .themas-intro__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .themas-intro__body {
    width: 100%;
    padding-right: 0;
  }

  .themas-intro__body p {
    font-size: 1.25rem; /* 20px — Mob/Reg/H6 */
    line-height: 1.3;
    letter-spacing: 0;
  }

  .themas-intro__body p + p {
    margin-top: 1.3em;
  }

  /* Bracket label sizes (shared) */
  .themas-bracket__char {
    font-size: 1.625rem; /* 26px */
    letter-spacing: -0.13px;
  }

  /* ===== Cases section — mobile shows full image cards with chip overlay ===== */
  .themas-cases-insights {
    width: 100%;
  }

  .themas-cases {
    width: 100%;
    height: auto;
    padding: 0 8px;
    gap: 12px;
    background: transparent;
    align-items: flex-start;
    overflow: visible;
  }

  .themas-cases__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .themas-cases__list {
    width: 100%;
    gap: 12px;
  }

  .themas-case {
    width: 100%;
  }

  .themas-case + .themas-case {
    border-top: none;
  }

  .themas-case__link {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .themas-case:first-child .themas-case__link,
  .themas-case:last-child .themas-case__link {
    padding: 0;
  }

  /* Image card: 247px tall with overlayed chip at bottom-left */
  .themas-case__image {
    display: block;
    width: 100%;
    height: 247px;
    background: var(--base-100);
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    position: relative;
  }

  .themas-case__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .themas-case__chip {
    position: absolute;
    /* image height (247) − chip height (38) − padding (12) = 197 */
    top: 197px;
    left: 12px;
    z-index: 2;
  }

  .themas-case__name {
    font-size: 0.9375rem; /* 15px — Mob/Med/Cap */
    letter-spacing: 0.075px;
    line-height: 1.4;
  }

  /* Title block: blue-100 panel beneath image */
  .themas-case__title {
    background: var(--blue-100);
    padding: 10px 12px 12px;
    font-size: 1.375rem; /* 22px — Mob/Med/H5 */
    font-weight: var(--fw-medium);
    line-height: 1.22;
    letter-spacing: 0;
    border-radius: 0 0 2px 2px;
  }

  /* ===== Insights section ===== */
  .themas-insights {
    padding: 24px 8px;
  }

  .themas-insights__inner {
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0;
  }

  .themas-insights__label {
    width: auto;
  }

  .themas-insights__label-text {
    font-size: 1.125rem; /* 18px — Mob/SBld/P */
    letter-spacing: 0.09px;
    line-height: 1.4;
  }

  .themas-insights__cards {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  /* Insight cards: grid layout (105px thumb left, text right) */
  .themas-insight {
    width: 100%;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 105px 1fr;
    grid-template-rows: 1fr auto;
    padding: 8px 10px;
    gap: 0;
    border-radius: 2px;
  }

  .themas-insight__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 105px;
    height: 111px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .themas-insight__title {
    grid-column: 2;
    align-self: start;
    padding-left: 12px;
    font-size: 1.125rem; /* 18px — Mob/Med/P */
    font-weight: var(--fw-medium);
    line-height: 1.4;
    letter-spacing: 0.09px;
  }

  .themas-insight__date {
    grid-column: 2;
    align-self: end;
    padding-left: 12px;
    margin-top: 0;
    font-size: 0.8125rem; /* 13px — Mob/Reg/Sm-Cap */
    letter-spacing: 0.26px;
    line-height: 1.1;
  }

  /* ===== CTA on themas page ===== */
  .themas-page .cta {
    width: 100%;
    padding: 0 8px;
    padding-left: 8px; /* override desktop 33.8% */
  }

}