WP: Advanced Custom Fields. Flexible Content + Repeater Fields. Using Custom fields in inline CSS

I am trying to style a H4 element with a left and bottom border of varying widths and a specific colour which is defined by a custom field that the client would fill in the CMS. My CMS layout is correct but the code below I know not to be. My problem area is specifically with the H4, the other parts of the code are rendering correctly.

<?php               
if (get_field("sponsorlogos")){
  while (has_sub_field("sponsorlogos")){

    if (get_row_layout() == "sponsor_category_title"){ // Sponsor Category Title
      echo '<h4 style="border-left: 10px solid '.the_sub_field('sponsor_category_title_colour').' !important; border-bottom: 1px solid '.the_sub_field("sponsor_category_title_colour").' !important; margin: 40px 0 15px 0;">';
        the_sub_field("sponsor_category_title_text");  
      echo '</h4>';
    }  

    if (get_row_layout() == "sponsor_logo_container"){ // Sponsor Repeater Field
      $rows = get_sub_field('sponsor_item'); 
      if ($rows){ 
        echo '<ul id="sponsor-logo-container">';
        foreach($rows as $row){
          echo '<li class="sponsor-logo"><a class="logo-link" target="_blank" href="'.$row['sponsor_link'].'"><img width="190" height="110" src="'.$row['sponsor_logo'].'" alt="'.$row['sponsor_title'].'"class="logo-image grayscale" /></a><span class="staff-name">'.$row['sponsor_support'].'</span></li>'; 
        }
        echo '<div style="clear:both;"></div>';
        echo '</ul>';
      }
    } 
  }
}
?>

The resulting markup is as follows:

<h4 style="border-left: 10px solid  !important; border-bottom: 1px solid  !important; margin: 40px 0 15px 0;">Bronze</h4>

You can see it omits the hex '#xxxxxx' colour part.

I should reiterate though, as the colour hex is successfully spat out twice in the markup (as expected) but it appears above the H4 element.

Im sure I'm not using the Advanced Custom Field tags correctly.

Help!