[fixmystreet.com] Rework pro marketing page

Reorder structure of the page
Remove icons from features text
Add screenshot of theme examples
Remove compatibility information
Recolour clients section

Pricing table
- Move prices to bottom
- Ditch 'show more' functionality
- Add revised tier names

13 files changed, 218 insertions, 182 deletions

diff --git a/templates/web/fixmystreet.com/about/council.html b/templates/web/fixmystreet.com/about/council.html
index 572051f78..d36421fef 100644
--- a/templates/web/fixmystreet.com/about/council.html
+++ b/templates/web/fixmystreet.com/about/council.html
@@ -14,7 +14,7 @@
   <div class="councils-hero">
     <div class="councils-hero__presentation">
       <div class="councils-content-wrapper">
-        <h2 class="councils-hero__title">FixMyStreet Professional: the one-stop street reporting service for councils</h2>
+        <h2 class="councils-hero__title">FixMyStreet Professional: street reporting service for councils</h2>
         <img class="councils-hero__product" src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/device-mockup.png') %]" alt="">
       </div>
     </div>
@@ -25,163 +25,41 @@
     </div>
 
   </div>
-  <div class="councils-features">
+  <div class="councils-sales councils-sales--benefits">
     <div class="councils-content-wrapper">
-      <div class="councils-features__grid">
+      <h2>Benefits</h2>
+      <div class="councils-sales__grid">
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--map-centric"></div>
-          <h3>Map-centric problem reporting</h3>
-          <p>Handle any type of location-specific report within the nominated
-            county, borough or city; including geolocation and images. </p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--responsive-web"></div>
-          <h3>Responsive web application</h3>
-          <p>FixMyStreet is designed for optimal display on  desktop, tablet and
-            mobile browsers.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--mobile-app"></div>
-          <h3>Mobile application</h3>
-          <p>Companion mobile application for Android and iOS, so your customers can report issues on the go.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--brand"></div>
-          <h3>Our experience, your brand</h3>
-          <p>White-labelled product, branded to complement your existing services.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--end-to-end"></div>
-          <h3>End-to-end case management</h3>
-          <p>A complete case management solution for customer services, inspection and maintenance teams.</p>
+          <h3>Increase efficiency</h3>
+          <p>Route problems to the correct person, team, authority or contractor based on location, category and priority.</p>
         </div>
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--intelligent-routing"></div>
-          <h3>Intelligent routing</h3>
-          <p>Send the problem to the correct individual,
-          team or another authority based upon location, category or a combination of both.</p>
+          <h3>Minimise duplication</h3>
+          <p>An open and transparent approach to local issue reporting that reduces incidents of repeat and duplicate reports.</p>
         </div>
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--automated-instruction"></div>
-          <h3>Automated instruction</h3>
-          <p>Route problems to contracted providers based on category, location or meta data.</p>
+          <h3>Streamline your process</h3>
+          <p>The first case-management service designed with councils, for councils. Streamline your process from customer service, through inspection to instruction and resolution.</p>
         </div>
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--authority"></div>
-          <h3>Unitary and two-tier authorities</h3>
-          <p>Handle all reports or a subset of reports by category, location or a combination of both.</p>
+          <h3>Stay flexible</h3>
+          <p>Open standards compliant for complete customer flexibility: support the landscape of service providers to further increase your reach.</p>
         </div>
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--syncronised"></div>
-          <h3>Synchronised with FixMyStreet.com</h3>
-          <p>Extend your reach to over a million visitors on the nation’s most popular local issues service, FixMyStreet.com.</p>
+          <h3>Work with your existing services</h3>
+          <p>Support for your existing mapping, asset, customer and case management services ensures that your solution works for your current processes and systems.</p>
         </div>
         <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--inspection"></div>
-          <h3>Inspection service</h3>
-          <p>Mobile optimised, offline capable planning, markup and instructing service for your inspection teams.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--customise"></div>
-          <h3>Customised reporting</h3>
-          <p>Supports category-specific report content and data, to help you collect the details you need.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--dashboard"></div>
-          <h3>Performance dashboard</h3>
-          <p>Track service levels, highlight bottlenecks and monitor contracts with area dashboards.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--integrated"></div>
-          <h3>Integrated</h3>
-          <p>Support for industry standard mapping, asset, works and customer management applications.</p>
-        </div>
-        <div class="councils-features__feature">
-          <div class="councils-features__thumb councils-features__thumb--open-standards"></div>
-          <h3>Open standards compliant</h3>
-          <p>Support the landscape of service providers through one open interface using Open311.</p>
-        </div>
-      </div>
-      <a href="#order" class="button order-now-button">Order now</a>
-    </div>
-  </div>
-  <div class="councils-clients">
-    <div class="councils-clients__grid">
-      <div class="councils-clients__client">
-        <a href="https://fixmystreet.bristol.gov.uk/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png') %]" alt="Bristol City Council">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://fix.angus.gov.uk/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png') %]" alt="Angus Council">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://fixmystreet.oxfordshire.gov.uk/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png') %]" alt="Oxfordshire County Council">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://hart.fixmystreet.com/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png') %]" alt="Hart District Council">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://fix.bromley.gov.uk/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png') %]" alt="Bromley Council">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://www.zueriwieneu.ch/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png') %]" alt="Stadt Z&uuml;rich">
-        </a>
-      </div>
-      <div class="councils-clients__client">
-        <a href="https://greenwich.fixmystreet.com/">
-          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png') %]" alt="Royal Borough of Greenwich">
-        </a>
-      </div>
-    </div>
-  </div>
-
-  <div class="councils-compatibility">
-    <div class="councils-content-wrapper">
-      <h2>Works with</h2>
-      <div class="councils-compatibility__grid">
-        <div class="councils-compatibility__item councils-compatibility__item--wide">
-          <h3>Customer management</h3>
-          <ul class="split-list">
-            <li><a href="http://www.kana.com/lagan-crm/customer-experience-management">Lagan</a></li>
-            <li><a href="https://www.microsoft.com/en-gb/dynamics/default.aspx">Microsoft Dynamics</a></li>
-            <li><a href="https://products.office.com/en-us/sharepoint/collaboration">Sharepoint</a></li>
-            <li><a href="http://www.salesforce.com/uk/homepage/index-l.jsp?mboxSession=1471855891730-631658">Salesforce</a></li>
-            <li><a href="http://www.jadu.net/cxm">Jadu</a></li>
-            <li><a href="http://www.agilysys.com/">Agilsys</a></li>
-          </ul>
+          <h3>Expand your reach</h3>
+          <p>Reports made within your boundaries are published to FixMyStreet.com’s one million visitors a year.</p>
         </div>
-        <div class="councils-compatibility__item">
-          <h3>Geographic Information Systems</h3>
-          <ul>
-            <li><a href="http://www.esri.com/software/arcgis">ESRI ArcGIS</a></li>
-          </ul>
-        </div>
-        <div class="councils-compatibility__item">
-          <h3>Asset management</h3>
-          <ul>
-            <li><a href="https://go.sap.com">SAP EAS</a></li>
-            <li><a href="http://www-03.ibm.com/software/products/en/maximoassetmanagement">IBM Maximo</a></li>
-            <li><a href="http://www.ifsworld.com/">IFS</a></li>
-          </ul>
-        </div>
-
       </div>
     </div>
   </div>
 
   <div class="councils-pricing">
     <div class="councils-content-wrapper">
-      <h2>Pricing</h2>
+      <h2>Plans</h2>
       <div class="councils-pricing__grid">
 
           <table class="pricing-table">
@@ -192,16 +70,16 @@
                   <span class="visuallyhidden">Features</span>
                 </th>
                 <th scope="col">
-                  <span class="pricing-table__tier-name">Free</span>
+                  <span class="pricing-table__tier-name">Driveway</span>
                 </th>
                 <th scope="col">
-                  <span class="pricing-table__tier-name">£7500</span>
+                  <span class="pricing-table__tier-name">Crescent</span>
                 </th>
                 <th scope="col">
-                  <span class="pricing-table__tier-name">£20000</span>
+                  <span class="pricing-table__tier-name">Boulevard</span>
                 </th>
                 <th scope="col">
-                  <span class="pricing-table__tier-name">£35000</span>
+                  <span class="pricing-table__tier-name">Avenue</span>
                 </th>
               </tr>
             </thead>
@@ -210,88 +88,88 @@
               <tr>
                 <th scope="row">
                   <span class="pricing-table__feature-name">
-                    Dashboards
+                    Define problem categories and email contacts
                   </span>
                 </th>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--no">None</i>
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    1 customisable dashboard
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    Customisable dashboards for up to 3 teams
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    Customisable dashboards for up to 3 teams
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
               </tr>
               <tr>
                 <th scope="row">
                   <span class="pricing-table__feature-name">
-                    FixMyStreet at your domain, with your branding
+                    Dashboards
                   </span>
                 </th>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--no">No</i>
+                    <i class="boolean-icon boolean-icon--no">None</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    1 customisable dashboard
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    Customisable dashboards for up to 3 teams
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    Customisable dashboards for up to 3 teams
                   </span>
                 </td>
               </tr>
               <tr>
                 <th scope="row">
                   <span class="pricing-table__feature-name">
-                    System integrations (eg: CONFIRM, Salesforce, Mayrise)
+                    FixMyStreet at your domain, with your branding
                   </span>
                 </th>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--no">None</i>
+                    <i class="boolean-icon boolean-icon--no">No</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--no">None</i>
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    Up to 2 integrations
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    Up to 4 integrations
+                    <i class="boolean-icon boolean-icon--yes">Yes</i>
                   </span>
                 </td>
               </tr>
               <tr>
                 <th scope="row">
                   <span class="pricing-table__feature-name">
-                    Inspector specific views
+                    System integrations (eg: CONFIRM, Salesforce, Mayrise)
                   </span>
                 </th>
                 <td>
@@ -306,37 +184,34 @@
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--no">None</i>
+                    Up to 2 integrations
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    Up to 4 integrations
                   </span>
                 </td>
               </tr>
-            </tbody>
-
-            <tbody class="js-extra-features">
               <tr>
                 <th scope="row">
                   <span class="pricing-table__feature-name">
-                    Define problem categories and email contacts
+                    Inspector specific views
                   </span>
                 </th>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    <i class="boolean-icon boolean-icon--no">None</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    <i class="boolean-icon boolean-icon--no">None</i>
                   </span>
                 </td>
                 <td>
                   <span class="pricing-table__feature-value">
-                    <i class="boolean-icon boolean-icon--yes">Yes</i>
+                    <i class="boolean-icon boolean-icon--no">None</i>
                   </span>
                 </td>
                 <td>
@@ -642,6 +517,23 @@
                   </span>
                 </td>
               </tr>
+              <tr class="pricing-table__prices">
+                <td>
+                  <span class="pricing-table__price">Price</span>
+                </td>
+                <td>
+                  <span class="pricing-table__price">Free</span>
+                </td>
+                <td>
+                  <span class="pricing-table__price">£7500</span>
+                </td>
+                <td>
+                  <span class="pricing-table__price">£20000</span>
+                </td>
+                <td>
+                  <span class="pricing-table__price">£35000</span>
+                </td>
+              </tr>
             </tbody>
 
           </table>
@@ -650,6 +542,101 @@
     </div>
   </div>
 
+  <div class="councils-clients">
+    <h2>Clients</h2>
+    <div class="councils-clients__grid">
+      <div class="councils-clients__client">
+        <a href="https://fixmystreet.bristol.gov.uk/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png') %]" alt="Bristol City Council">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://fix.angus.gov.uk/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png') %]" alt="Angus Council">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://fixmystreet.oxfordshire.gov.uk/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png') %]" alt="Oxfordshire County Council">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://hart.fixmystreet.com/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png') %]" alt="Hart District Council">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://fix.bromley.gov.uk/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png') %]" alt="Bromley Council">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://www.zueriwieneu.ch/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png') %]" alt="Stadt Z&uuml;rich">
+        </a>
+      </div>
+      <div class="councils-clients__client">
+        <a href="https://greenwich.fixmystreet.com/">
+          <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png') %]" alt="Royal Borough of Greenwich">
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class="screenshot-of-themes">
+    <div class="councils-content-wrapper">
+      <img src="[% version('/cobrands/fixmystreet.com/images/fms-for-councils/screenshot-of-themes.jpg') %]" alt="">
+    </div>
+  </div>
+
+  <div class="councils-sales councils-sales--features">
+    <div class="councils-content-wrapper">
+      <h2>Features</h2>
+      <div class="councils-sales__grid">
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>Map-centric problem reporting</h3>
+          <p>Handle any type of location-specific report within the nominated
+            county, borough or city; including geolocation and images. </p>
+        </div>
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>Mobile ready</h3>
+          <p>Companion mobile application for Android and iOS, so your customers
+            can report issues on the go and FixMyStreet is designed for optimal
+            display on desktop, tablet and mobile browsers.</p>
+        </div>
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>Our experience, your brand</h3>
+          <p>White-labelled product, branded to complement your existing services.
+            Extend your reach to over a million visitors on the nation’s most
+            popular local issues service, FixMyStreet.com.</p>
+        </div>
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>End-to-end case management</h3>
+          <p>A complete case management solution for customer services,
+            inspection  and maintenance teams. Support for industry standard
+            mapping, asset, works and applications including Salesforce, Mayrise
+             and Confirm®.</p>
+        </div>
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>Inspection service</h3>
+          <p>Mobile optimised, offline capable planning, markup and instructing
+            service for your inspection teams.</p>
+        </div>
+        <div class="councils-features__feature">
+          <div class="councils-features__screenshot"></div>
+          <h3>Customised reporting</h3>
+          <p>Supports category-specific report content and data, to help you
+            collect the details you need. Track service levels, highlight
+            bottlenecks and monitor contracts with area dashboards.</p>
+        </div>
+      </div>
+    </div>
+  </div>
 <div class="council-order" id="order">
   <div class="councils-content-wrapper">
     <h2>Contact</h2>
diff --git a/web/cobrands/fixmystreet.com/fmsforcouncils.scss b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
index 253d266c1..4448c4616 100644
--- a/web/cobrands/fixmystreet.com/fmsforcouncils.scss
+++ b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
@@ -9,6 +9,7 @@ $fms-orange: #f4a140;
 $fms-red: #e04b4b;
 $fms-blue: #4faded;
 $fms-green: #62b356;
+$fms-pink: #E65376;
 
 .fms-for-councils {
   background-color: #1a1a1a;
@@ -151,11 +152,14 @@ $fms-green: #62b356;
     color: #777;
   }
 
-  .councils-features {
+  .councils-sales {
     padding: 3em 0 5em;
+    .councils-content-wrapper {
+      max-width: 58em;
+    }
   }
 
-  .councils-features__grid {
+  .councils-sales__grid {
     .flex & {
       @include flex-container();
       @include flex-wrap(wrap);
@@ -183,16 +187,37 @@ $fms-green: #62b356;
     }
     h3 {
       font-weight: normal;
-      margin-left: 75px;
       margin-bottom: 0.25em;
     }
     p {
       color: #777;
       font-size: 0.875em;
-      margin-left: 75px;
     }
   }
 
+  .councils-sales--benefits {
+    background-color: #F7F6F5;
+    border-bottom: 1px solid #e9e9e9;
+    padding-top: 1em;
+    h2 {
+      font-size: 2.5em;
+      text-align: center;
+      color: $fms-pink;
+    }
+    p {
+      color: #666;
+    }
+  }
+
+  .councils-sales--features {
+    border-top: 1px solid #e9e9e9;
+    padding-top: 2em;
+    h2 {
+      font-size: 2.5em;
+      text-align: center;
+      color: $fms-pink;
+    }
+}
 
   .councils-features__thumb {
     height: 63px;
@@ -261,7 +286,7 @@ $fms-green: #62b356;
   }
 
   .order-now-button {
-    background-color: #E65376;
+    background-color: $fms-pink;
     color: #fff;
     border: 0;
     text-transform: none;
@@ -274,14 +299,19 @@ $fms-green: #62b356;
     &:hover,
     &:active,
     &:focus {
-      background-color: desaturate(darken(#E65376, 10%), 10%);
+      background-color: desaturate(darken($fms-pink, 10%), 10%);
       text-decoration: none;
     }
   }
 
   .councils-clients {
-    background-color: #333;
-    padding: 2.5em 0;
+    background-color: #FED876;
+    padding: 1em 0 2.5em;
+    h2 {
+      font-size: 2.5em;
+      text-align: center;
+      color: #333;
+    }
   }
 
   .councils-clients__grid {
@@ -313,8 +343,13 @@ $fms-green: #62b356;
     }
   }
 
+
+  .screenshot-of-themes {
+    background-color: #FED876;
+  }
+
   .councils-compatibility {
-    background-color: #E65376;
+    background-color: $fms-pink;
     padding: 0.5em 0 2.5em;
     a {
       color: #fff;
@@ -404,6 +439,7 @@ $fms-green: #62b356;
   }
 
   .councils-pricing {
+    padding: 2em 0;
     margin-bottom: 3em;
     h2 {
       font-size: 2.5em;
@@ -492,6 +528,19 @@ $fms-green: #62b356;
     }
   }
 
+  .pricing-table__prices {
+    td {
+      background-color: $fms-pink;
+      color: #fff;
+      border-color: darken($fms-pink, 10%);
+    }
+  }
+
+  .pricing-table__price {
+    font-weight: 500;
+    font-size: 1.25em;
+  }
+
   .boolean-icon {
     margin: 0 auto;
     display: inline-block;
@@ -699,7 +748,7 @@ $fms-green: #62b356;
     border-right: 0;
     padding: 4em 0;
     h2 {
-      color: #E65376;
+      color: $fms-pink;
       font-size: 2.5em;
     }
   }
@@ -731,7 +780,7 @@ $fms-green: #62b356;
     }
     input[type="submit"] {
       background-image: none;
-      background-color: #E65376;
+      background-color: $fms-pink;
       color: #fff;
       border: 0;
       text-transform: none;
@@ -740,7 +789,7 @@ $fms-green: #62b356;
       &:hover,
       &:active,
       &:focus {
-        background-color: desaturate(darken(#E65376, 10%), 10%);
+        background-color: desaturate(darken($fms-pink, 10%), 10%);
       }
     }
   }
@@ -765,7 +814,7 @@ $fms-green: #62b356;
     right: 0;
     top: 3px;
     font-size: 0.75em;
-    color: #E65376;
+    color: $fms-pink;
   }
 
   .council-order__screenshot {
@@ -781,7 +830,7 @@ $fms-green: #62b356;
       z-index: 0;
       right: 0;
       width: 500px;
-      bottom: 20px;
+      bottom: 50px;
     }
     @media (min-width: 82em) {
       width: 748px;
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png
index 1baeacba6..74b5c7345 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/angus-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/barnet-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/barnet-logo.png
index ad90a663c..1a2fc0f56 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/barnet-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/barnet-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png
index 9c622959b..27c05d66f 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/bristol-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png
index 96f6cbdc0..4cd1c60a4 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/bromley-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png
index 0439b2a25..0f202c7e7 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/greenwich-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png
index 8ec4dd68e..376623469 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/hart-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png
index 85655c4b1..0b479791a 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/oxfordshire-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/screenshot-of-themes.jpg b/web/cobrands/fixmystreet.com/images/fms-for-councils/screenshot-of-themes.jpg
new file mode 100644
index 000000000..21744f3cd
--- /dev/null
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/screenshot-of-themes.jpg
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/stevenage-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/stevenage-logo.png
index 96c60299d..7b4d36a67 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/stevenage-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/stevenage-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/warwickshire-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/warwickshire-logo.png
index 62087ba52..69c189581 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/warwickshire-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/warwickshire-logo.png
diff --git a/web/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png b/web/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png
index 2748caec3..efdaf2fe8 100644
--- a/web/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png
+++ b/web/cobrands/fixmystreet.com/images/fms-for-councils/zurich-logo.png