

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="x-apple-disable-message-reformatting" />
  <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->

  <!-- Import your custom fonts -->
  <style>
    @import url("https://use.typekit.net/svj7fec.css");
  </style>

  <!--[if mso]>
    <style type="text/css">
      table {border-collapse: collapse; border: 0; border-spacing: 0; margin: 0;}
      div, td {padding: 0;}
      div {margin: 0 !important;}
    </style>
    <noscript>
      <xml>
        <o:OfficeDocumentSettings>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    </noscript>
  <![endif]-->

  <style type="text/css">
    /* Responsive adjustments */
    @media screen and (max-width: 600px) {
      .container {
        width: 100% !important;
      }
      .hero-image {
        width: 100% !important;
      }
      .cta-button {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
      }
    }

    /* Link styles matching the dashed divider */
    a {
      text-decoration: none;
      color: #022E40;
      border-bottom: 1px dashed #022E40;
    }

    a:hover {
      color: #3B568C;
      border-bottom: 1px dashed #3B568C;
    }
  </style>
  <title>Subterra Insights Email Template</title>
</head>

<body style="margin: 0; padding: 0; word-spacing: normal; background-color: #c1d4d9; font-family: 'open-sans', sans-serif; font-weight: 400; font-style: normal; color: #3B568C;">
  <!-- Preheader Text -->
  <div style="display: none; max-height: 0px; overflow: hidden; font-size: 0px; line-height: 0px; opacity: 0; color: transparent;">
    A short preview of the email's main purpose for inbox scanning.
  </div>

  <div role="article" aria-roledescription="email" lang="en" style="-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
    <table role="presentation" style="width: 100%; border: 0; border-spacing: 0;">
      <tr>
        <td align="center" style="padding: 20px;">
          <!--[if mso]>
            <table role="presentation" align="center" style="width: 600px;">
              <tr>
                <td style="padding: 20px 0;">
          <![endif]-->

          <!-- Outer Container -->
          <table role="presentation" class="container" style="width: 100%; max-width: 600px; border: 1px solid #ddd; border-spacing: 0; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
            
            <!-- Header Section -->
            <tr>
              <td style="text-align: center; padding: 10px;">
                <!-- Logo -->
                <img src="https://subterrainsights.com/wp-content/uploads/2024/12/onion-dark-color_250px.png"
                     style="display: block; margin: 0 auto; height: auto; max-width: 250px;"
                     alt="Subterra Insights Logo, featuring a stylized onion graphic" />
                <!-- Branding Text -->
                <div style="font-family: 'source-code-pro', monospace; font-weight: 600; font-style: normal; font-size: 14px; color: #888; text-transform: lowercase; margin-top: 10px; margin-bottom: 10px;">
                  subterra insights
                </div>
                <!-- Divider -->
                <div style="border-top: 1px dashed #888; margin: 5px auto 10px; width: 90%;"></div>
              </td>
            </tr>

            <!-- Hero Image Section -->
            <tr>
              <td style="padding: 0 20px 10px 20px; text-align: center;">
                <img class="hero-image"
                     src="https://subterrainsights.com/wp-content/uploads/2024/11/council-chambers-desk-seats-9-10-19.jpg"
                     alt="Council chambers with desks and seats, symbolizing leadership and governance"
                     style="display: block; width: calc(100% - 20px); max-width: 580px; height: auto; margin: 0 auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);" />
              </td>
            </tr>

            <!-- Body Section -->
            <tr>
              <td style="padding: 20px;">
                <!-- Heading -->
                <h1 style="font-family: 'futura-pt-bold', sans-serif; font-weight: 700; font-style: normal; font-size: 24px; line-height: 30px; margin-bottom: 20px; color: #022E40; text-transform: uppercase;">
                  Learn and Grow with Subterra Insights
                </h1>
                <!-- Paragraph -->
                <p style="font-family: 'open-sans', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 20px;">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat, metus vel ullamcorper malesuada, ex lorem luctus justo, eget porttitor risus erat et ligula. Suspendisse eget tristique nulla.
                </p>
                <!-- Subheading -->
                <h2 style="font-family: 'futura-pt-bold', sans-serif; font-weight: 700; font-style: normal; font-size: 20px; line-height: 28px; color: #022E40; margin-bottom: 10px;">
                  Key Highlights
                </h2>
                <!-- List -->
                <ul style="font-family: 'open-sans', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 20px; padding-left: 20px;">
                  <li>Praesent commodo massa a nisi tincidunt, ut convallis justo scelerisque.</li>
                  <li>Aliquam erat volutpat. Nulla facilisi. <a href="https://example.com">Read more here</a>.</li>
                  <li>Suspendisse potenti. Donec euismod sapien et augue ultricies, et fermentum libero tristique.</li>
                </ul>
                <!-- Inline Link -->
                <p style="font-family: 'open-sans', sans-serif; font-size: 16px; line-height: 24px; margin: 0 0 20px;">
                  Curabitur efficitur lectus a quam efficitur viverra. <a href="https://example.com">Learn more</a>.
                </p>
              </td>
            </tr>

            <!-- Call-to-Action Button -->
            <tr>
              <td align="center" style="padding: 10px 0;">
                <a href="https://example.com" 
                   style="background-color: #022E40; color: #ffffff; padding: 12px 24px; font-family: 'open-sans', sans-serif; font-size: 16px; font-weight: bold; text-decoration: none; border-radius: 5px; display: inline-block;">
                  Call-to-Action Button
                </a>
              </td>
            </tr>

            <!-- Footer Section -->
            <tr>
              <td style="padding: 20px; text-align: center;">
                <!-- Divider -->
                <div style="border-top: 1px dashed #888; margin: 0 auto 10px; width: 50%;"></div>
                <!-- Copyright -->
                <div style="font-family: 'source-code-pro', monospace; font-weight: 600; font-style: normal; font-size: 10px; color: #888; margin-bottom: 5px;">
                  &copy; 2025 Subterra Insights LLC. All Rights Reserved.
                </div>
                <!-- Tagline -->
                <div style="font-family: 'source-code-pro', monospace; font-weight: 600; font-style: normal; font-size: 11px; color: #888; text-transform: lowercase;">
                  decisions = data x science x compassion
                </div>
              </td>
            </tr>

                    </table>
          <!--[if mso]>
                </td>
              </tr>
            </table>
          <![endif]-->
        </td>
      </tr>
    </table>
  </div>
</body>
</html>