diff --git a/.cypress/cypress/integration/category_tests.js b/.cypress/cypress/integration/category_tests.js
index 8cd72b50db3..bcb543a3cdf 100644
--- a/.cypress/cypress/integration/category_tests.js
+++ b/.cypress/cypress/integration/category_tests.js
@@ -13,7 +13,7 @@ describe('Basic categories', function() {
         'Footpath/bridleway away from road',
         'Graffiti',
         'Offensive graffiti',
-        'Licensing',
+        'G|Licensing',
         'Parks/landscapes',
         'Pavements',
         'Potholes',
@@ -75,7 +75,7 @@ describe('Basic categories', function() {
         cy.get('[value="Abandoned vehicles"]').should('not.be.visible');
         cy.get('[value="Bus stops"]').should('not.be.visible');
         cy.get('[value="Flyposting"]').should('not.be.visible');
-        cy.get('[value="Licensing"]').should('be.visible');
+        cy.get('[value="G|Licensing"]').should('be.visible');
         cy.get('[value="Dropped Kerbs"]').should('be.visible');
         cy.get('[value="Skips"]').should('be.visible');
         cy.get('[value="Street lighting"]').should('be.visible');
@@ -84,7 +84,7 @@ describe('Basic categories', function() {
         cy.get('[value="Abandoned vehicles"]').should('not.be.visible');
         cy.get('[value="Bus stops"]').should('be.visible');
         cy.get('[value="Flyposting"]').should('not.be.visible');
-        cy.get('[value="Licensing"]').should('be.visible');
+        cy.get('[value="G|Licensing"]').should('be.visible');
         cy.get('[value="Dropped Kerbs"]').should('not.be.visible');
         cy.get('[value="Skips"]').should('be.visible');
         cy.get('[value="Road traffic signs"]').should('be.visible');
diff --git a/.cypress/cypress/integration/gloucestershire.js b/.cypress/cypress/integration/gloucestershire.js
new file mode 100644
index 00000000000..c0e0621de5e
--- /dev/null
+++ b/.cypress/cypress/integration/gloucestershire.js
@@ -0,0 +1,28 @@
+describe('Gloucestershire cobrand', function(){
+    describe('making a report as a new user', function() {
+        before(function(){
+            cy.server();
+            cy.route('/report/new/ajax*').as('report-ajax');
+
+            cy.visit('http://gloucestershire.localhost:3001/report/new?longitude=-2.093063&latitude=51.896268');
+            cy.contains('Gloucestershire County Council');
+
+            cy.wait('@report-ajax');
+        });
+
+        it('does not display extra message when selecting a "road" category', function(){
+            cy.pickCategory('A pothole in road');
+        });
+
+        it('clicks through to photo section', function(){
+            cy.nextPageReporting();
+            cy.contains('Drag photos here').should('be.visible');
+        });
+
+        it('clicks through to public details page', function(){
+            cy.nextPageReporting();
+            cy.contains('Public details').should('be.visible');
+            cy.contains('Cheltenham Borough Council').should('not.be.visible');
+        });
+    });
+});
diff --git a/bin/browser-tests b/bin/browser-tests
index f6e177f4264..ccf626e73a6 100755
--- a/bin/browser-tests
+++ b/bin/browser-tests
@@ -18,6 +18,7 @@ BEGIN {
         bromley
         buckinghamshire
         fixmystreet
+        gloucestershire
         hackney
         highwaysengland
         hounslow
diff --git a/bin/fixmystreet.com/fixture b/bin/fixmystreet.com/fixture
index 95ffe081bfc..3901cabcee7 100755
--- a/bin/fixmystreet.com/fixture
+++ b/bin/fixmystreet.com/fixture
@@ -133,17 +133,52 @@ if ($opt->test_fixtures) {
 
     foreach (
         { area_id => 2504, categories => ['Damaged, dirty, or missing bin', 'Signs and bollards', 'Busking and Street performance'], name => 'Westminster City Council', cobrand => 'westminster' },
-        { area_id => 2482, categories => ['Lamp Column Damaged', 'Sign Light Not Working'], name => 'Bromley Council', cobrand => 'bromley' },
+        { area_id => 2482, categories => [
+                { group => 'Street Lighting and Road Signs', category => 'Sign Light Not Working' },
+                { group => 'Street Lighting and Road Signs', category => 'Lamp Column Damaged' },
+            ], name => 'Bromley Council', cobrand => 'bromley' },
         { area_id => 164186, categories => ['Shelter Damaged', 'Very Urgent'], name => 'Northamptonshire Highways', cobrand => 'northamptonshire' },
-        { area_id => 163793, categories => ['Flytipping', 'Roads', 'Parks', 'Snow and ice problem/winter salting', 'Grass cutting', 'Hedge problem'], name => 'Buckinghamshire Council', cobrand => 'buckinghamshire' },
-        { area_id => 53822, categories => [ 'Grass cutting', 'Hedge problem' ], name => 'Adstock Parish Council' }, # Buckinghamshire parish council
+        { area_id => 163793, categories => [
+                'Flytipping', 'Roads',
+                { group => 'Grass, hedges and weeds', category => 'Grass cutting' },
+                { group => 'Grass, hedges and weeds', category => 'Hedge problem' },
+                { group => 'Roads & Pavements', category => 'Parks' },
+                { group => 'Roads & Pavements', category => 'Snow and ice problem/winter salting' },
+            ], name => 'Buckinghamshire Council', cobrand => 'buckinghamshire' },
+        { area_id => 53822, categories => [
+                { group => 'Grass, hedges and weeds', category => 'Grass cutting' },
+                { group => 'Grass, hedges and weeds', category => 'Hedge problem' },
+            ], name => 'Adstock Parish Council' }, # Buckinghamshire parish council
         { area_id => 164186, categories => [ 'Graffiti' ], name => 'West Northamptonshire Council' },
-        { area_id => 2483, categories => [ 'Potholes', 'Other' ], name => 'Hounslow Borough Council', cobrand => 'hounslow' },
+        { area_id => 2483, categories => [
+                'Potholes', { category => 'Other', non_public => 1 },
+            ], name => 'Hounslow Borough Council', cobrand => 'hounslow' },
         { area_id => 2508, categories => [ 'Potholes', 'Other' ], name => 'Hackney Council', cobrand => 'hackney' },
-        { area_id => 2636, categories => [ 'Potholes', 'Private', 'Extra' ], name => 'Isle of Wight Council', cobrand => 'isleofwight' },
+        { area_id => 2636, categories => [
+                { category => 'Potholes', send_method => 'Triage' },
+                { category => 'Private', send_method => 'Triage', non_public => 1 },
+                { category => 'Extra', send_method => 'Triage' },
+            ], name => 'Isle of Wight Council', cobrand => 'isleofwight' },
         { area_id => 2232, categories => ['Damaged/missing cats eye'], name => 'Lincolnshire County Council', cobrand => 'lincolnshire' },
-        { area_id => 2566, categories => [ 'General fly tipping', 'Fallen branch', 'Light Out', 'Light Dim', 'Fallen Tree', 'Damaged Tree', 'Pothole' ], name => 'Peterborough City Council', cobrand => 'peterborough' },
-        { area_id => 2498, categories => [ 'Incorrect timetable', 'Glass broken', 'Mobile Crane Operation', 'Roadworks', 'Other (TfL)' ], name => 'TfL', cobrand => 'tfl' },
+        { area_id => 2226, categories => [
+                { group => 'A pothole in pavement', category => 'A pothole in pavement' },
+                { group => 'A pothole in road', category => 'A pothole in road' },
+            ],
+            name => 'Gloucestershire County Council', cobrand => 'gloucestershire' },
+        { area_id => 2326, categories => ['Flyposting', 'Graffiti'],
+            name => 'Cheltenham Borough Council' },
+        { area_id => 2566, categories => [
+                { group => 'Trees', category => 'Fallen Tree' },
+                { group => 'Trees', category => 'Damaged Tree' },
+                { group => 'Street lighting', category => 'Light Out' },
+                { group => 'Street lighting', category => 'Light Dim' },
+                'General fly tipping', 'Fallen branch', 'Pothole',
+            ], name => 'Peterborough City Council', cobrand => 'peterborough' },
+        { area_id => 2498, categories => [
+                { group => 'Bus Stops and Shelters', category => 'Incorrect timetable' },
+                { group => 'Bus Stops and Shelters', category => 'Glass broken' },
+                'Mobile Crane Operation', 'Roadworks', 'Other (TfL)'
+            ], name => 'TfL', cobrand => 'tfl' },
         { area_id => 2237, categories => [ 'Flytipping', 'Roads', 'Parks', 'Lamp Out of Light' ], name => 'Oxfordshire County Council', cobrand => 'oxfordshire' },
         { area_id => 2551, categories => [ 'Abandoned vehicles', 'Dog fouling', 'Blocked drain' ], name => 'Bath and North East Somerset Council', cobrand => 'bathnes' },
         { area_id => 2238, categories => [ 'Flytipping', 'Roads', 'Parks' ], name => 'Shropshire Council', cobrand => 'shropshire' },
@@ -164,24 +199,6 @@ if ($opt->test_fixtures) {
         }
     }
 
-    for my $cat_name ('Fallen Tree', 'Damaged Tree') {
-        my $cat = FixMyStreet::DB->resultset('Contact')->find({
-            body => $bodies->{2566},
-            category => $cat_name,
-        });
-        $cat->set_extra_metadata( group => 'Trees' );
-        $cat->update;
-    }
-
-    for my $cat_name ('Light Out', 'Light Dim') {
-        my $cat = FixMyStreet::DB->resultset('Contact')->find({
-            body => $bodies->{2566},
-            category => $cat_name,
-        });
-        $cat->set_extra_metadata( group => 'Street lighting' );
-        $cat->update;
-    }
-
     my $drain = FixMyStreet::DB->resultset('Contact')->find({
         body => $bodies->{2551},
         category => 'Blocked drain',
@@ -229,13 +246,6 @@ if ($opt->test_fixtures) {
     });
     $child_cat->update;
 
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{163793},
-        category => 'Grass cutting',
-    });
-    $child_cat->set_extra_metadata(group => 'Grass, hedges and weeds');
-    $child_cat->update;
-
     for my $cat ('Parks', 'Snow and ice problem/winter salting') {
         $child_cat = FixMyStreet::DB->resultset("Contact")->find({
             body => $bodies->{163793},
@@ -250,17 +260,9 @@ if ($opt->test_fixtures) {
             variable => 'true',
             automated => 'hidden_field',
         });
-        $child_cat->set_extra_metadata(group => 'Roads & Pavements');
         $child_cat->update;
     }
 
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{163793},
-        category => 'Hedge problem',
-    });
-    $child_cat->set_extra_metadata(group => 'Grass, hedges and weeds');
-    $child_cat->update;
-
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({
         body => $bodies->{53822},
         category => 'Grass cutting',
@@ -277,48 +279,17 @@ if ($opt->test_fixtures) {
     });
     $child_cat->update;
 
-    for my $cat_name ('Grass cutting', 'Hedge problem') {
-        $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-            body => $bodies->{53822},
-            category => $cat_name,
-        });
-        $child_cat->set_extra_metadata(group => 'Grass, hedges and weeds');
-        if ($cat_name eq 'Hedge problem') {
-            $child_cat->set_extra_metadata(prefer_if_multiple => 1);
-        }
-        $child_cat->update;
-    }
-
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{2483},
-        category => 'Other',
-    });
-    $child_cat->update({
-        non_public => 1
+        body => $bodies->{53822},
+        category => 'Hedge problem',
     });
+    $child_cat->set_extra_metadata(prefer_if_multiple => 1);
+    $child_cat->update;
 
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{2636},
-        category => 'Potholes',
-    });
-    $child_cat->update({
-        send_method => 'Triage'
-    });
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{2636},
-        category => 'Private',
-    });
-    $child_cat->update({
-        non_public => 1,
-        send_method => 'Triage'
-    });
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({
         body => $bodies->{2636},
         category => 'Extra',
     });
-    $child_cat->update({
-        send_method => 'Triage'
-    });
     $child_cat->set_extra_fields({
         code => 'extra',
         datatype => 'string',
@@ -383,7 +354,6 @@ if ($opt->test_fixtures) {
         body => $bodies->{2482},
         category => 'Lamp Column Damaged',
     });
-    $child_cat->set_extra_metadata(group => 'Street Lighting and Road Signs');
     $child_cat->set_extra_fields({
         code => 'prow_reference',
         datatype => 'string',
@@ -394,13 +364,6 @@ if ($opt->test_fixtures) {
     });
     $child_cat->update;
 
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({
-        body => $bodies->{2482},
-        category => 'Sign Light Not Working',
-    });
-    $child_cat->set_extra_metadata(group => 'Street Lighting and Road Signs');
-    $child_cat->update;
-
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({
         body => $bodies->{2504},
         category => 'Damaged, dirty, or missing bin',
@@ -477,12 +440,6 @@ if ($opt->test_fixtures) {
 
     FixMyStreet::DB->resultset('BodyArea')->create({ body_id => $bodies->{2498}->id, area_id => 2457 });
     FixMyStreet::DB->resultset('BodyArea')->create({ body_id => $bodies->{2498}->id, area_id => 2483 });
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({ body => $bodies->{2498}, category => 'Incorrect timetable' });
-    $child_cat->set_extra_metadata(group => ['Bus Stops and Shelters']);
-    $child_cat->update;
-    $child_cat = FixMyStreet::DB->resultset("Contact")->find({ body => $bodies->{2498}, category => 'Glass broken' });
-    $child_cat->set_extra_metadata(group => ['Bus Stops and Shelters']);
-    $child_cat->update;
     $child_cat = FixMyStreet::DB->resultset("Contact")->find({ body => $bodies->{2498}, category => 'Roadworks' });
     $child_cat->set_extra_fields({ code => 'extra', datatype => 'string', order => 1, variable => 'true' });
     $child_cat->update;
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 1971087777a..785c4708d1f 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -843,6 +843,7 @@ sub stash_category_groups : Private {
             (my $id = $_) =~ s/[^a-zA-Z]+//g;
             if (@{$category_groups{$_}} == 1) {
                 my $contact = $category_groups{$_}[0];
+                $contact->set_extra_metadata(hoisted => $_);
                 push @list, [ $contact->category_display, $contact ];
             } else {
                 my $cats = $category_groups{$_};
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index e45dc15fdd9..eb910e7375f 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -1836,19 +1836,22 @@ sub generate_map : Private {
 sub check_for_category : Private {
     my ( $self, $c, $opts ) = @_;
 
-    my $category;
-    if (!$opts->{with_group}) {
-        $category = $c->get_param('category') || '';
-    } else {
-        # Group is either an actual group, or a category that wasn't in a group
-        my $group = $c->get_param('category') || $c->get_param('filter_group') || '';
-        if (any { $_->{name} && $group eq $_->{name} } @{$c->stash->{category_groups}}) {
+    my $category = $c->get_param('category') || '';
+    if ($opts->{with_group}) {
+        if (my ($group) = $category =~ /^G\|(.*)/) {
+            # A top-level group
             $c->stash->{group} = $c->stash->{filter_group} = $group;
             (my $group_id = $group) =~ s/[^a-zA-Z]+//g;
             my $cat_param = "category.$group_id";
             $category = $c->get_param($cat_param);
-        } else {
-            $category = $group;
+        } elsif ($category =~ /^H\|(.*?)\|(.*)/) {
+            # A hoisted to top-level category
+            ($group, $category) = ($1, $2);
+            $c->stash->{group} = $c->stash->{filter_group} = $group;
+        } elsif (!$category && ($group = $c->get_param('filter_group'))) {
+            if (any { $_->{name} && $group eq $_->{name} } @{$c->stash->{category_groups}}) {
+                $c->stash->{group} = $c->stash->{filter_group} = $group;
+            }
         }
     }
     $category ||= $c->stash->{report}->category || '';
diff --git a/perllib/FixMyStreet/DB/Factories.pm b/perllib/FixMyStreet/DB/Factories.pm
index f4e874c0dd2..56a90bf7e81 100644
--- a/perllib/FixMyStreet/DB/Factories.pm
+++ b/perllib/FixMyStreet/DB/Factories.pm
@@ -219,7 +219,7 @@ __PACKAGE__->fields({
     contacts => __PACKAGE__->callback(sub {
         my $categories = shift->get('categories');
         push @$categories, 'Other' unless @$categories;
-        [ map { FixMyStreet::DB::Factory::Contact->get_fields({ category => $_ }) } @$categories ];
+        [ map { FixMyStreet::DB::Factory::Contact->get_fields(ref $_ ? $_ : { category => $_ }) } @$categories ];
     }),
 });
 
@@ -233,6 +233,8 @@ use parent -norequire, "FixMyStreet::DB::Factory::Base";
 
 __PACKAGE__->resultset(FixMyStreet::DB->resultset("Contact"));
 
+__PACKAGE__->exclude(['group']);
+
 __PACKAGE__->fields({
     body_id => __PACKAGE__->callback(sub {
         my $fields = shift;
@@ -248,6 +250,10 @@ __PACKAGE__->fields({
     editor => 'Factory',
     whenedited => \'current_timestamp',
     note => 'Created by factory',
+    extra => __PACKAGE__->callback(sub {
+        my $group = shift->get('group');
+        return { group => $group } if $group;
+    }),
 });
 
 sub key_field { 'id' }
diff --git a/t/app/controller/auth_social.t b/t/app/controller/auth_social.t
index b40ceca29b9..0f52ecc6a46 100644
--- a/t/app/controller/auth_social.t
+++ b/t/app/controller/auth_social.t
@@ -129,7 +129,7 @@ for my $state ( 'refused', 'no email', 'existing UID', 'okay' ) {
                 $mech->submit_form_ok( { with_fields => { pc => $test->{pc} || 'SW1A1AA' } }, "submit location" );
                 $mech->follow_link_ok( { text_regex => qr/skip this step/i, }, "follow 'skip this step' link" );
                 $mech->submit_form(with_fields => {
-                    category => 'Bins',
+                    category => 'G|Bins',
                     'category.Bins' => 'Damaged bin',
                     title => 'Test title',
                     detail => 'Test detail',
@@ -174,7 +174,7 @@ for my $state ( 'refused', 'no email', 'existing UID', 'okay' ) {
             if ($page eq 'report') {
                 $mech->content_contains('/report/new');
                 $mech->content_contains('Salt bin');
-                $mech->content_contains('name="category" value="Bins" data-subcategory="Bins" checked');
+                $mech->content_like(qr{value="G|Bins"\s+data-subcategory="Bins" checked});
                 $mech->content_contains('name="category.Bins" data-category_display="Damaged bin" value=\'Damaged bin\' checked');
             } elsif ($page eq 'update') {
                 $mech->content_contains('/report/update');
@@ -320,7 +320,7 @@ for my $tw_state ( 'refused', 'existing UID', 'no email' ) {
                 $mech->submit_form_ok( { with_fields => { pc => 'SW1A1AA' } }, "submit location" );
                 $mech->follow_link_ok( { text_regex => qr/skip this step/i, }, "follow 'skip this step' link" );
                 $mech->submit_form(with_fields => {
-                    category => 'Bins',
+                    category => 'G|Bins',
                     'category.Bins' =>'Damaged bin',
                     title => 'Test title',
                     detail => 'Test detail',
diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t
index 08c0496bb09..624b0abb63f 100644
--- a/t/app/controller/report_new.t
+++ b/t/app/controller/report_new.t
@@ -680,9 +680,9 @@ subtest "category groups" => sub {
         my $div = '<div[^>]*>\s*';
         my $div_end = '</div>\s*';
         my $pavements_label = '<label[^>]* for="category_Pavements">Pavements</label>\s*' . $div_end;
-        my $pavements_input = '<input[^>]* value="Pavements" data-subcategory="Pavements">\s*';
-        my $pavements_input_checked = '<input[^>]* value="Pavements" data-subcategory="Pavements" checked>\s*';
-        my $roads = $div . '<input[^>]* value="Roads" data-subcategory="Roads">\s*<label[^>]* for="category_Roads">Roads</label>\s*' . $div_end;
+        my $pavements_input = '<input[^>]* value="G|Pavements"\s+data-subcategory="Pavements">\s*';
+        my $pavements_input_checked = '<input[^>]* value="G|Pavements"\s+data-subcategory="Pavements" checked>\s*';
+        my $roads = $div . '<input[^>]* value="G|Roads"\s+data-subcategory="Roads">\s*<label[^>]* for="category_Roads">Roads</label>\s*' . $div_end;
         my $trees_label = '<label [^>]* for="category_\d+">Trees</label>\s*' . $div_end;
         my $trees_input = $div . '<input[^>]* value=\'Trees\'>\s*';
         my $trees_input_checked = $div . '<input[^>]* value=\'Trees\' checked>\s*';
@@ -708,18 +708,28 @@ subtest "category groups" => sub {
         $mech->content_like(qr{$fieldset_pavements$options});
         $mech->content_like(qr{$fieldset_roads$options});
         # Server submission of pavement subcategory
-        $mech->get_ok("/report/new?lat=$saved_lat&lon=$saved_lon&category=Pavements&category.Pavements=Potholes");
+        $mech->get_ok("/report/new?lat=$saved_lat&lon=$saved_lon&category=G|Pavements&category.Pavements=Potholes");
         $mech->content_like(qr{$pavements_input_checked$pavements_label$roads$trees_input$trees_label</fieldset>});
         $mech->content_like(qr{$fieldset_pavements$optionsS});
         $mech->content_like(qr{$fieldset_roads$options});
 
         $contact9->update( { extra => { group => 'Lights' } } );
         $mech->get_ok("/report/new?lat=$saved_lat&lon=$saved_lon");
-        $streetlighting = $div . '<input[^>]*value=\'Street lighting\'>\s*<label[^>]* for="category_\d+">Street lighting</label>\s*' . $div_end;
+        $streetlighting = $div . '<input[^>]*value=\'H|Lights\|Street lighting\'>\s*<label[^>]* for="category_\d+">Street lighting</label>\s*' . $div_end;
+        $potholes_input = $div . '<input[^>]* value=\'H|Pavements\|Potholes\'>\s*';
         $potholes_label = '<label[^>]* for="category_\d+">Potholes</label>\s*' . $div_end;
         $mech->content_like(qr{$potholes_input$potholes_label$roads$streetlighting$trees_input$trees_label</fieldset>});
         $mech->content_unlike(qr{$fieldset_pavements});
         $mech->content_like(qr{$fieldset_roads$options});
+
+        $mech->submit_form_ok({ with_fields => {
+            category => 'H|Lights|Street lighting',
+            title => 'Test Report',
+            detail => 'Test report details',
+            username_register => 'jo@example.org',
+            name => 'Jo Bloggs',
+        } });
+        $mech->content_contains('Now check your email');
     };
 };
 
diff --git a/t/cobrand/brent.t b/t/cobrand/brent.t
index f3b93eb03d3..799a8294249 100644
--- a/t/cobrand/brent.t
+++ b/t/cobrand/brent.t
@@ -927,7 +927,7 @@ FixMyStreet::override_config {
             with_fields => {
                 title => "Test Report",
                 detail => 'Test report details.',
-                category => 'Parks and open spaces',
+                category => 'G|Parks and open spaces',
                 'category.Parksandopenspaces' => 'Overgrown grass',
             }
         }, "submit details");
@@ -951,7 +951,7 @@ FixMyStreet::override_config {
             with_fields => {
                 title => "Test Report",
                 detail => 'Test report details.',
-                category => 'Parks and open spaces',
+                category => 'G|Parks and open spaces',
                 'category.Parksandopenspaces' => 'Overgrown grass',
             }
         }, "submit details");
@@ -970,7 +970,7 @@ FixMyStreet::override_config {
             with_fields => {
                 title => "Test Report",
                 detail => 'Test report details.',
-                category => 'Parks and open spaces',
+                category => 'G|Parks and open spaces',
                 'category.Parksandopenspaces' => 'Overgrown grass',
             }
         }, "submit details");
@@ -994,7 +994,7 @@ FixMyStreet::override_config {
             with_fields => {
                 title => "Test Report",
                 detail => 'Test report details.',
-                category => 'Parks and open spaces',
+                category => 'G|Parks and open spaces',
                 'category.Parksandopenspaces' => 'Ponds',
             }
         }, "submit details");
diff --git a/t/cobrand/northumberland.t b/t/cobrand/northumberland.t
index 0e5d51c38fb..7764597bcd9 100644
--- a/t/cobrand/northumberland.t
+++ b/t/cobrand/northumberland.t
@@ -87,7 +87,7 @@ FixMyStreet::override_config {
         $mech->content_contains('Main Carriageway');
         $mech->content_contains('Potholes');
         $mech->content_contains("Trees'>");
-        $mech->content_contains('value=\'Flytipping\' data-nh="1"');
+        $mech->content_contains('value=\'H|Staff Only - Out Of Hours|Flytipping\' data-nh="1"');
 
         # A-road where NH responsible for litter, council categories will also be present
         mock_road("A5103", 1);
@@ -97,7 +97,7 @@ FixMyStreet::override_config {
         $mech->content_contains('Main Carriageway');
         $mech->content_contains('Potholes');
         $mech->content_contains('Trees\'>');
-        $mech->content_contains('value=\'Flytipping\' data-nh="1"');
+        $mech->content_contains('value=\'H|Staff Only - Out Of Hours|Flytipping\' data-nh="1"');
 
         # A-road where NH not responsible for litter, no NH litter categories
         mock_road("A34", 0);
@@ -107,7 +107,7 @@ FixMyStreet::override_config {
         $mech->content_lacks('Main Carriageway');
         $mech->content_contains('Potholes');
         $mech->content_contains('Trees\'>');
-        $mech->content_contains('value=\'Flytipping\' data-nh="1"');
+        $mech->content_contains('value=\'H|Staff Only - Out Of Hours|Flytipping\' data-nh="1"');
     };
 };
 
diff --git a/templates/web/base/report/new/category.html b/templates/web/base/report/new/category.html
index e83a73a3b85..7efcd900ebf 100644
--- a/templates/web/base/report/new/category.html
+++ b/templates/web/base/report/new/category.html
@@ -24,7 +24,12 @@
         [%~ FOREACH group_or_cat IN category_groups ~%]
             <div class="govuk-radios__item">
           [% IF group_or_cat.name %]
-                <input class="govuk-radios__input" required id="category_[% group_or_cat.id %]" type="radio" name="category" value="[% group_or_cat.name %]" data-subcategory="[% group_or_cat.id %]"[% ' checked' IF filter_group == group_or_cat.name %]>
+                <input class="govuk-radios__input" required type="radio" name="category"
+                    id="category_[% group_or_cat.id %]"
+                    data-valuealone="[% group_or_cat.name %]"
+                    value="G|[% group_or_cat.name %]"
+                    data-subcategory="[% group_or_cat.id %]"
+                    [%~ ' checked' IF filter_group == group_or_cat.name %]>
             <label class="govuk-label govuk-radios__label" for="category_[% group_or_cat.id %]">[% group_or_cat.name %]</label>
             [% group_hint = group_or_cat.categories.first.get_extra_metadata('group_hint') %]
             [%~ IF group_hint %]
@@ -32,9 +37,15 @@
               [% group_hint | safe %]
             </div>
             [% END ~%]
-          [% ELSE # A category not in a group %]
-            [% cat_lc = group_or_cat.category | lower =%]
-            <input class="govuk-radios__input" required id="category_[% group_or_cat.id %]" type="radio" name="category" data-category_display="[% group_or_cat.category_display %]" value='[% group_or_cat.category %]'
+          [% ELSE # A category not in a group, or a hoisted category %]
+            [% cat_lc = group_or_cat.category | lower;
+                hoisted = group_or_cat.get_extra_metadata('hoisted');
+            =%]
+            <input class="govuk-radios__input" required type="radio" name="category"
+                id="category_[% group_or_cat.id %]"
+                data-category_display="[% group_or_cat.category_display %]"
+                data-valuealone="[% group_or_cat.category %]"
+                value='[% "H|" _ hoisted _ "|" IF hoisted %][% group_or_cat.category %]'
                 [%~ ' checked' IF ( report.category == group_or_cat.category || category_lc == cat_lc ) AND NOT filter_group ~%]
                 [%~ ' data-nh="1"' IF group_or_cat.get_extra_metadata('nh_council_cleaning') ~%]
                 >
diff --git a/web/cobrands/bathnes/layout.scss b/web/cobrands/bathnes/layout.scss
index fb27b08b813..bf7a1b1841a 100644
--- a/web/cobrands/bathnes/layout.scss
+++ b/web/cobrands/bathnes/layout.scss
@@ -5,7 +5,7 @@
 
 .header-search .site-search .form-control {
     // overrides from default .form-control
-    @include border-radius(0);
+    border-radius: 0;
     box-shadow: none;
     border: solid 1px #bfc1c3;
     display: inline-block;
diff --git a/web/cobrands/borsetshire/base.scss b/web/cobrands/borsetshire/base.scss
index 1f97eeabf0b..e2b1d63d9a1 100644
--- a/web/cobrands/borsetshire/base.scss
+++ b/web/cobrands/borsetshire/base.scss
@@ -262,7 +262,7 @@ body.authpage {
 
     .govuk-input {
         border: 1px solid $form-control-border-color;
-        @include border-radius(4px);
+        border-radius: 4px;
         box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
 
         &:focus {
diff --git a/web/cobrands/brent/layout.scss b/web/cobrands/brent/layout.scss
index 66209a1f31f..72fa4bb8997 100644
--- a/web/cobrands/brent/layout.scss
+++ b/web/cobrands/brent/layout.scss
@@ -111,7 +111,7 @@ body:not(.mappage) {
 body.mappage {
   // Add a red border-bottom *inside* the header
   #site-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border-bottom: none;
   }
 
diff --git a/web/cobrands/bristol/layout.scss b/web/cobrands/bristol/layout.scss
index 4d10027c9ab..7f38931dabc 100644
--- a/web/cobrands/bristol/layout.scss
+++ b/web/cobrands/bristol/layout.scss
@@ -88,7 +88,7 @@ body:not(.mappage) {
 body.mappage {
   // Add a red border-bottom *inside* the header
   #site-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     border-bottom: solid 5px $bcc_red;
   }
 
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index 20c1d8ce4c6..a767c8b4fbf 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -55,7 +55,7 @@ body:not(.mappage) {
     padding: 0.75em;
 
     margin: 0;
-    @include border-radius(0.25em);
+    border-radius: 0.25em;
     &:hover, &:focus {
       background: darken($bromley_blue, 10%);
       color: #fff;
diff --git a/web/cobrands/camden/layout.scss b/web/cobrands/camden/layout.scss
index 450f3a16a3a..ba79d9d4b38 100644
--- a/web/cobrands/camden/layout.scss
+++ b/web/cobrands/camden/layout.scss
@@ -82,7 +82,7 @@ body:not(.mappage) {
 
 body.mappage {
   #site-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
 
   // Reinstate the floated nav bar on map pages
diff --git a/web/cobrands/cyclinguk/_variables.scss b/web/cobrands/cyclinguk/_variables.scss
index b935dddcb2d..dbb0b9012e3 100644
--- a/web/cobrands/cyclinguk/_variables.scss
+++ b/web/cobrands/cyclinguk/_variables.scss
@@ -90,7 +90,7 @@ $button-border-radius: 2rem; // This var doesn't exist in other cobrands
 // Usage 
 /*
   .btn--primary {
-      @include border-radius($button-border-radius);
+      border-radius: $button-border-radius;
       @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text,$focus-bg-bottom: $button-primary-focus-bg-bottom, $focus-bg-top: $button-primary-focus-bg-top, $focus-border: $button-primary-focus-border, $focus-text: $button-primary-focus-text);
   }
 */
@@ -109,7 +109,7 @@ $button-primary-focus-text: $primary_text;
 
 /*
   .btn, .btn-secondary {
-      @include border-radius($button-border-radius);
+      border-radius: $button-border-radius;
       @include button-variant($bg-top: $button-secondary-bg-top, $bg-bottom: $button-secondary-bg-bottom, $border: $button-secondary-border, $text: $button-secondary-text, $hover-bg-bottom: $button-secondary-hover-bg-bottom, $hover-bg-top: $button-secondary-hover-bg-top, $hover-border: $button-secondary-hover-border, $hover-text: $button-secondary-hover-text,$focus-bg-bottom: $button-secondary-focus-bg-bottom, $focus-bg-top: $button-secondary-focus-bg-top, $focus-border: $button-secondary-focus-border, $focus-text: $button-secondary-focus-text);
   }
 */
diff --git a/web/cobrands/cyclinguk/base.scss b/web/cobrands/cyclinguk/base.scss
index 1b56dcea462..6dad893942c 100644
--- a/web/cobrands/cyclinguk/base.scss
+++ b/web/cobrands/cyclinguk/base.scss
@@ -91,7 +91,7 @@ $site-logo-height: 76px;
 a#geolocate_link,
 #report-cta,
 .nav-menu--main a.report-a-problem-btn  {
-    @include border-radius($button-border-radius);
+    border-radius: $button-border-radius;
     text-transform: uppercase;
     font-weight: 400;
     // line-height: 100%;
diff --git a/web/cobrands/cyclinguk/layout.scss b/web/cobrands/cyclinguk/layout.scss
index 82ccab2a07b..39d247b8462 100644
--- a/web/cobrands/cyclinguk/layout.scss
+++ b/web/cobrands/cyclinguk/layout.scss
@@ -85,7 +85,7 @@ h1 {
 
 // BUTTONS
 .nav-menu--main a.report-a-problem-btn  {
-    @include border-radius($button-border-radius);
+    border-radius: $button-border-radius;
     text-transform: uppercase;
     font-weight: 400;
     line-height: 100%;
diff --git a/web/cobrands/eastherts/base.scss b/web/cobrands/eastherts/base.scss
index 6167adc59e3..ccc5ec896f7 100644
--- a/web/cobrands/eastherts/base.scss
+++ b/web/cobrands/eastherts/base.scss
@@ -28,7 +28,7 @@ button:focus {
 }
 
 .eh-header__form {
-    @include flex-container();
+    display: flex;
     margin-top: 1em;
 }
 
@@ -56,9 +56,9 @@ button:focus {
 
     width: 20%;
 
-    @include flex-container();
-    @include flex-align(center);
-    @include justify-content(center);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-align: center;
 
     i {
diff --git a/web/cobrands/eastherts/layout.scss b/web/cobrands/eastherts/layout.scss
index 6f6bd8f667f..9454801d289 100644
--- a/web/cobrands/eastherts/layout.scss
+++ b/web/cobrands/eastherts/layout.scss
@@ -7,7 +7,7 @@
 // so that it sits in front of the grey border-bottom from .eh-header
 
 .eh-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     height: $eh-header-height + $eh-nav-height;
     border-bottom: $eh-nav-height solid $eh_light_grey;
 }
diff --git a/web/cobrands/fiksgatami/layout.scss b/web/cobrands/fiksgatami/layout.scss
index f3cbc14e0a3..abf87cdbf13 100644
--- a/web/cobrands/fiksgatami/layout.scss
+++ b/web/cobrands/fiksgatami/layout.scss
@@ -22,7 +22,7 @@
   padding: 0em 0.5em;
   margin-#{$left}: 0.25em;
   background-color: $primary;
-  @include border-radius(0 0 0.375em 0.375em);
+  border-radius: 0 0 0.375em 0.375em;
   a {
     background-color: transparent;
     color: $primary_text;
diff --git a/web/cobrands/fixamingata/layout.scss b/web/cobrands/fixamingata/layout.scss
index 0022dad6fd0..6cd62a61a40 100644
--- a/web/cobrands/fixamingata/layout.scss
+++ b/web/cobrands/fixamingata/layout.scss
@@ -76,7 +76,7 @@ body.mappage {
 }
 
 body.frontpage {
-    @include linear-gradient(white 5%, #9adfef 65%);
+    background: linear-gradient(white 5%, #9adfef 65%);
 
     #site-logo {
         width: 300px;
diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss
index 27c7ee995c4..78da733d772 100644
--- a/web/cobrands/fixmystreet.com/layout.scss
+++ b/web/cobrands/fixmystreet.com/layout.scss
@@ -89,7 +89,7 @@ body.mappage {
 
 .nav-menu--main {
     a:hover {
-        @include linear-gradient(#000, #444 10%, #444 95%, #111);
+        background: linear-gradient(#000, #444 10%, #444 95%, #111);
     }
     a.report-a-problem-btn:hover {
         background: $primary/1.1;
@@ -109,7 +109,7 @@ body.mappage {
 }
 body.mappage {
     #site-header {
-        @include linear-gradient(#000, #222 10%, #222 90%, #000);
+        background: linear-gradient(#000, #222 10%, #222 90%, #000);
     }
 }
 
@@ -223,7 +223,7 @@ body.frontpage {
 }
 
 .next-steps {
-  @include flex-container();
+  display: flex;
   margin-bottom: 2em; // add some space between this and the footer
 }
 
@@ -357,12 +357,12 @@ footer {
 
 .dashboard-fms-case-studies {
     & > div {
-        @include flex-container();
-        @include flex-wrap(wrap);
-        @include justify-content(space-between);
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
 
         a {
-            @include box-sizing(border-box);
+            box-sizing: border-box;
             display: block;
             width: 48%;
             margin-bottom: 0;
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index de09f6df3da..c932eeeaf1a 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -747,18 +747,18 @@ $.extend(fixmystreet.set_up, {
         var $subcategory_page = $('.js-reporting-page--subcategory');
         var subcategory_id = $(this).data("subcategory");
         $(".js-subcategory").addClass('hidden-js');
-        var $input;
+        var val;
         if (subcategory_id === undefined) {
             $subcategory_page.addClass('js-reporting-page--skip');
-            $input = $(this);
+            val = $(this).data('valuealone'); // Don't want "H" hoisted bit of the submitted value
         } else {
             $subcategory_page.removeClass('js-reporting-page--skip');
             var $subcategory = $("#subcategory_" + subcategory_id);
             $subcategory.removeClass('hidden-js');
-            $input = $subcategory.find('input:checked');
+            val = $subcategory.find('input:checked').val();
         }
         if (!no_event) {
-            category_changed($input.val());
+            category_changed(val);
         }
     });
 
@@ -1847,12 +1847,13 @@ fixmystreet.update_pin = function(lonlat, savePushState) {
 function re_select(group, category) {
     var group_id = group.replace(/[^a-z]+/gi, '');
     var cat_in_group = $("#subcategory_" + group_id + " input[value=\"" + category + "\"]");
+    // Want only the group/category name itself, not the G| H| prefixes
     if (cat_in_group.length) {
-        $('#form_category_fieldset input[value="' + group + '"]')[0].checked = true;
+        $('#form_category_fieldset input[data-valuealone="' + group + '"]')[0].checked = true;
         cat_in_group[0].checked = true;
     } else {
         var top_level = group || category;
-        var top_level_match = $("#form_category_fieldset input[value=\"" + top_level + "\"]");
+        var top_level_match = $("#form_category_fieldset input[data-valuealone=\"" + top_level + "\"]");
         if (top_level && top_level_match.length) {
             top_level_match[0].checked = true;
         }
@@ -1976,7 +1977,7 @@ fixmystreet.fetch_reporting_data = function() {
 fixmystreet.reporting = {};
 fixmystreet.reporting.selectedCategory = function() {
     var $group_or_cat_input = $('#form_category_fieldset input:checked'),
-        group_or_cat = $group_or_cat_input.val() || '',
+        group_or_cat = $group_or_cat_input.data('valuealone') || '', // Want only the group/category name itself, not the G| H| prefix
         group_id = group_or_cat.replace(/[^a-z]+/gi, ''),
         $subcategory = $("#subcategory_" + group_id),
         $subcategory_input = $subcategory.find('input:checked'),
diff --git a/web/cobrands/gloucestershire/_variables.scss b/web/cobrands/gloucestershire/_variables.scss
index c49a0d1b036..2cf970d5458 100755
--- a/web/cobrands/gloucestershire/_variables.scss
+++ b/web/cobrands/gloucestershire/_variables.scss
@@ -53,7 +53,7 @@ $button-border-radius: 10px; // This var doesn't exist in other cobrands
 // Usage 
 /*
   .btn, .btn--primary, .btn--primary {
-      @include border-radius($button-border-radius);
+      border-radius: $button-border-radius;
       @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text);
   }
 */
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index b7c52d0ce5c..657cf8de18b 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -319,7 +319,7 @@ body.mappage {
     background-position: bottom center;
     background-repeat: repeat no-repeat;
     background-size: contain;
-    @include flex(0 0 auto);
+    flex: 0 0 auto;
     height: 125px;
 }
 
@@ -332,7 +332,7 @@ footer {
     color: $contrast_text;
     padding: 2.5rem 0 3rem;
     text-align: center;
-    @include flex(0 0 auto);
+    flex: 0 0 auto;
     overflow: hidden;
     .list__link,
     a {
diff --git a/web/cobrands/hackney/base.scss b/web/cobrands/hackney/base.scss
index 733dab9b7a3..b3eb9a5990f 100644
--- a/web/cobrands/hackney/base.scss
+++ b/web/cobrands/hackney/base.scss
@@ -54,7 +54,7 @@
       width: 0;
       padding-left: 50px;
       overflow: hidden;
-      @include flex(0 0 auto);
+      flex: 0 0 auto;
       background: $black url('/cobrands/hackney/hackney-search-icon.png') no-repeat 50% 50%;
       background-size: 25px 25px;
       color: $black;
diff --git a/web/cobrands/hackney/layout.scss b/web/cobrands/hackney/layout.scss
index 720f1a18f1f..9c0ba323d4a 100644
--- a/web/cobrands/hackney/layout.scss
+++ b/web/cobrands/hackney/layout.scss
@@ -29,7 +29,7 @@
   padding: 0em 0.5em;
   margin-#{$left}: 0.25em;
   background-color: $primary;
-  @include border-radius(0 0 0.375em 0.375em);
+  border-radius: 0 0 0.375em 0.375em;
   a {
     background-color: transparent;
     color: $primary_text;
diff --git a/web/cobrands/hart/_variables.scss b/web/cobrands/hart/_variables.scss
index 319f22959c0..68036068ba4 100644
--- a/web/cobrands/hart/_variables.scss
+++ b/web/cobrands/hart/_variables.scss
@@ -42,7 +42,7 @@ $button-border-radius: 0; // This var doesn't exist in other cobrands
 // Usage 
 /*
   .btn, .btn--primary, .btn--primary {
-      @include border-radius($button-border-radius);
+      border-radius: $button-border-radius;
       @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text);
   }
 */
diff --git a/web/cobrands/hart/base.scss b/web/cobrands/hart/base.scss
index f0e401fd786..769d5306d22 100644
--- a/web/cobrands/hart/base.scss
+++ b/web/cobrands/hart/base.scss
@@ -38,7 +38,7 @@
 
 #report-cta, #nav-link {
     background-color: $nav_hover_background_colour;
-    @include border-radius(0);
+    border-radius: 0;
     padding: 12px 10px;
     font-size: 18px;
     line-height: 100%;
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 2749c11544d..562df566884 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -120,7 +120,7 @@ a {
 .btn--primary,
 .btn-secondary,
 .postcode-form-box input#sub {
-  @include border-radius($button-border-radius);
+  border-radius: $button-border-radius;
   @extend .h6;
 }
 
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 2e68af8cae4..8ef1404463d 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -38,7 +38,7 @@
     }
 
     a.report-a-problem-btn {
-        @include border-radius(0);
+        border-radius: 0;
         &:hover {
             background-color: $primary_b;
             color: $nav_colour;
diff --git a/web/cobrands/highwaysengland/base.scss b/web/cobrands/highwaysengland/base.scss
index 56a165eca59..1e5d965f32b 100644
--- a/web/cobrands/highwaysengland/base.scss
+++ b/web/cobrands/highwaysengland/base.scss
@@ -53,7 +53,7 @@
     width: 20px;
     height: 20px;
     margin-right: 1em;
-    @include flex(0 0 auto); // do not shrink
+    flex: 0 0 auto; // do not shrink
 }
 
 .front-warning {
@@ -61,8 +61,8 @@
     line-height: 1.3;
 
     .container {
-        @include flex-container();
-        @include flex-align(center);
+        display: flex;
+        align-items: center;
         padding-top: 1em;
         padding-bottom: 1em;
 
@@ -79,8 +79,8 @@ p.form-error {
     border-radius: 0;
     background: mix($color-he-red, #fff, 25%);
     border-left: 8px solid $color-he-red;
-    @include flex-container();
-    @include flex-align(center);
+    display: flex;
+    align-items: center;
 
     &:before {
         @extend %warning-icon;
diff --git a/web/cobrands/highwaysengland/layout.scss b/web/cobrands/highwaysengland/layout.scss
index 969c9393160..48fef35add3 100644
--- a/web/cobrands/highwaysengland/layout.scss
+++ b/web/cobrands/highwaysengland/layout.scss
@@ -43,7 +43,7 @@
 
 div.form-error,
 p.form-error {
-    @include flex-container();
+    display: flex;
 }
 
 #front-main {
diff --git a/web/cobrands/lincolnshire/layout.scss b/web/cobrands/lincolnshire/layout.scss
index 6c35058797d..4092ff9e720 100644
--- a/web/cobrands/lincolnshire/layout.scss
+++ b/web/cobrands/lincolnshire/layout.scss
@@ -69,7 +69,7 @@ body:not(.mappage) {
 body.mappage {
     // Add a red border-bottom *inside* the header
     #site-header {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         border-bottom: solid 5px $primary;
     }
 
diff --git a/web/cobrands/merton/base.scss b/web/cobrands/merton/base.scss
index 8ddcfd3dbd7..43833cc0750 100644
--- a/web/cobrands/merton/base.scss
+++ b/web/cobrands/merton/base.scss
@@ -55,7 +55,7 @@ a#geolocate_link,
 :not(.segmented-control--radio) > .btn,
 .govuk-button  {
     @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text,$focus-bg-bottom: $button-primary-focus-bg-bottom, $focus-bg-top: $button-primary-focus-bg-top, $focus-border: $button-primary-focus-border, $focus-text: $button-primary-focus-text);
-    @include border-radius(0);
+    border-radius: 0;
     border-bottom: 3px solid $merton-dark-green;
     background-image: none;
     font-size: 1.2rem;
diff --git a/web/cobrands/northnorthants/layout.scss b/web/cobrands/northnorthants/layout.scss
index 5489633c0d2..823aa582317 100755
--- a/web/cobrands/northnorthants/layout.scss
+++ b/web/cobrands/northnorthants/layout.scss
@@ -17,7 +17,7 @@ a.platform-logo {
 .nav-menu {
   a, span, a.report-a-problem-btn {
     font-size: 1em;
-    @include border-radius($button-border-radius);
+    border-radius: $button-border-radius;
   }
 
   span {
diff --git a/web/cobrands/northumberland/_variables.scss b/web/cobrands/northumberland/_variables.scss
index 1ef68a22ba7..a99a590d87f 100755
--- a/web/cobrands/northumberland/_variables.scss
+++ b/web/cobrands/northumberland/_variables.scss
@@ -59,7 +59,7 @@ $button-border-radius: 0; // This var doesn't exist in other cobrands
 // Usage 
 /*
   .btn, .btn--primary, .btn--primary {
-      @include border-radius($button-border-radius);
+      border-radius: $button-border-radius;
       @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text);
   }
 */
diff --git a/web/cobrands/oxfordshire/_oxfordshire-footer.scss b/web/cobrands/oxfordshire/_oxfordshire-footer.scss
index 6fb95f3ca09..068f96901ab 100644
--- a/web/cobrands/oxfordshire/_oxfordshire-footer.scss
+++ b/web/cobrands/oxfordshire/_oxfordshire-footer.scss
@@ -41,15 +41,15 @@
 }
 
 .occlss-layout {
-    @include flex-container();
-    @include flex-wrap(wrap);
+    display: flex;
+    flex-wrap: wrap;
     position: relative;
     padding: 0;
 }
 
 .occlss-layout__col {
-    @include box-sizing(border-box);
-    @include flex-direction(column);
+    box-sizing: border-box;
+    flex-direction: column;
     position: relative;
     width: 100%;
     vertical-align: top;
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index 922d324a5ca..216aabf25c9 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -23,7 +23,7 @@ a:not([class]):focus {
 
 .form-control,
 .postcode-form-box input#pc {
-    @include border-radius(none);
+    border-radius: 0;
     box-shadow: none;
 
     border: 1px solid $form-control-border-color;
@@ -176,10 +176,10 @@ dd, p {
         #ffffff, #ffffff, #ffffff, #000,
         #f3f3f3, #f3f3f3, #f3f3f3, #000
     );
-    @include box-shadow(
+    box-shadow:
         inset 0 -4px 0 #f3f3f3,
         0 2px 4px 0 rgba(26, 26, 26, 0.2)
-    );
+    ;
 }
 
 // Override all the "primary" buttons across the site!
@@ -190,10 +190,10 @@ dd, p {
         $color-oxfordshire-bright-blue, $color-oxfordshire-bright-blue, $color-oxfordshire-bright-blue, #fff,
         darken(#0e73d8, 15%), darken(#0e73d8, 15%), darken(#0e73d8, 15%), #fff
     );
-    @include box-shadow(
+    box-shadow:
         inset 0 -4px 0 darken(#0e73d8, 15%),
         0 2px 4px 0 rgba(26, 26, 26, 0.2)
-    );
+    ;
 }
 
 .form-txt-submit-box input[type="submit"] {
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index ee66b983b6d..699624ef1b6 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -8,7 +8,7 @@ $mappage-header-height: 10em;
 }
 
 #site-header {
-    @include box-sizing(border-box); // so that $mappage-header-height doesn't have to account for internal padding
+    box-sizing: border-box; // so that $mappage-header-height doesn't have to account for internal padding
     background: $color-oxfordshire-dark-green url("/cobrands/oxfordshire/images/occ-badge-nav-bg.png");
     background-repeat: no-repeat;
     background-position: 125% 31%;
@@ -40,10 +40,10 @@ $mappage-header-height: 10em;
 .nav-menu--main {
     margin-top: 5.5em;
     float: none;
-    @include flex-container();
+    display: flex;
 
     li {
-        @include flex(1 1 0%); // flex-basis (3rd argument) must have a unit, to avoid IE10-11 bugs
+        flex: 1 1 0%; // flex-basis (3rd argument) must have a unit, to avoid IE10-11 bugs
         padding: 8px 16px;
         position: relative;
     }
@@ -181,7 +181,7 @@ body.mappage {
       margin-top: 0;
       padding: 0;
       height: (10 * 16px) - 70px - 4px - 1px; // $mappage-header-height minus .nav-wrapper top, minus .nav-wrapper borders
-      @include flex-align(center);
+      align-items: center;
 
       li {
           padding-top: 0;
diff --git a/web/cobrands/sass/_admin.scss b/web/cobrands/sass/_admin.scss
index 32abe39343e..6a997fb9daf 100644
--- a/web/cobrands/sass/_admin.scss
+++ b/web/cobrands/sass/_admin.scss
@@ -198,7 +198,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
 }
 
 .extra-metadata-item__header {
-    @include flex-container();
+    display: flex;
     line-height: 1;
     background: #f3f3f3;
 
@@ -251,7 +251,7 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
 }
 
 .extra-metadata-item__header__title {
-    @include flex(1 0 auto);
+    flex: 1 0 auto;
     cursor: pointer;
 }
 
@@ -265,13 +265,13 @@ $button_bg_col: #a1a1a1;  // also search bar (tables)
     padding: 0 1em;
 
     .row {
-        @include flex-container();
+        display: flex;
         margin: 0 -1em;
     }
 
     .col {
-        @include box-sizing(border-box);
-        @include flex(1 0 auto);
+        box-sizing: border-box;
+        flex: 1 0 auto;
         padding: 0 1em;
         width: 50%;
     }
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 016b44b8c78..c4c3a6df9a3 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -338,7 +338,7 @@ input[type="time"],
 input[type="datetime"],
 input[type="url"],
 textarea {
-  @include box-sizing(border-box);
+  box-sizing: border-box;
   display: block;
   width: 100%;
   padding: 0.5em;
@@ -375,7 +375,7 @@ legend,
   display: block;
   background-color: #fff;
   border: 1px solid $form-control-border-color;
-  @include border-radius(4px);
+  border-radius: 4px;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
   font-family: inherit; // eg: stop Firefox and IE10-11 using Courier in textareas
   margin-bottom: 0.5em;
@@ -607,8 +607,8 @@ small.or:after {
 
 .form-txt-submit-box {
   @include clearfix();
-  @include flex-container();
-  @include flex-wrap(wrap);
+  display: flex;
+  flex-wrap: wrap;
   input[type="password"],
   input[type="tel"],
   input[type="number"],
@@ -617,17 +617,17 @@ small.or:after {
   select {
     width: auto;
     max-width: none;
-    @include flex(72 0 auto);
+    flex: 72 0 auto;
   }
   input[type="submit"] {
-    @include flex(28 0 auto);
+    flex: 28 0 auto;
     margin: 0 0.25em 0.5em;
     padding-top: 0.6em;
     padding-bottom: 0.5em;
   }
 
   &:has(.form-error) {
-    @include flex-direction(column);
+    flex-direction: column;
   }
 }
 
@@ -650,12 +650,13 @@ small.or:after {
 // form errors
 div.form-error,
 p.form-error {
-  @include inline-block;
+  display: inline-block;
+  vertical-align: middle;
   background: $error_color;
   color: #fff;
   padding: 0 0.5em;
   margin-bottom: 0;
-  @include border-radius(0.25em 0.25em 0 0);
+  border-radius: 0.25em 0.25em 0 0;
   a {
     color: white;
     text-decoration: underline;
@@ -668,7 +669,7 @@ p.form-error {
 input.form-error,
 textarea.form-error {
   border-color: $error_color;
-  @include border-radius(0 0.25em 0.25em 0.25em);
+  border-radius: 0 0.25em 0.25em 0.25em;
 }
 
 .form-error__box {
@@ -681,14 +682,14 @@ ul.error {
   background: $error_color;
   color: #fff;
   padding: 0 0.5em;
-  @include border-radius(0.25em);
+  border-radius: 0.25em;
 }
 
 .form-success {
   background: #009900;
   color: #fff;
   padding: 0 0.5em;
-  @include border-radius(0.25em);
+  border-radius: 0.25em;
 }
 
 .duplicate-report-suggestions {
@@ -1251,7 +1252,7 @@ input.final-submit {
   width: 100%;
   margin-left: 0;
   margin-right: 0;
-  @include box-sizing(border-box);
+  box-sizing: border-box;
 }
 
 // Don't want space between block-level buttons,
@@ -1366,14 +1367,14 @@ input.final-submit {
 
   @media print {
     display: block;
-    @include flex-container();
-    @include flex-wrap(wrap);
+    display: flex;
+    flex-wrap: wrap;
   }
 
   & > * {
     margin-top: 0.5em;
     width: 33%;
-    @include flex(0 0 auto);
+    flex: 0 0 auto;
   }
 
   h4 {
@@ -1664,10 +1665,10 @@ input.final-submit {
 
 .item-list__item--expandable__actions {
   clear: both; // clear floated .update-img images
-  @include flex-container();
+  display: flex;
 
   & > * {
-    @include flex(1); // Force equal width children
+    flex: 1; // Force equal width children
   }
 }
 
@@ -2181,7 +2182,7 @@ html.js #map .noscript {
 // in the mobile reporting view, and for the "Hide pins / Get updates"
 // etc links on mobile and desktop map pages.
 .sub-map-links {
-  @include flex-container();
+  display: flex;
 
   position: absolute;
   #{$left}: 0;
@@ -2190,8 +2191,8 @@ html.js #map .noscript {
   margin: 0;
 
   a {
-    @include box-sizing(border-box);
-    @include flex(1 1 auto);
+    box-sizing: border-box;
+    flex: 1 1 auto;
 
     display: inline-block; // fallback for non-flexbox browsers
     color: inherit;
@@ -2257,7 +2258,7 @@ html.js #map .noscript {
   margin-bottom: 5em;
   margin-bottom: calc(env(safe-area-inset-bottom) + 5em);
 
-  @include border-radius(0.5em);
+  border-radius: 0.5em;
 
   padding: 0.5em;
   font-size: 1em;
@@ -2786,14 +2787,14 @@ label .muted {
     color: $form-hint-color;
   }
   div {
-    @include flex-container;
-    @include flex-wrap(wrap);
+    display: flex;
+    flex-wrap: wrap;
     width: 100%;
     background: #fff;
     border: 1px solid $primary_b;
   }
   input#pc {
-    @include flex(86 0 auto);
+    flex: 86 0 auto;
     width: 50%;
     border: none;
     background: none;
@@ -2802,10 +2803,10 @@ label .muted {
   input#sub {
     border: none;
     padding: 0.5em;
-    @include flex(14 0 auto);
+    flex: 14 0 auto;
     background: #000;
     color: #fff;
-    @include border-radius(0);
+    border-radius: 0;
     &:hover,
     &:focus {
       background: #333;
@@ -2824,8 +2825,8 @@ a#geolocate_link {
   color: $geolocation-link;
   background-color: $geolocation-link-background-color;
   @include button-size($button-margin-top: 15px);
-  @include flex-container-inline();
-  @include flex-align(center);
+  display: inline-flex;
+  align-items: center;
 
   &:hover {
     border-color: $geolocation-link-background-color;
@@ -3111,7 +3112,7 @@ a#geolocate_link {
 
 .segmented-control {
   @include clearfix();
-  @include flex-container(); // fancy full-width buttons for browsers that support flexbox
+  display: flex; // fancy full-width buttons for browsers that support flexbox
 
   & > * {
     display: block;
@@ -3119,7 +3120,7 @@ a#geolocate_link {
     border-#{$right}-width: 0; // avoid double border between items
     float: #{$left}; // float fallback for browsers that don't support flexbox
     position: relative; // Make sure this is shown on legacy flexbox webkit
-    @include flex(1 0 auto, 1);
+    flex: 1 0 auto;
   }
 
   .btn {
diff --git a/web/cobrands/sass/_dashboard.scss b/web/cobrands/sass/_dashboard.scss
index c97d41ea092..a558b5650ea 100644
--- a/web/cobrands/sass/_dashboard.scss
+++ b/web/cobrands/sass/_dashboard.scss
@@ -21,7 +21,7 @@
 }
 
 .dashboard-item {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     padding: 1em;
 
     @media (min-width: 48em) {
@@ -82,7 +82,7 @@
 }
 
 .labelled-line-chart {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
 
     @media (min-width: 48em) {
         padding-right: 15%; // Same way round, regardless of text direction
@@ -115,7 +115,7 @@
     margin: 0 -1em;
 
     & > * {
-        @include box-sizing(border-box);
+        box-sizing: border-box;
         padding: 0 1em 1em 1em;
     }
 
@@ -157,7 +157,7 @@
 }
 
 .dashboard-search__input {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     width: 80%;
     float: $left;
     padding-#{$right}: 1em;
@@ -226,7 +226,7 @@
 
     // Force field elements onto a single line.
     @media (min-width: 48em) {
-        @include flex-container();
+        display: flex;
         flex-wrap: wrap;
     }
 
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index ed570d44865..82c477d1499 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -81,8 +81,8 @@ h1 {
   position: static;
   min-height: $mappage-header-height; // defaults to map header height; should be height of #site-header (eg: #site-logo + any vertical padding)
   height: 1px; // flex `align-items: center` doesn't work in IE10 and IE11 unless flex container has an explicit height (even when min-height means this explicit height gets ignored!)
-  @include flex-container();
-  @include flex-align(center);
+  display: flex;
+  align-items: center;
   float: $right; // we could use justify-content here, but float degrades better for non-flexbox browsers
   @if ($header-top-border) {
     margin-top: $header-top-border-width * -1; // visually compensate for border on #site-header
@@ -156,7 +156,7 @@ h1 {
     background-color: $primary;
     padding:0.25em 0.5em;
     margin:0.5em;
-    @include border-radius(0.25em);
+    border-radius: 0.25em;
     &:hover {
       background-color:$primary/1.1;
     }
@@ -302,15 +302,15 @@ body.mappage.admin {
 // This goes inside #map_sidebar, and establishes a flex container allowing
 // us to split the sidebar into two side-by-side columns.
 .two_column_sidebar {
-  @include flex-container();
-  @include flex-align(stretch); // children will fill entire height of this element
+  display: flex;
+  align-items: stretch; // children will fill entire height of this element
   min-height: 100%; // this element will fill entire height of parent (#map_sidebar)
 
   & > * {
     // Columns should start at 50% width, and (eg: if scrollbars appear,
     // reducing the available width), shrink down to less than 50%.
-    @include box-sizing(border-box);
-    @include flex(0 1 auto);
+    box-sizing: border-box;
+    flex: 0 1 auto;
     width: 50%;
     padding: $mappage-sidebar-padding;
 
@@ -329,7 +329,7 @@ body.mappage.admin {
   // and leave the other column to shrink to the remaining space.
   #side-report {
     width: $mappage-sidebar-width;
-    @include flex(0 0 auto);
+    flex: 0 0 auto;
 
     @media (max-width: 79em) {
       width: $mappage-sidebar-width--medium;
@@ -681,7 +681,7 @@ body.authpage {
 #key-tools {
   border-top: 0.25em solid $primary;
   margin: 0;
-  @include box-shadow(0 0 1em 1em #fff);
+  box-shadow: 0 0 1em 1em #fff;
 
   li {
     border-#{$right}: none; // undo border-right/left from _base.scss
@@ -748,7 +748,7 @@ p.form-error {
 
 input.form-error,
 textarea.form-error {
-  @include border-radius(0 0 0.25em 0.25em);
+  border-radius: 0 0 0.25em 0.25em;
 }
 
 // If the form is .with-notes, limit the width of the inputs
diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss
index 1fbce788959..432c4bd0bc2 100644
--- a/web/cobrands/sass/_mixins.scss
+++ b/web/cobrands/sass/_mixins.scss
@@ -36,7 +36,7 @@ $button-margin-left: 0 !default;
     font-weight: bold;
     font-family: inherit;
     cursor: pointer;
-    @include border-radius(4px);
+    border-radius: 4px;
 
     &,
     &:hover,
@@ -54,7 +54,7 @@ $button-margin-left: 0 !default;
     color: $text !important; // !important to override more specific selectors like `a:link`
     background: $bg-bottom;
     @if $bg-top != $bg-bottom {
-        @include linear-gradient($bg-top, $bg-bottom);
+        background: linear-gradient($bg-top, $bg-bottom);
     }
     @if $border {
         border: 1px solid $border;
@@ -66,7 +66,7 @@ $button-margin-left: 0 !default;
         color: $hover-text !important;
         background: $hover-bg-bottom;
         @if $hover-bg-top != $hover-bg-bottom {
-            @include linear-gradient($hover-bg-top, $hover-bg-bottom);
+            background: linear-gradient($hover-bg-top, $hover-bg-bottom);
         }
         @if $hover-border {
             border-color: $hover-border;
@@ -79,7 +79,7 @@ $button-margin-left: 0 !default;
       color: $focus-text !important;
       background: $focus-bg-bottom;
       @if $focus-bg-top != $focus-bg-bottom {
-          @include linear-gradient($focus-bg-top, $focus-bg-bottom);
+          background: linear-gradient($focus-bg-top, $focus-bg-bottom);
       }
       @if $focus-border {
           border-color: $focus-border;
@@ -141,139 +141,8 @@ $right: right;
 
 // Compass-like mixins
 
-@mixin box-sizing($bs) {
-  $bs: unquote($bs);
-  @include experimental(box-sizing, $bs, -moz, -webkit, not -o, not -ms, official);
-}
-
-@mixin border-radius($radius: 5px) {
-  @include experimental(border-radius, $radius, -moz, -webkit, not -o, not -ms, official);
-}
-
-@mixin box-shadow($shadows...) {
-  @include experimental(box-shadow, $shadows, -moz, -webkit, not -o, not -ms, official);
-}
-
-@mixin experimental($property, $value, $moz: true, $webkit: true, $o: true, $ms: true, $official: true) {
-  @if $webkit   { -webkit-#{$property} : #{$value}; }
-  @if $moz      {    -moz-#{$property} : #{$value}; }
-  @if $ms       {     -ms-#{$property} : #{$value}; }
-  @if $o        {      -o-#{$property} : #{$value}; }
-  @if $official {         #{$property} : #{$value}; }
-}
-
-@mixin inline-block($alignment: middle) {
-  display: inline-block;
-  vertical-align: middle;
-  *vertical-align: auto;
-  zoom: 1;
-  *display: inline;
-}
-
 @mixin clearfix {
     &:before, &:after { content: " "; display: table; }
     &:after { clear: both; }
     & { *zoom: 1; }
 }
-
-@mixin linear-gradient($stops...) {
-  $webkit-gradient-stops: ();
-  $webkit-end-point: 100%;
-  @each $stop in $stops {
-    $pos: none;
-    @if length($stop) > 1 {
-      @if length($stops) == 2 && unit(nth($stop, 2)) == 'px' {
-        $webkit-end-point: nth($stop, 2);
-        $pos: 100%;
-      } @else {
-        $pos: nth($stop, 2);
-      }
-    } @else if (length($stop) == 1 && index($stops, $stop) == 1) {
-      $pos: 0%;
-    } @else {
-      $pos: 100%;
-    }
-    $webkit-gradient-stops: append($webkit-gradient-stops,
-                                   color-stop($pos, nth($stop, 1)),
-                                   comma);
-  }
-
-  background: -webkit-gradient(linear, 0% 0%, 0% $webkit-end-point, $webkit-gradient-stops);
-  @each $prefix in -moz-, -o-, -webkit-, "" {
-    background: #{$prefix}linear-gradient($stops);
-  }
-}
-
-@mixin flex-container() {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-@mixin flex-container-inline() {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-@mixin flex($values, $values2009: 0) {
-  -webkit-box-flex: $values2009;
-  -moz-box-flex: $values2009;
-  -webkit-box-flex: $values;
-  -moz-box-flex: $values;
-  -webkit-flex: $values;
-  -ms-flex: $values;
-  flex: $values;
-}
-
-@mixin flex-wrap($wrap) {
-  -webkit-box-wrap: $wrap;
-  -webkit-flex-wrap: $wrap;
-  -ms-flex-wrap: $wrap;
-  flex-wrap: $wrap;
-}
-
-@mixin flex-align($alignment) {
-  -webkit-box-align: $alignment;
-  -webkit-align-items: $alignment;
-  -ms-flex-align: $alignment;
-  align-items: $alignment;
-}
-
-@mixin flex-direction($direction) {
-    @if ($direction == column) {
-        -webkit-box-orient: vertical;
-    } @elseif ($direction == row) {
-        -webkit-box-orient: horizontal;
-    }
-    -moz-flex-direction: $direction;
-    -ms-flex-direction: $direction;
-    -webkit-flex-direction: $direction;
-    flex-direction: $direction;
-}
-
-@mixin justify-content($alignment) {
-    -webkit-justify-content: $alignment;
-    -moz-justify-content: $alignment;
-    -ms-justify-content: $alignment;
-    justify-content: $alignment;
-}
-
-@mixin flex-order($order) {
-  // 2009 syntax
-  -webkit-box-ordinal-group: $order;
-  -moz-box-ordinal-group: $order;
-
-   // 2011 syntax https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/#flex-order
-  -ms-flex-order: $order;
-  flex-order: $order;
-
-  // Modern syntax
-  -webkit-order: $order;
-  -ms-order: $order;
-  order: $order;
-}
diff --git a/web/cobrands/sass/_search-help.scss b/web/cobrands/sass/_search-help.scss
index d14dd41852f..f0d772563cc 100644
--- a/web/cobrands/sass/_search-help.scss
+++ b/web/cobrands/sass/_search-help.scss
@@ -46,13 +46,13 @@ $search-help-header-font-family: null !default;
     overflow: auto; // expand to include margin-bottom on last child
 
     @media (min-width: 48em) {
-        @include flex-container();
+        display: flex;
         @if ( $search-help-alignment == left ) {
-            @include justify-content(flex-start);
+            justify-content: flex-start;
         } @else if ( $search-help-alignment == right ) {
-            @include justify-content(flex-end);
+            justify-content: flex-end;
         } @else {
-            @include justify-content(center);
+            justify-content: center;
             padding: 1em 0;
         }
     }
diff --git a/web/cobrands/southwark/layout.scss b/web/cobrands/southwark/layout.scss
index bcd633172aa..afd5a846390 100644
--- a/web/cobrands/southwark/layout.scss
+++ b/web/cobrands/southwark/layout.scss
@@ -82,7 +82,7 @@ body:not(.mappage) {
 
 body.mappage {
   #site-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
   }
 
   // Reinstate the floated nav bar on map pages
diff --git a/web/cobrands/tfl/layout.scss b/web/cobrands/tfl/layout.scss
index 166212d33e9..b0570bb2774 100644
--- a/web/cobrands/tfl/layout.scss
+++ b/web/cobrands/tfl/layout.scss
@@ -89,7 +89,7 @@ h1 {
 
 body.mappage {
   #site-header {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     top: 0;
   }
 
diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss
index 422dfb9842c..3cd2d9bd5a5 100644
--- a/web/cobrands/warwickshire/base.scss
+++ b/web/cobrands/warwickshire/base.scss
@@ -119,8 +119,8 @@ a#geolocate_link {
 }
 
 .site-footer__container {
-    @include flex-container();
-    @include flex-wrap(wrap);
+    display: flex;
+    flex-wrap: wrap;
 }
 
 .site-footer__text {
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index f546b447f2b..7b0ca5b7994 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -33,15 +33,15 @@
 }
 
 .site-footer__section {
-    @include box-sizing(border-box);
+    box-sizing: border-box;
     float: left;
     padding: 0 1em;
     width: 25%;
 
     &:first-child {
-        @include flex-container();
-        @include flex-direction(column);
-        @include justify-content(space-between);
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
     }
 
     &:nth-child(2) {
diff --git a/web/cobrands/westminster/base.scss b/web/cobrands/westminster/base.scss
index 0791c9ae059..9579b086ebb 100644
--- a/web/cobrands/westminster/base.scss
+++ b/web/cobrands/westminster/base.scss
@@ -65,7 +65,7 @@ body.frontpage {
         height: 46px;
         padding: 0 0 0 50px; // So value 'Go' doesn't display inside search icon
         overflow: hidden;
-        @include flex(0 0 auto);
+        flex: 0 0 auto;
         background: $westminster_blue_links url(/cobrands/westminster/images/search-white.svg) no-repeat 50% 50%;
         background-size: 42px 32px;
         position: absolute;
diff --git a/web/cobrands/westnorthants/base.scss b/web/cobrands/westnorthants/base.scss
index 6bfc37bcf5e..da7c1c1f3a1 100755
--- a/web/cobrands/westnorthants/base.scss
+++ b/web/cobrands/westnorthants/base.scss
@@ -32,7 +32,7 @@
   input#sub {
     background: $primary;
 
-    @include border-radius(0);
+    border-radius: 0;
     &:hover {
         background: $primary_link_hover_color;
     }
@@ -52,7 +52,7 @@ h1 {
 }
 
 .btn, .btn--primary, .btn--primary {
-  @include border-radius($button-border-radius);
+  border-radius: $button-border-radius;
   @include button-variant($bg-top: $button-primary-bg-top, $bg-bottom: $button-primary-bg-bottom, $border: $button-primary-border, $text: $button-primary-text, $hover-bg-bottom: $button-primary-hover-bg-bottom, $hover-bg-top: $button-primary-hover-bg-top, $hover-border: $button-primary-hover-border, $hover-text: $button-primary-hover-text);
 }
 
diff --git a/web/cobrands/westnorthants/layout.scss b/web/cobrands/westnorthants/layout.scss
index 26301546251..1bfbfa6cf8a 100755
--- a/web/cobrands/westnorthants/layout.scss
+++ b/web/cobrands/westnorthants/layout.scss
@@ -19,11 +19,11 @@ a.platform-logo {
     padding: 0.25em 0.75em;
     margin:0.5em 0;
     font-size: 1em;
-    @include border-radius(3px);
+    border-radius: 3px;
   }
 
   a.report-a-problem-btn {
-    @include border-radius(3px);
+    border-radius: 3px;
   }
 
   span {
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index 8ad39c5b84a..75dd3bb62cc 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -144,7 +144,7 @@ h2.static-with-rule {
 
 .admin-nav {
     background: #f4f4f4;
-    @include linear-gradient(#fbfbfb, #efefef);
+    background: linear-gradient(#fbfbfb, #efefef);
     border-bottom: 2px solid $table_border_color;
     ul {
         overflow:auto;
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 1a0055b19b6..4ca7f3f96eb 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -30,7 +30,7 @@ $mappage-header-height: 7em;
 body.mappage {
     #site-header {
         // The header on a map page needs a shadow too
-        @include box-shadow(0 0 6px 1px #000);
+        box-shadow: 0 0 6px 1px #000;
         z-index: 2; // One more than #zurich-main-nav so it's on top
         .container {
             margin: 0;
@@ -44,7 +44,7 @@ body.mappage {
 
     // Except on admin pages where there's an admin nav directly underneath it
     &.admin #site-header {
-        @include box-shadow(none);
+        box-shadow: none;
     }
 }
 
@@ -97,7 +97,7 @@ body.mappage #site-logo {
 body.frontpage {
     // Front page content needs a shadow.
     .content {
-        @include box-shadow(0 0 6px 1px #000);
+        box-shadow: 0 0 6px 1px #000;
     }
 
     .table-cell {
@@ -114,7 +114,7 @@ body.frontpage {
 
     #zurich-footer-wrapper {
         padding: 1px 0;
-        @include box-shadow(0 -6px 6px -5px #000);
+        box-shadow: 0 -6px 6px -5px #000;
         position: relative;
     }
 }
@@ -326,7 +326,7 @@ body.mappage.admin {
             margin: 2em 0;
 
             &:hover {
-                @include linear-gradient(#fcc, #daa 50%);
+                background: linear-gradient(#fcc, #daa 50%);
             };
         }
     }