diff --git a/styles/sass/patterns/_step-by-step-nav.scss b/styles/sass/patterns/_step-by-step-nav.scss
index 35343fec..d9a21ccb 100644
--- a/styles/sass/patterns/_step-by-step-nav.scss
+++ b/styles/sass/patterns/_step-by-step-nav.scss
@@ -1,6 +1,8 @@
 // Based on https://github.com/alphagov/govuk_publishing_components/blob/v22.0.0/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss
 // Note - this code for prototype purposes only. It is not production code.
 
+@use "sass:math";
+
 $stroke-width: 2px;
 $stroke-width-large: 3px;
 $number-circle-size: 26px;
@@ -19,12 +21,12 @@ $top-border: solid 2px govuk-colour("mid-grey");
 
 @mixin step-nav-line-position {
   left: 0;
-  margin-left: ($number-circle-size / 2) - ($stroke-width / 2);
+  margin-left: math.div($number-circle-size, 2) - math.div($stroke-width, 2);
 }
 
 @mixin step-nav-line-position-large {
   left: 0;
-  margin-left: ($number-circle-size-large / 2) - ($stroke-width-large / 2);
+  margin-left: math.div($number-circle-size-large, 2) - math.div($stroke-width-large, 2);
   border-width: $stroke-width-large;
 }
 
@@ -149,8 +151,8 @@ $top-border: solid 2px govuk-colour("mid-grey");
     z-index: 6;
     bottom: 0;
     left: 0;
-    margin-left: $number-circle-size / 4;
-    width: $number-circle-size / 2;
+    margin-left: math.div($number-circle-size, 4);
+    width: math.div($number-circle-size, 2);
     height: 0;
     border-bottom: solid $stroke-width govuk-colour("mid-grey");
   }
@@ -171,8 +173,8 @@ $top-border: solid 2px govuk-colour("mid-grey");
   .app-step-nav--large & {
     @include govuk-media-query($from: tablet) {
       &:before {
-        margin-left: $number-circle-size-large / 4;
-        width: $number-circle-size-large / 2;
+        margin-left: math.div($number-circle-size-large, 4);
+        width: math.div($number-circle-size-large, 2);
         border-width: $stroke-width-large;
       }
 
@@ -418,9 +420,9 @@ $top-border: solid 2px govuk-colour("mid-grey");
     z-index: 5;
     top: 0.6em; // position the dot to align with the first row of text in the link
     left: -(govuk-spacing(6) + govuk-spacing(3));
-    margin-top: -($stroke-width / 2);
-    margin-left: ($number-circle-size / 2);
-    width: $number-circle-size / 2;
+    margin-top: -(math.div($stroke-width, 2));
+    margin-left: math.div($number-circle-size, 2);
+    width: math.div($number-circle-size, 2);
     height: $stroke-width;
     background: govuk-colour("black");
   }
@@ -429,7 +431,7 @@ $top-border: solid 2px govuk-colour("mid-grey");
     @include govuk-media-query($from: tablet) {
       &:before {
         left: -(govuk-spacing(9));
-        margin-left: ($number-circle-size-large / 2);
+        margin-left: math.div($number-circle-size-large, 2);
         height: $stroke-width-large;
       }
     }