Fixed top navi, refactor hero padding

styles/_layout.scss

@@ -7,10 +7,15 @@
 }
 
 .hero {
-  padding-top: 96px;
+  padding-top: calc(96px + #{$navi-height});
   padding-bottom: 96px;
   text-align: center;
 
+  @media (max-width: $width-tablet-2) {
+    padding-top: calc(64px + #{$navi-height});
+    padding-bottom: 64px;
+  }
+
   &--why {
     .hero__subtext > div {
       max-width: 870px;
@@ -18,6 +23,12 @@
   }
 
   &--pricing {
+    background-color: $pink;
+
+    .hero__headline {
+      color: $jambonz;
+    }
+
     .hero__subtext {
       > div {
         max-width: 820px;

styles/_navi.scss

@@ -1,5 +1,9 @@
 .navi {
   padding: 16px 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
 
   // Menu / X icons for mobile nav interactions
   .icon {

styles/_vars.scss

@@ -35,6 +35,7 @@ $icon-size-3: 36px;
 /******************************************************************************
  * Sizes
 *******************************************************************************/
+$navi-height: 74px;
 $width-max: 1440px;
 $width-tablet-1: 1024px;
 $width-tablet-2: 768px;