diff --git a/assets/less/ascribe.less b/assets/less/ascribe.less
index 4c35bec..1389734 100644
--- a/assets/less/ascribe.less
+++ b/assets/less/ascribe.less
@@ -21,6 +21,9 @@
 
 @import 'ascribe/_grid.less';
 @import 'ascribe/_footer.less';
+
+@import 'ascribe/_feature-circles.less';
+
 @import 'vendor/print.less';
 
 // HEADER
@@ -483,147 +486,8 @@ header + .chevron-divider {
 }
 .subtemplate {
     position: relative;
-    h1 {
-        .sectionHeader;
-    }
 }
-.feature-circles {
-    padding: @spacer 0;
 
-    @media (min-width: @tabletWidth) {
-        padding: (@spacer * 2) 0;
-    }
-
-    .column-container {
-        width: calc(~"100% + 100px");
-    }
-    .feature-circle {
-        .ttl-columns.column-3;
-        padding-right: 100px;
-        margin-bottom: @spacer;
-
-        &:last-child { margin-bottom: 0 }
-
-        @media (min-width: @tabletWidth) {
-            &:nth-last-child(1),
-            &:nth-last-child(2),
-            &:nth-last-child(3) { margin-bottom: 0 }
-        }
-    }
-    .surround-circle {
-        width: 33%;
-        float:left;
-        padding: 30px;
-
-        .circle {
-            text-align: center;
-            position: relative;
-            border-radius: 100%;
-            background-clip: padding-box;
-            border: 4px solid transparent;
-            &:after {
-                display: block;
-                padding-bottom: 100%;
-                width: 100%;
-                height: 0;
-                border-radius: 50%;
-                background-color: white;
-                content: "";
-                border: 2px solid transparent;
-            }
-            &:before {
-                content: '';
-                position:absolute;
-                z-index:-1;
-                left:-2px;right:-2px;
-                top:-2px;bottom:-2px;
-                border-radius: 50%;
-                background: linear-gradient(@blueBright,@pink);
-            }
-        }
-        .container {
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-        .wrapper {
-            display: table;
-            width: 100%;
-            height: 100%;
-        }
-        .inner {
-            display: table-cell;
-            padding: 1em;
-            vertical-align: middle;
-        }
-        h1 {
-            margin-top: 22px;
-        }
-    }
-    img {
-        width: 105px;
-        display: block;
-        margin: 0 auto 26px;
-    }
-    h1 {
-        .featureCircleH1;
-        text-align: center;
-    }
-    .description {
-        //.copyTextSmall;
-
-        p { margin-bottom: 0; }
-    }
-
-    @media screen and (max-width: 900px) {
-        .surround-circle {
-            padding: 10px;
-        }
-    }
-    @media screen and (max-width: @tabletWidth) {
-        padding: 75px 0 100px;
-        .column-container {
-            width: calc(~"100% + 50px");
-        }
-
-        .feature-circle {
-            padding-right: 50px;
-        }
-        .surround-circle {
-            width: 100%;
-
-            .circle {
-                width: 50%;
-                margin: 0 auto;
-            }
-        }
-    }
-    @media screen and (max-width: @phoneWidth) {
-        padding: 40px 0;
-
-        .description {
-            display: none;
-        }
-        h1 {
-            margin: 10px 0 60px;
-        }
-        .surround-circle {
-            h1 {
-                margin:0;
-            }
-        }
-    }
-    @media screen and (max-width: @smallWidth) {
-        .surround-circle {
-            .circle {
-                width: 80%;
-            }
-        }
-    }
-}
 .case-studies {
     height: 685px;
     position: relative;
@@ -1025,7 +889,6 @@ header + .chevron-divider {
     }
 }
 .team {
-    .copyTextSmall;
     text-align: center;
 
     .column-container {
@@ -1780,10 +1643,6 @@ article.post {
     text-align: center;
 }
 
-.feature-circles .surround-circle .inner {
-    padding: 2em;
-}
-
 .short-descriptions .short-description h1 {
     font-size: 20px;
 }
diff --git a/assets/less/ascribe/_branding.less b/assets/less/ascribe/_branding.less
index bfd04c2..99867a1 100644
--- a/assets/less/ascribe/_branding.less
+++ b/assets/less/ascribe/_branding.less
@@ -39,42 +39,6 @@ a {
     line-height: 37px;
     text-align: center;
 }
-.h1, h1 {
-    &:extend(.fontLight);
-    font-size: 36px;
-    color: @pink;
-    line-height: 1.2;
-}
-.h2, h2 {
-    &:extend(.fontRegular);
-    font-size: 26px;
-    color: @pink;
-    line-height: 1.2;
-}
-.h3, h3 {
-    &:extend(.fontLight);
-    font-size: 27px;
-    color: @pink;
-    line-height: 1.2;
-}
-.h4, h4 {
-    &:extend(.fontRegular);
-    font-size: 26px;
-    color: @black;
-    line-height: 1.2;
-}
-.h5, h5 {
-    &:extend(.fontLight);
-    font-size: 26px;
-    color: @black;
-    line-height: 1.2;
-}
-.h6, h6 {
-    &:extend(.fontRegular);
-    color: @pink;
-    font-size: 15px;
-    line-height: 19px;
-}
 
 // SPECIALIZED TEXT STYLES
 .heroText {
@@ -97,14 +61,6 @@ a {
     color: @white;
     text-transform: uppercase;
 }
-.featureCircleH1 {
-    &:extend(.fontLight);
-    font-size: 20px;
-    color: @pink;
-    letter-spacing: 1.11px;
-    line-height: 24px;
-    margin-bottom: 22px;
-}
 .caseStudyText {
     &:extend(.fontRegular);
     font-size: 23px;
diff --git a/assets/less/ascribe/_feature-circles.less b/assets/less/ascribe/_feature-circles.less
new file mode 100644
index 0000000..4d0be2b
--- /dev/null
+++ b/assets/less/ascribe/_feature-circles.less
@@ -0,0 +1,90 @@
+
+.feature-circles {
+    padding-top: @spacer;
+
+    @media (min-width: @tabletWidth) {
+        padding-top: (@spacer * 2);
+    }
+}
+
+
+
+//
+// Feature circle component
+//
+.feature-circle {
+    &:extend(.text-center);
+}
+
+.feature-circle__image {
+    width: 50%;
+    max-width: 200px;
+    margin: auto;
+    display: block;
+}
+
+.feature-circle__title {
+    font-size: @font-size-h4;
+}
+
+.feature-circle__description {}
+
+
+//
+// Surround circle component
+//
+.surround-circle {
+    &:extend(.text-center);
+
+    .feature-circle__title {
+
+    }
+
+    .feature-circle__description {
+        &:extend(.small);
+    }
+
+    .circle {
+        text-align: center;
+        position: relative;
+        border-radius: 100%;
+        background-clip: padding-box;
+        &:after {
+            display: block;
+            padding-bottom: 100%;
+            width: 100%;
+            height: 0;
+            border-radius: 50%;
+            background-color: white;
+            content: "";
+            border: 2px solid transparent;
+        }
+        &:before {
+            content: '';
+            position:absolute;
+            z-index:-1;
+            left:-2px;right:-2px;
+            top:-2px;bottom:-2px;
+            border-radius: 50%;
+            background: linear-gradient(@blueBright,@pink);
+        }
+    }
+    .container {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .wrapper {
+        display: table;
+        width: 100%;
+        height: 100%;
+    }
+    .inner {
+        display: table-cell;
+        padding: 1em;
+        vertical-align: middle;
+    }
+}
diff --git a/assets/less/ascribe/_grid.less b/assets/less/ascribe/_grid.less
index 868707d..9b8a8d6 100644
--- a/assets/less/ascribe/_grid.less
+++ b/assets/less/ascribe/_grid.less
@@ -37,7 +37,7 @@
 
 .row {
     .clearfix; // for legacy float usage reasons
-    max-width: @screen-lg-min;
+    max-width: (@screen-lg-min + (@gutter-space * 2));
     margin: auto;
     padding-left: @gutter-space;
     padding-right: @gutter-space;
@@ -83,7 +83,7 @@
 //
 // Gutters
 //
-.grid--gutters{
+.grid--gutters {
     margin: -(@gutter-space) 0 @gutter-space (-(@gutter-space));
 
     > .grid__col {
diff --git a/assets/less/ascribe/_typography.less b/assets/less/ascribe/_typography.less
index 3cf964a..084be31 100644
--- a/assets/less/ascribe/_typography.less
+++ b/assets/less/ascribe/_typography.less
@@ -27,7 +27,7 @@ body {
     font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
 }
 
-// Text styles
+// Legacy Text styles
 .copyText {
     font-family: @font-family-base;
     font-size: @font-size-base;
@@ -66,6 +66,44 @@ a {
 }
 
 
+
+//
+// Headings
+//
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+    font-family: @headings-font-family;
+    font-weight: @headings-font-weight;
+    line-height: @headings-line-height;
+    color: @headings-color;
+
+    // remove old style numerals
+    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1;
+}
+
+.h1, h1 {
+    font-size: @font-size-h1;
+}
+.h2, h2 {
+    font-size: @font-size-h2;
+}
+.h3, h3 {
+    font-size: @font-size-h3;
+}
+.h4, h4 {
+    font-size: @font-size-h4;
+    color: @black;
+}
+.h5, h5 {
+    color: @font-size-h5;
+    color: @black;
+}
+.h6, h6 {
+    font-size: @font-size-h6;
+    color: @black;
+}
+
+
 // Reset fonts for relevant elements
 input,
 button,
@@ -90,12 +128,11 @@ p {
 small,
 .small {
     font-size: @font-size-small;
-    font-weight: @font-weight-normal;
+    line-height: @line-height-small;
 }
 
 .mini {
     font-size: @font-size-mini;
-    font-weight: @font-weight-normal;
 }
 
 .large {
diff --git a/assets/less/ascribe/_variables.less b/assets/less/ascribe/_variables.less
index 446400b..fff6188 100644
--- a/assets/less/ascribe/_variables.less
+++ b/assets/less/ascribe/_variables.less
@@ -25,12 +25,19 @@
 // Typography
 //
 @font-size-base:      18px;
-@font-size-small:     14px;
+@font-size-small:     16px;
 @font-size-mini:      11px;
 @font-size-large:     24px;
 
+@font-size-h1:        36px;
+@font-size-h2:        28px;
+@font-size-h3:        26px;
+@font-size-h4:        22px;
+@font-size-h5:        @font-size-base;
+@font-size-h6:        @font-size-small;
+
 @line-height-base:    24px;
-@line-height-small:   18px;
+@line-height-small:   20px;
 
 @text-color:          @blueDeep;
 
@@ -45,6 +52,12 @@
 @link-color:          @blueBright;
 @link-hover-color:    @pink;
 
+
+@headings-font-family:      @font-family-base;
+@headings-font-weight:      @font-weight-base;
+@headings-line-height:      1.2;
+@headings-color:            @pink;
+
 //
 // Spacing
 //
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php
index f299459..b922e0d 100644
--- a/controller/classes/Subtemplate.php
+++ b/controller/classes/Subtemplate.php
@@ -122,15 +122,15 @@ class Subtemplate {
                 $icon           = get_sub_field('icon')['url'];
                 $description    = get_sub_field('description');
 
-                $featureCircles .= "<article class='feature-circle'>
-                                        <img src='{$icon}' alt='{$title} Icon'>
-                                        <h1>{$title}</h1>
-                                        <div class='description'>{$description}</div>
+                $featureCircles .= "<article class='grid__col feature-circle'>
+                                        <img class='feature-circle__image' src='{$icon}' alt='{$title} Icon'>
+                                        <h1 class='feature-circle__title'>{$title}</h1>
+                                        <div class='feature-circle__description'>{$description}</div>
                                     </article>";
             }
         }
 
-        $result = "<section class='subtemplate feature-circles'><div class='centered-header'><div class='column-container'>{$featureCircles}</div></div></section>";
+        $result = "<section class='subtemplate feature-circles row'><div class='grid grid--gutters grid--full grid-small--half grid-medium--third'>{$featureCircles}</div></section>";
 
         return $result;
     }
@@ -144,13 +144,13 @@ class Subtemplate {
                 $title          = get_sub_field('title');
                 $description    = get_sub_field('description');
 
-                $featureCircles .= "<article class='surround-circle'>
+                $featureCircles .= "<article class='grid__col surround-circle'>
                                     <div class='circle'>
                                     <div class='container'>
                                     <div class='wrapper'>
                                     <div class='inner'>
-                                        <h1>{$title}</h1>
-                                        <div class='description'>{$description}</div>
+                                        <h1 class='feature-circle__title'>{$title}</h1>
+                                        <div class='feature-circle__description'>{$description}</div>
                                     </div>
                                     </div>
                                     </div>
@@ -159,7 +159,7 @@ class Subtemplate {
             }
         }
 
-        $result = "<section class='subtemplate feature-circles'><div class='centered-header'>{$featureCircles}</div></section>";
+        $result = "<section class='subtemplate feature-circles row'><div class='grid grid--gutters grid--full grid-small--third'>{$featureCircles}</div></section>";
 
         return $result;
     }