Line-spacing issues?

I'm trying to adjust the line height on my H1 and H2 between desktop and mobile versions, but it my media queries don't appear to be overriding the inline values when viewing in Apple Mail and I'm scratching my head!

I know that Apple Mail supports line-height, thanks to Campaign Monitor's excellent CSS guide. I know that the media query is overall correct, as other mail clients (zimbra) and email browsers (firefox) are displaying it correctly for small screens.

Can you please run fresh eyes over my code to help me work out where I'm going wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" name="robots" content="text/html; charset=utf-8" noindex="" nofollow="">
<meta property="og:title" content="">
<meta name="viewport" content="width=device-width">
<title>invitation</title>

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<style type="text/css">
    @media only screen and (max-width: 480px){
        table[id=backgroundTable]{
            width:100% !important;
        }

}    @media only screen and (max-width: 480px){
        table[class=contentWrapper],[class=contentTable]{
            width:320px !important;
        }

}    @media only screen and (max-width: 480px){
        td[class=image] img{
            height:auto !important;
            width:100% !important;
        }

}    @media only screen and (max-width: 480px){
        h1,h2{
            line-height:100% !important;
        }
        
@import url(http://fonts.googleapis.com/css?family=Indie+Flower)

}</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0; -webkit-text-size-adjust: none; padding: 0; text-align: center; width: 100% !important;">
<div style="background-color:#fafafa;">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="" color="#fafafa"/>
  </v:background>
  <![endif]-->
  <table align="center" height="100%" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td valign="top" background="">
      </td></tr></table>
                <table class="contentWrapper" align="center" border="0" cellpadding="0" cellspacing="0" width="480px"><tr>
<!-- // Begin Template Preheader \\ --><td class="header" align="center" valign="top" style="border-collapse: collapse; background-color:#fafafa;">
                            <p style="font-family: Helvetica, Arial, sans-serif; color: #939598; font-size: 13px; font-weight: normal; line-height: 125%;">Can't view this event invitation? <span class="nobr" style="white-space: nowrap; padding-left: 0px; padding-right: 0px;"><a href="" target="_blank" style="color: #2755A1; text-decoraton: underline;">View it in your browser.</a></span></p>
                        </td>
                    </tr></table>
<!-- // Begin Template Main message \\ --><table class="contentTable" align="center" border="0" cellpadding="10" cellspacing="0" width="480px" style="background-color: #FFF;" bgcolor="#FFF">
<tr>
<td align="left" valign="top" style="border-collapse: collapse;">
                            <a href="" target="_blank" style="color: #2755A1; text-decoraton: underline;">
                            <img src="http://placehold.it/251x61" alt="Walter and Eliza Hall Institute logo" style="border: 0; font-family: Helvetica, Arial, sans-serif; color: #2755A1; font-weight: bold; font-size: 18px; outline: none; line-height: 100%; text-decoration: none; height: auto;" title="logo" width="251px" height="61px"></a>
                        </td>
                    </tr>
<tr>
<td align="center" valign="top" class="image" style="border-collapse: collapse;">
                            <a href="" target="_blank" style="color: #2755A1; text-decoraton: underline;">
                            <img src="http://placehold.it/460x367" width="460px" style="max-width: 100%; font-size: 18px; font-weight: bold; line-height: 100%; outline: none; border: 0 none; text-decoration: none; max-height: 100%; height: auto;" mc:edit="image"></a>
                        </td>
                    </tr>
<tr>
<td align="center" valign="top" mc:edit="main" style="border-collapse: collapse;">
                            <h1 style="font-family: 'Indie Flower', Helvetica, Arial, sans-serif; color: #256CB5; font-size: 50px; font-weight: bold; line-height: 10%;">Title</p>
                            <p style="font-family: Helvetica, Arial, sans-serif; color: #939598; font-size: 26px; font-weight: normal; line-height: 125%; margin-bottom: -10px;">You are invited to attend our event.</p>
                            <h2 style="font-size: 30px; line-height: 100%; font-weight: bold; font-stretch: condensed; font-family: Helvetica, Arial, sans-serif; color: #256CB5;">Day Date Month, Year</h2>
                            <h2 style="font-size: 30px; line-height: 50%; font-weight: bold; font-stretch: condensed; font-family: Helvetica, Arial, sans-serif; color: #76B65E; margin-bottom: -10px;"> Subheading Subheading Subheading</h2>
                            <p style="font-family: Helvetica, Arial, sans-serif; color: #939598; font-size: 26px; font-weight: normal; line-height: 125%; margin-bottom: -10px; ">Text</p>
                            <h2 style="font-size: 30px; line-height: 50%; font-weight: bold; font-stretch: condensed; font-family: Helvetica, Arial, sans-serif; color: #76B65E; margin-bottom: -10px;">Subheading Subheading Subheading</h2>
                            <p style="font-family: Helvetica, Arial, sans-serif; color: #939598; font-size: 26px; font-weight: normal; line-height: 125%;">Text</p>
                        </td>
                    </tr>
</table>  
</div>
</body>
</html>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098