Refine broadcast tour based on research learnings

We’ve shown the broadcast tour to a few users now. We’ve learned what
concepts about broadcasting are and aren’t getting through.

So what we’re emphasising here is:
- the thing that appears on the phone (the ‘emergency alert’) not the
  technology (a ‘broadcast’)
- how it’s different to other channels of messaging, eg text

We’ve generally spent a lot more time on the content and illustrations
this time around, so overall it’s should be clearer and shorter.

This also expands the communication of training mode into the header,
so it’s visible on every page (we can add another one for ‘live’
services later on).

app/assets/stylesheets/components/banner.scss

@@ -80,9 +80,16 @@
 
   &-no-fixed-height {
     height: auto;
+    padding-top: govuk-spacing(8);
     min-height: 425px;
   }
 
+  &-with-service-name {
+    margin-top: -10px;
+    padding-top: 0;
+    box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
+  }
+
   .heading-medium {
     @include core-24;
   }
@@ -143,6 +150,8 @@
   img {
     width: 100%;
     height: auto;
+    position: relative;
+    top: -1 * govuk-spacing(2);
   }
 
   .greyed-out-step {

app/assets/stylesheets/components/navigation.scss

@@ -18,6 +18,23 @@
     text-overflow: ellipsis;
   }
 
+  &-service-type {
+
+    &--training {
+      @include bold-16;
+      position: relative;
+      display: inline-block;
+      margin-left: govuk-spacing(2);
+      padding: 0 govuk-spacing(1);
+      background: $grey-3;
+      color: mix($grey-1, $text-colour);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      box-shadow: 0 -3px 0 0 $grey-3;
+    }
+
+  }
+
   &-service-switch,
   &-service-back-to,
   &-organisation-link {