/*
Define all the required self hosted .woff and .woff2 font family weights here.
Each @font-face rule defines a new font-family/weight combination, and adds that
weight's availability to the font-family when we call the var later.
*/

@font-face {
  font-family: "Helvetica Now Display";
  src:
    url("/assets/helvetica_now_display/helvetica_now_display-light-8da52020.woff2") format("woff2"),
    url("/assets/helvetica_now_display/helvetica_now_display-light-0253a7a8.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src:
    url("/assets/helvetica_now_display/helvetica_now_display-regular-20503963.woff2") format("woff2"),
    url("/assets/helvetica_now_display/helvetica_now_display-regular-68d8c33d.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src:
    url("/assets/helvetica_now_display/helvetica_now_display-medium-d922eca7.woff2") format("woff2"),
    url("/assets/helvetica_now_display/helvetica_now_display-medium-9073f6f7.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src:
    url("/assets/helvetica_now_display/helvetica_now_display-bold-7f58d42b.woff2") format("woff2"),
    url("/assets/helvetica_now_display/helvetica_now_display-bold-4b836e24.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
Size adjusted local fallback font
=================================
- To minimise CLS when the self-hosted font file loads in
- Use this link to determine the "web-safe" local fallback font
- size adjustments to match whichever google font is in use.
- https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback
- Then assign a custom font-family name,
- And add it as the second font-family name in the `--font-stack`
*/

@font-face {
  font-family: "helvetica-now-display-fallback-arial";
  size-adjust: 94.5%;
  ascent-override: 105%;
  src: local("Arial");
}


:root {
  /* Standard Colors */
  --black: #000000;
  --white: #ffffff;

  /* Greys */
  --grey-20: #f8f8f8;
  --grey-50: #f5f5f5;
  --grey-100: #ededed;
  --grey-125: #e7e7e7;
  --grey-150: #e0e0e2;
  --grey-175: #e2e2e2;
  --grey-200: #ddd;
  --grey-250: #cfcfd0;
  --grey-300: #ccc;
  --grey-325: #c3c3c3;
  --grey-350: #bcbcbc;
  --grey-400: #a3a3a3;
  --grey-450: #979797;
  --grey-500: #707070;
  --grey-550: #6D6F91;
  --grey-600: #535659;
  --grey-700: #4e4e4e;
  --grey-750: #333333;
  --grey-800: #292929;
  --grey-900: #2b2b2b;
  --grey-950: #222223;
  --grey-1000: #1b1b1b;

  /* COLOUR SCALES */
  --pink-100: #fce8ea;
  --orange-100: #faf0e8;
  --red-500: #cb2027;
  --green-100: #dbf0df;
  --green-300: #a7f192;
  --blue-100: #F4F9FD;
  --blue-125: #F1F7FD;
  --blue-150:#E3E9EC;
  --blue-175:#d8e1e6;
  --blue-200: #deedfb;
  --blue-300: #D4E7F8;
  --blue-350: #A0A3BA;
  --blue-400: #56A8DD;
  --blue-500: #2379B3;
  --blue-525: #246ca6;
  --blue-600: #245186;
  --blue-675: #24386c;
  --blue-700: #25275A;

  /* BRAND COLOURS */
  --color-primary: var(--blue-500);
  --color-primary-tint: var(--blue-300); /* Lighter */
  --color-primary-shade: var(--blue-700); /* Darker */
  --color-secondary: var(--blue-400);
  --color-secondary-tint: var(--color-primary-tint); /* Lighter */
  --color-secondary-shade: var(--color-primary-shade); /* Darker */

  --color-primary-gradient: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary-shade) 100%);

  /* MESSAGES */
  --color-success: #408e22;
  --surface-success: #dff0d8;
  --color-alert: #963b3b;
  --surface-alert: #f2dede;
  --color-error: #c31a1a;
  --color-info: #1c3348;
  --surface-info: #E0F0FB;
  --color-warning: #9a5d00;
  --surface-warning: #fff0e0;

  /* FONT COLOURS */
  --base-font-color: var(--color-primary-shade); /* Body text */
  --text-primary-color: var(--base-font-color); /* First text colour override */
  --text-secondary-color: var(--color-secondary); /* Second text colour override */
  --base-heading-color: var(--base-font-color);
  --base-spacing-unit: 1.25rem; /* Probably not needed anymore */

  /* FONTS */
  --base-font-size: 16;
  /* // Set the font-family declarations ie. 'Helvetica Now Display' from @font-face rules to vars
  // And define their font fallback stack by testing web-safe fallback fonts for similar x,y, and kerning values */
  --font-stack: 'Helvetica Now Display', 'helvetica-now-display-fallback-arial', trebuchet ms, helvetica, arial, sans-serif;

  /* Fonts */
  --font-family-base: var(--font-stack);
  --font-family-heading: var(--font-stack); /*system-ui;*/
  --font-family-code: monospace;

  --line-height-heading: 1.4;

  /* Typography
  --body-max-width: 65ch; /* ch = characters. Larger text = wider in px */

  /* Lists */
  --list-line-height: 1.5;
  --list-indent-mobile: 1.5rem;
  --list-indent-tablet: 2rem;
  --list-indent: var(--list-indent-mobile);
  /* --ol-style-type: decimal; */

  /* FORMS */
  --form-input-border-color: var(--grey-325);
  --form-input-bg-color: var(--white);
  --form-input-height-mobile: 3rem; /* 48px */
  --form-input-height-tablet: 3.25rem; /* 52px */
  --form-input-height: var(--form-input-height-mobile);
  --form-input-text-size: 1rem; /* Should NEVER be smaller than 16px */
  --form-input-text-color: var(--base-font-color);
  --form-input-padding: 0.75rem;
  --form-grid-gap: 2rem;
  --form-grid-gap-small: 1rem;
  --form-label-margin: 0.5rem;
  --form-label-text-color: var(--base-font-color);
  --form-required-icon-color: var(--red-500);

  /* BUTTONS */
  --btn-surface: var(--color-primary);
  --btn-surface-dark: var(--grey-950);
  --btn-surface-dark-hover: var(--grey-1000);
  --btn-surface-secondary: var(--grey-100);
  --btn-surface-secondary-hover: var(--grey-150);
  --btn-text-color: var(--white);
  --btn-text-color-hover: var(--white);
  --btn-height-mobile: 3rem; /* 48px */
  --btn-height-tablet: 3.25rem; /* 52px */
  --btn-height: var(--btn-height-mobile);
  --btn-padding-inline-mobile: 30px;
  --btn-padding-inline-tablet: 30px;
  --btn-padding-inline: var(--btn-padding-inline-mobile);
  --btn-font-size-mobile: 0.9375rem;
  --btn-font-size-tablet: 1rem;
  --btn-font-size: var(--btn-font-size-mobile);

  /* SURFACES (PANEL COLOURS MAINLY) */
  --surface-color: var(--blue-100);
  --surface-grey: var(--grey-20);
  --surface-pink: var(--pink-100);
  --surface-blue: var(--blue-300);
  --surface-green: var(--green-100);
  --surface-orange: var(--orange-100);
  --surface-contrast-text-color: var(--white);

  /* IMAGE PLACEHOLDERS */
  --placeholder-image-bg: var(--grey-150);

  /* CONTENT WIDTHS */
  --content-small: 960px;
  --content-medium: 1170px;
  --content-large: 1440px;
  --content-xl: 1660px;
  --content-width: none;

  /* PAGE TOP/BOTTOM SPACING */
  --page-block-margin-mobile: 2.5rem; /* 40px*/
  --page-block-margin-tablet: 3.75rem; /* 60px*/
  --page-block-margin-desktop: 5rem; /* 80px*/
  --page-block-margin: var(--page-block-margin-mobile);
  --page-block-margin-start: 1.5rem; /* 24px*/

  /* MODULE SPACING */
  --module-spacing-mobile: 2rem; /* 32px*/
  --module-spacing-tablet: 2.75rem; /* 44px*/
  --module-spacing-desktop: 5rem; /* 80px*/
  --module-spacing: var(--module-spacing-mobile);

  --module-spacing-sm-mobile: 1rem;
  --module-spacing-sm-tablet: 1.25rem;
  --module-spacing-sm-desktop: 2rem;
  --module-spacing-sm: var(--module-spacing-sm-mobile);

  /* BODY GUTTER */
  --body-gutter-mobile: 1.25rem;
  --body-gutter-tablet: 2rem;
  --body-gutter: var(--body-gutter-mobile);

  --body-gutter-small-mobile: 0.5rem;
  --body-gutter-small-tablet: 1.25rem;
  --body-gutter-small-desktop: var(--body-gutter-tablet);
  --body-gutter-small: var(--body-gutter-small-mobile);

  /* CONTENT MAX WIDTHS */
  --site-content-max-width: 30000px; /* Overridden to 2500px if header-desktop.scss is loaded */
  --body-text-max-width: 850px;

  /* GRID GAPS */
  --grid-gap: 1.25rem; /* 20px */
  --card-grid-gap: var(--grid-gap);
  --grid-gap-large: 2.5rem; /* 40px */

  /* BORDER RADIUS */
  --border-radius-mobile: 5px; /* Make sure to add the same value to `$base-border-radius` inside `sass-vars.scss` */
  --border-radius-tablet: 7px; /* Make sure to add the same value to `$base-border-radius-tablet` inside `sass-vars.scss` */
  --border-radius: var(--border-radius-mobile);

  /* CARDS */
  --card-text-padding: 1.5rem;

  /* GRID CELLS WITH BACKGROUNDS */
  --cell-background-border-radius-mobile: var(--border-radius-mobile);
  --cell-background-border-radius-tablet: var(--border-radius-tablet);
  --cell-background-border-radius-desktop: var(--border-radius-tablet);
  --cell-background-padding-mobile: 1.5rem 1.5rem;
  --cell-background-padding-tablet: 1.75rem 2rem;
  --cell-background-padding-desktop: var(--cell-background-padding-tablet);

  --cell-background-padding: var(--cell-background-padding-mobile);
  --cell-background-border-radius: var(--cell-background-border-radius-mobile);


  /* TEXT EXTRA SPACING INSIDE GRID CELLS */
  --grid-cell-text-padding-right-tablet: 1.25rem;
  --grid-cell-text-padding-right-desktop: 2.5rem;
  --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-tablet);


  /* CUSTOM SCROLLBARS */
  --scrollbar-base-color: var(--grey-150);
  --scrollbar-face-color: var(--color-primary-shade);
  --scrollbar-shadow-color: var(--grey-500);
  --slider-scrollbar-height: 0.75rem;


  /* Z-INDEXING */
  --z-index-image-caption: 1;
  --z-index-figcaption: 1;
  --z-index-grid-cell-icon-overlay: 1;
  --z-index-glide-arrow: 2;
  --z-index-glide-bullets: 2;
  --z-index-subnav-toggle: 10;
  --z-index-banner-messages: 11;
  --z-index-floating-action-button: 12;
  --z-index-floating-ui-btn: 13;
  --z-index-floating-ui: 14;
  --z-index-sticky-header: 15;
  --z-index-desktop-subnav: 16;
  --z-index-search-bar: 17;
  --z-index-alert: 18;
  --z-index-nav-slide-in-ovelay: 19;
  --z-index-nav-slide-in: 20;
  --z-index-transparent-header: 21;
  --z-index-secondary-nav: 22;
  --z-index-modal-window: 30;
  --z-index-modal-close-btn: 40;
  --z-index-modal-pulsing-loader: 50;
  --z-index-skip-content: 100;


  /* HEADER */
  --header-background: var(--white);
  --header-lower-height-mobile: 5rem; /* 80px;*/
  --header-lower-height-tablet: 6.75rem; /* 108px;*/
  --header-lower-height-desktop: 13.75rem; /* 220px;*/
  --header-lower-height: var(--header-lower-height-mobile);

  --header-lower-height-sticky-mobile: 3.75rem; /* 60px;*/
  --header-lower-height-sticky-tablet: 5rem; /* 80px;*/
  --header-lower-height-sticky: var(--header-lower-height-sticky-mobile);

  --header-upper-height: 0px;

  --header-height: calc(var(--header-lower-height) + var(--header-upper-height));

  --header-logo-width: 9.375rem; /* 150px;*/
  --header-slide-in-nav-offset-mobile: 0px;
  --header-slide-in-nav-offset-tablet: 0px;
  --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-mobile);

  --sliding-nav-width: 25rem; /* 400px;*/
  --nav-item-padding-block: 0.5rem;
  --subnav-max-height-desktop: calc(90vh - var(--header-lower-height) - var(--header-upper-height));
  --subnav-bg-color-desktop: var(--color-primary-gradient);

  /* BOX-SHADOWS */
  --box-shadow: 0px 5px 7px -4px  rgba(0,0,0,0.3);
  --box-shadow-header: 0px 5px 7px 0 rgba(37,39,90,0.1);
  --box-shadow-header-mobile: 0px 2px 6px 0 rgba(37,39,90,0.1);
  --box-shadow-slide-in-nav: 1px 11px 7px 3px rgba(0,0,0,0.2);
  --box-shadow-modal: 0 0 10px rgba(0,0,0,0.2);

  /* Animations */
  --hover-transition-short-rotate: transform .2s ease-in-out;

  /* SCROLL PADDING */
  --page-scroll-padding-top: calc(var(--header-lower-height-sticky) + 1rem); /* Add offset to mitigate sticky header */
  --in-page-nav-scroll-offset: -0.25rem;

  /* TEXT ELEMENTS */
  --snippet-line-distance-mobile: 1.5rem;
  --snippet-line-distance-tablet: 2rem;
  --snippet-line-distance-desktop: 2rem;
  --snippet-line-distance: var(--snippet-line-distance-mobile);

  /* MODULE TITLES */
  --module-title-spacing-bottom-mobile: 1.25rem;
  --module-title-spacing-bottom-tablet: 2rem;
  --module-title-spacing-bottom-desktop: 2.25rem;
  --module-title-spacing-bottom: var(--module-title-spacing-bottom-mobile);

  /* FONT SIZES FOR EACH BP - DEFINED IN UNITLESS PX VALUES */
  --fs-h1-mobile: 25;
  --fs-h1-tablet: 27;
  --fs-h1-desktop: 34;

  --fs-h2-mobile: 22;
  --fs-h2-tablet: 23;
  --fs-h2-desktop: 27;

  --fs-h3-mobile: 20;
  --fs-h3-tablet: 21;
  --fs-h3-desktop: 23;

  --fs-h4-mobile: 18;
  --fs-h4-tablet: 19;
  --fs-h4-desktop: 21;

  --fs-h5-mobile: 17;
  --fs-h5-tablet: 18;
  --fs-h5-desktop: 20;

  --fs-h6-mobile: 16;
  --fs-h6-tablet: 17;
  --fs-h6-desktop: 19;

  --fs-p-mobile: 17;
  --fs-p-tablet: 21;
  --fs-p-desktop: 23;

  --fs-intro-mobile: 22;
  --fs-intro-tablet: 27;
  --fs-intro-desktop: 30;

  --fs-intro-large-mobile: 28;
  --fs-intro-large-tablet: 30;
  --fs-intro-large-desktop: 43;

  --fs-snippet-mobile: 23;
  --fs-snippet-tablet: 27;
  --fs-snippet-desktop: 30;

  --fs-blockquote-mobile: 23;
  --fs-blockquote-tablet: 27;
  --fs-blockquote-desktop: 30;


  /* FONT SIZES (IN UNITLESS PX VALUES) */
  /* These variables are used to re-define the `--text-font-size` variable on an element which is part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`. We can apply this variable once and have it apply across all BPs.

  Use these vars with `--text-font-size:` inside the selector to define a new font size, eg. `p{--text-font-size: var(-fs-h2-px)}`, and all the other margin & line-height values will be calculated from it, across BPs. */

  --fs-p-px: var(--fs-p-mobile);
  --fs-h2-px: var(--fs-h2-mobile);
  --fs-h3-px: var(--fs-h3-mobile);
  --fs-h4-px: var(--fs-h4-mobile);
  --fs-h5-px: var(--fs-h5-mobile);
  --fs-h6-px: var(--fs-h6-mobile);


  /* FONT SIZES (IN REMS) */
  /* Sometimes we need to style certain element's which are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss` to match the same font size as e.g a H2 across BPs. We use these vars to do that.

  Because the element's these vars will be added to are not part of the selectors list in `CSS calc() math for fonts` in `typescale.scss`, we need to define them in rems, so that they can be used in the `font-size` property of the element's CSS e.g `font-size: var(--fs-h2)`.
  Not being part of the selectors list means the line-height and margin values will not be calculated from the font size, but we can still use these vars to set the font size of the element to match e.g. a H2 across BPs.

  NB: WE DON'T USE THESE VARS WHEN SETTING THE ACTUAL ELEMENT'S FONT SIZES, instead we group changes across BPs in `Typescale.scss` */
  --fs-p: calc((var(--fs-p-mobile) / var(--base-font-size)) * 1rem);
  --fs-h1: calc((var(--fs-h1-mobile) / var(--base-font-size)) * 1rem);
  --fs-h2: calc((var(--fs-h2-mobile) / var(--base-font-size)) * 1rem);
  --fs-h3: calc((var(--fs-h3-mobile) / var(--base-font-size)) * 1rem);
  --fs-h4: calc((var(--fs-h4-mobile) / var(--base-font-size)) * 1rem);
  --fs-h5: calc((var(--fs-h5-mobile) / var(--base-font-size)) * 1rem);


  @media (min-width: 768px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-tablet);

    /* FONT SIZES (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-tablet);
    --fs-h2-px: var(--fs-h2-tablet);
    --fs-h3-px: var(--fs-h3-tablet);
    --fs-h4-px: var(--fs-h4-tablet);
    --fs-h5-px: var(--fs-h5-tablet);
    --fs-h6-px: var(--fs-h6-tablet);

    /* FONT SIZES (IN REMS) */
    --fs-p: calc((var(--fs-p-tablet) / var(--base-font-size)) * 1rem);
    --fs-h1: calc((var(--fs-h1-tablet) / var(--base-font-size)) * 1rem);
    --fs-h2: calc((var(--fs-h2-tablet) / var(--base-font-size)) * 1rem);
    --fs-h3: calc((var(--fs-h3-tablet) / var(--base-font-size)) * 1rem);
    --fs-h4: calc((var(--fs-h4-tablet) / var(--base-font-size)) * 1rem);
    --fs-h5: calc((var(--fs-h5-tablet) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-tablet);

    /* SPACING */
    --page-block-margin: var(--page-block-margin-tablet);
    --page-block-margin-start: 2rem; /* 32px*/
    --module-spacing: var(--module-spacing-tablet);
    --module-spacing-sm: var(--module-spacing-sm-tablet);
    --body-gutter: var(--body-gutter-tablet);
    --body-gutter-small: var(--body-gutter-small-tablet);

    /* BORDER RADIUS */
    --border-radius: var(--border-radius-tablet);

    /* LISTS */
    --list-indent: var(--list-indent-tablet);

    /* BUTTONS */
    --btn-height: var(--btn-height-tablet);
    --btn-padding-inline: var(--btn-padding-inline-tablet);
    --btn-font-size: var(--btn-font-size-tablet);

    /* FORMS */
    --form-input-height: var(--form-input-height-tablet);

    /* HEADER */
    --header-lower-height: var(--header-lower-height-tablet);
    --header-lower-height-sticky: var(--header-lower-height-sticky-tablet);
    --header-logo-width: 13.75rem; /* 220px;*/
    --header-slide-in-nav-offset: var(--header-slide-in-nav-offset-tablet);

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-tablet);
    --cell-background-border-radius: var(--cell-background-border-radius-tablet);

    /* CARDS */
    --card-text-padding: 2rem;
  }

  @media (min-width: 960px) {
    /* MODULE TITLES */
    --module-title-spacing-bottom: var(--module-title-spacing-bottom-desktop);

    /* FONT SIZES (IN UNITLESS PX VALUES) */
    --fs-p-px: var(--fs-p-desktop);
    --fs-h2-px: var(--fs-h2-desktop);
    --fs-h3-px: var(--fs-h3-desktop);
    --fs-h4-px: var(--fs-h4-desktop);
    --fs-h5-px: var(--fs-h5-desktop);
    --fs-h6-px: var(--fs-h6-desktop);

    /* FONT SIZES (IN REMS) */
    --fs-p: calc((var(--fs-p-desktop) / var(--base-font-size)) * 1rem);
    --fs-h1: calc((var(--fs-h1-desktop) / var(--base-font-size)) * 1rem);
    --fs-h2: calc((var(--fs-h2-desktop) / var(--base-font-size)) * 1rem);
    --fs-h3: calc((var(--fs-h3-desktop) / var(--base-font-size)) * 1rem);
    --fs-h4: calc((var(--fs-h4-desktop) / var(--base-font-size)) * 1rem);
    --fs-h5: calc((var(--fs-h5-desktop) / var(--base-font-size)) * 1rem);

    /* TEXT ELEMENTS */
    --snippet-line-distance: var(--snippet-line-distance-desktop);

     /* SPACING */
    --body-gutter-small: var(--body-gutter-small-desktop);

    /* GRID CELLS WITH BACKGROUNDS */
    --cell-background-padding: var(--cell-background-padding-desktop);
    --cell-background-border-radius: var(--cell-background-border-radius-desktop);
  }

  @media (min-width: 1080px) {
    /* SPACING */
    --page-block-margin: var(--page-block-margin-desktop);
    --page-block-margin-start: 2.5rem; /* 40px*/

    /* HEADER */
    --header-logo-width: 17.5rem; /* 280px;*/
    --header-lower-height: var(--header-lower-height-desktop);

    /* TEXT EXTRA SPACING INSIDE GRID CELLS */
    --grid-cell-text-padding-right: var(--grid-cell-text-padding-right-desktop);
  }

  @media (min-width: 1200px) {
    /* SPACING */
    --module-spacing: var(--module-spacing-desktop);
    --module-spacing-sm: var(--module-spacing-sm-desktop);
  }
}