.wp-block-yummo-section-experts {
  --c-primary:       var(--wp--preset--color--primary);
  --c-primary-hover: var(--wp--preset--color--primary-hover);
  --c-cream:         var(--wp--preset--color--cream);
  --c-cream-lt:      var(--wp--preset--color--cream-light);
  --c-pink:          var(--wp--preset--color--pink);
  --c-mint:          var(--wp--preset--color--mint);
  --c-mint-el:       var(--wp--preset--color--mint-el);
  --r-card:          var(--wp--custom--radius--card);
  --r-btn:           var(--wp--custom--radius--button);
  --r-img:           var(--wp--custom--radius--image);
  --ease:            var(--wp--custom--transition--ease);
  --dur:             var(--wp--custom--transition--dur);
  --page-px:         var(--wp--preset--spacing--page-x);
  --section-py:      var(--wp--preset--spacing--section);

  background: var(--c-cream);
  /* Section reserves a full viewport so the scroll-snap stop lands
     cleanly and so the GSAP pin in view.js has room to hold the
     viewport while the track translates horizontally. Mobile drops
     to Figma's natural sizing below since the pin doesn't engage. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Gap between header (.section-experts__inner) and the full-width
     .experts-viewport, which is now a direct child of the section so
     it can span beyond the 90rem cap of __inner. */
  gap: 2.5rem;
  /* Site-wide canon: 80px mobile visible gap from section top to first
     content (.section-title — no rotation, padding applied literally).
     Desktop overrides to 11rem (176px) in the @media block below. */
  padding-block: 5rem var(--section-py);
  /* Scroll-snap is only enabled at mobile widths. On desktop the
     section is GSAP-pinned (see view.js): if scroll-snap is active
     during a fast scroll from the top of the page, the snap-stop
     can land the section's top at the viewport top BEFORE
     ScrollTrigger recalculates the pin's start position — the cards
     then briefly appear above the fixed site-header until the pin
     catches up. Disabling snap on desktop lets the pin own the stop
     point, matching the feature-auto-layout-swipe block which also
     disables snap when its `.is-fals-jacked` class is active. */
  @media (max-width: 47.9375rem) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* No `container-type` here on purpose: `contain: layout` (which
     `container-type` implies) would make this section a containing
     block for `position: fixed` descendants, breaking GSAP's default
     fixed-pinning of `.experts-viewport`. Layout queries below use
     plain @media — section width tracks the viewport anyway. */

  @media (max-width: 47.9375rem) {
    min-height: 40.875rem;
    content-visibility: auto;
    contain-intrinsic-size: auto 40.875rem;
  }

  .section-experts__inner {
    /* __inner now wraps only the header; .experts-viewport is a sibling
       so it can extend beyond this 90rem cap on wide desktops. */
    /* max-width: 90rem; */
    margin-inline: auto;
    width: 100%;
  }

  .section-experts__header {
    /* Figma 5821:2355 → title text starts at section-x = 32 (content
       padding) + 40 (title block pl) = 72px from the section's left
       edge. Symmetric padding-inline keeps the header column tucked
       within the design's 728px title block on both sides. */
    padding-inline: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 48rem;
  }

  .section-title {
    font-size: var(--h2);
    font-weight: 700;
    line-height: 0.9;
  }

  .section-desc {
    font-size: 18px;
    line-height: 22px;
    max-width: 21.5rem;
  }

  /* Per designer's simplified spec: one autolayout, no breakpoint for
     card sizing. Cards are `flex: 1 0 0; min-width: 12.5rem` (see
     main.css), so on viewports where the row's total min-width
     exceeds the viewport the track grows past the viewport edge; on
     wider viewports cards grow to fill the row with no empty gaps.

     `overflow-x: clip` is intentional on desktop: the GSAP scroll-
     jack pin in view.js owns horizontal motion and we don't want a
     competing native scrollbar. Mobile drops to `overflow-x: auto`
     below so touch swipe still works there (pin is matchMedia'd to
     ≥ 48rem). */
  .experts-viewport {
    width: 100%;
    overflow-x: clip;
    overflow-y: visible;
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    container-type: inline-size;
  }

  .experts-track {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;             /* 24px — Figma */
    padding-block: 1rem;
    /* Figma 5821:2355: title sits at section-x = 72px. Track padding
       aligns the first card's edge with the title text on desktop;
       mobile collapses to the 1rem screen-edge contract. */
    padding-inline: 4.5rem;
    /* min-width: 100% lets the row fill the viewport on wide screens
       (so `flex: 1 0 0` cards can grow into the spare space and we
       avoid empty trailing gaps at 2.5k). width: max-content lets the
       row push past the viewport when the cards' combined min-widths
       overflow it; the GSAP pin in view.js then translates this
       overflowing track horizontally on vertical scroll. */
    min-width: 100%;
    width: max-content;
  }

  @media (min-width: 48rem) {
    /* Site-wide canon: 176px desktop visible gap from section top to
       first content. Bottom padding kept fluid per original Maestro
       scale. */
    padding-block: 11rem clamp(1rem, 4vh, 4rem);
    gap: 1.5rem;
  }

  @media (max-width: 47.9375rem) {
    .section-experts__header {
      padding-inline: 1rem;
    }

    /* Mobile: aligned with header text (16px) + 8px gap per design */
    .experts-track {
      padding-inline: 1rem;
      gap: 0.5rem;
    }

    /* Mobile: pin is matchMedia'd off, so native swipe takes over.
       Hide the scrollbar for a touch-friendly look. */
    .experts-viewport {
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .experts-viewport::-webkit-scrollbar { display: none; }
  }
}