/* sourcing-top-brands — externalised head <style> (§9.3) */
/* Between ~861-1100px the "Brands that perform" paragraph wraps to more
       lines, pushing the About-us row lower — but #top-brands still pulls
       itself up by the same fixed -150px, so the divider/heading end up
       crossing the product image and arrow-circle above them. Ease off the
       pull-up in that band so there's always clearance. */
    @media (min-width: 861px) and (max-width: 1100px) {
      #top-brands { margin-top: -60px !important; }
    }
    @media (max-width: 860px) {
      /* Divider removed on tablet/mobile — the section above pulls this block
         up with a large negative margin (-150px), and the extra line just
         crowded the title here. Removing it drops its own margin-block space
         too though, so replace that (2 × the divider's clamp) plus the
         title's original 30px, or the title collides with the section above. */
      #top-brands hr.faq-divider { display: none; }
      #top-brands .section-head { margin-top: calc(clamp(2.5rem, 5vw, 4rem) * 2 + 30px + 50px) !important; }
    }
    /* Extra breathing room above each brand image except the first row's —
       grid gap alone reads as too tight once the columns narrow. */
    @media (max-width: 900px) {
      #top-brands .technique-grid .webshop-card:not(:nth-child(-n+2)) img { margin-top: 15px; }
    }
    @media (max-width: 520px) {
      #top-brands .technique-grid .webshop-card:nth-child(2) img { margin-top: 15px; }
    }