/* Base */

/*

  Clamp Measurements using https://clamp.font-size.app
  min-vw: 375
  max-vw: 1390px (site-width) + 40px (site-padding)

  Break points
  375px - mobile
  550px - mobile large
  768px - tablet
  1024px - desktop
  1464px - desktophd

*/

:root {

  /* site widths (1390px), padding and grid (16px root font size) */
  --column: calc( (var(--site-width) - (var(--gap) * var(--total-gaps)) ) / var(--total-columns) );
  --gap: clamp(1.25rem, 3.597122302158273vw, 3.125rem); /* 20px - 50px */
  --site-padding: 2.5rem; /* 40px */
  --site-width: min(86.875rem, calc(100vw - var(--site-padding))); /* 1390px OR 100vw - inline padding */
  --site-width-thin: min(var(--site-width), var(--cols-10));
  --total-columns: 4;
  --total-gaps: 3;



  /* column vars */

  --cols-2: calc( (var(--gap) * 1) + (var(--column) * 2) );
  --cols-3: calc( (var(--gap) * 2) + (var(--column) * 3) );
  --cols-4: calc( (var(--gap) * 3) + (var(--column) * 4) );
  --cols-5: calc( (var(--gap) * 4) + (var(--column) * 5) );
  --cols-6: calc( (var(--gap) * 5) + (var(--column) * 6) );
  --cols-7: calc( (var(--gap) * 6) + (var(--column) * 7) );
  --cols-8: calc( (var(--gap) * 7) + (var(--column) * 8) );
  --cols-9: calc( (var(--gap) * 8) + (var(--column) * 9) );
  --cols-10: calc( (var(--gap) * 9) + (var(--column) * 10) );
  --cols-11: calc( (var(--gap) * 10) + (var(--column) * 11) );
  --cols-12: calc( (var(--gap) * 11) + (var(--column) * 12) );



  /* colours */

  --color-lightest: hsl(0, 0%, 100%);

  --color-grey-lightest: hsl(var(--color-grey-lightest-hsl));
  --color-grey-lightest-hsl: 180deg, 2.44%, 91.96%; /* #eaebeb; */
  --color-grey-light: hsl(var(--color-grey-light-hsl));
  --color-grey-light-hsl: 180deg, 4.8%, 44.9%; /* #6d7878 */
  --color-grey: hsl(var(--color-grey-hsl));
  --color-grey-hsl: 197.14deg, 4.52%, 30.39%; /* #4a4f51 */
  --color-grey-dark: hsl(var(--color-grey-dark-hsl));
  --color-grey-dark-hsl: 198deg, 8.33%, 23.53%; /* #373e41 */

  --color-grey-20: hsl(200deg 2.01% 70.78%); /* #b3b5b6 */

  --color-primary: hsl(var(--color-primary-hsl));
  --color-primary-hsl: 197.04deg, 36.65%, 56.67%; /* #68a2b9 */
  --color-primary-dark: hsl(var(--color-primary-dark-hsl));
  --color-primary-dark-hsl: 195.88deg, 31.78%, 41.96%; /* #497b8d */
  --color-primary-darkest: hsl(var(--color-primary-darkest-hsl));
  --color-primary-darkest-hsl: 197.14deg, 46.67%, 23.53%; /* #204858 */

  --color-secondary: hsl(var(--color-secondary-hsl));
  --color-secondary-hsl: 158.3deg, 73.44%, 25.1%; /* #116f4d */

  --color-tertiary: hsl(var(--color-tertiary-hsl));
  --color-tertiary-hsl: 20.09deg, 98.29%, 45.88%; /* #e84f02 */






  /* gradient colours */

  --grey-lightest-gradient: linear-gradient(
    180deg, hsla(var(--color-grey-lightest-hsl), 100%) 0%,
    hsla(var(--color-grey-lightest-hsl), 60%) 100%);

  --grey-dark-gradient: linear-gradient(
    180deg, hsla(var(--color-grey-hsl), 100%) 0%,
    hsla(var(--color-grey-dark-hsl), 100%) 100%);

  --primary-dark-gradient: linear-gradient(
    180deg, hsla(var(--color-grey-hsl), 100%) 0%,
    hsla(var(--color-grey-dark-hsl), 100%) 100%);



  /* fonts */

  --default-font: 'Inter', sans-serif;

  --h1-size: clamp(2.25rem, 1.8279rem + 1.8009vw, 3.4375rem); /* 36px - 55px */
  --h1-line-height: 1.1;
  --h1-margin-gap: var(--h1-size);

  --h2-size: clamp(2.25rem, 2.0501rem + 0.8531vw, 2.8125rem); /* 36px - 45px */
  --h2-line-height: 1.1; /* 20px - 30px */
  --h2-margin-gap: clamp(1.25rem, 1.0278rem + 0.9479vw, 1.875rem); /* 20px - 30px */
  --h2-margin-gap-h3: clamp(1.25rem, 0.8057rem + 1.8957vw, 2.5rem); /* 20px - 40px */

  --h3-size: clamp(1.5625rem, 1.4514rem + 0.4739vw, 1.875rem); /* 25px - 30px */
  --h3-line-height: 1.1; /* 20px - 30px */
  --h3-margin-gap: clamp(0.9375rem, 0.8264rem + 0.4739vw, 1.25rem); /* 15px - 20px */
  --h3-margin-gap-h4: clamp(0.9375rem, 0.8264rem + 0.4739vw, 1.25rem); /* 15px - 20px */

  --h4-size: clamp(1rem, 0.9556rem + 0.1896vw, 1.125rem); /* 16px - 18px */
  --h4-line-height: 1.1; /* 20px - 30px */
  --h4-margin-gap: clamp(0.9375rem, 0.8264rem + 0.4739vw, 1.25rem); /* 15px - 20px */

  --p-size: 1rem;
  --p-line-height: 1.875rem; /* 30px : was 1.9 */
  --p-margin-gap: 2.5rem; /* 40px */
  --p-margin-gap-p:  1.5625rem; /* 25px */
  --p-margin-gap-h1: clamp(1.25rem, 1.1216rem + 0.5479vw, 1.875rem); /* 20px - 30px */
  --p-margin-gap-h2: clamp(3.125rem, 2.0142rem + 4.7393vw, 6.25rem); /* 50px - 100px */
  --p-margin-gap-h3: clamp(1.25rem, 0.8057rem + 1.8957vw, 2.5rem); /* 20px - 40px */
  --p-margin-gap-h4: clamp(0.9375rem, 0.6043rem + 1.4218vw, 1.875rem); /* 15px - 30px */

  --color-font: var(--color-grey);
  --color-font-titles: var(--color-primary-darkest);
  --color-font-light: var(--color-grey-20); /* #b4b6b7 */
  --color-font-lightest: var(--color-lightest);


  /* elements */

  --bg-lightest: var(--color-lightest);

  --link-color: var(--color-primary-dark);
  --link-color-hover: var(--color-primary);
  --label-color: var(--color-grey);
  --label-required-color: hsl(200deg 2.65% 44.31%); /* 6E7274 */
  --tiny-svg-color: var(--color-primary-dark);

  /* Other Margins */

  --picture-margin-gap: clamp(1.25rem, 1.1216rem + 0.5479vw, 1.875rem); /* 20px - 30px */


  /* padding and margin */

  --section-v-padding: clamp(3.125rem, -0.2073rem + 14.218vw, 12.5rem); /*  50px 200px */
  --section-v-padding-small: clamp(1.875rem, 0.3199rem + 6.6351vw, 6.25rem); /*  30px 100px */
  --v-margin: clamp(1.25rem, 0.5835rem + 2.8436vw, 3.125rem); /* 20px to 50px - same as Gap */



  /* animation */

  --speed-fast: 150ms;
  --speed-medium: 400ms;
  --speed-slow: 700ms;


  /* forms */

  --form-border-radius: 0.625rem; /* 10px */
  --form-padding-block: 0.3125rem; /* 5px */
  --form-textarea-line-count: 5;
  --input-border-color: hsla(var(--color-grey-hsl), 40%);
  --placeholder-text-color: hsla(var(--color-grey-hsl), 60%);

  /* Z-Index */
  --zindex-pint-employee-overlay: 10;
  --zindex-header: 100;


  /* component: header */

  --header-height: 3.9375rem; /* 63px */
  --hero-padding-block: calc( var(--header-height) + 2.5rem ) 3.75rem; /* 40px 60px */



  /* component: morse code */

  --pint-morse-code-block: var(--color-grey);

  /* component: pint-card */
  --pint-card-bg-color: #fff;



  /* Btn */
  --btn-box-shadow: none;
  --a-mail-to-link-color: #346F84;

}

@media (prefers-reduced-motion) {
  :root {
    --speed-fast: 700ms;
    --speed-medium: 700ms;
    --speed-slow: 700ms;
  }
}

/* mobile large */

@media (min-width: 550px) {
  :root {
  }
}

/* tablet */

@media (min-width: 768px) {
  :root {

    --total-columns: 12;
    --total-gaps: 11;

    /* component: header */

    --header-height: calc(var(--column) + var(--gap));

  }
}

/* desktop */

@media (min-width: 1024px) {
  :root {
  }
}

/* desktop hd */

@media (min-width: 1464px) {
  :root {

    /* header */
    --hero-padding-block: calc( var(--header-height) + 4.375rem ) 6.25rem; /* 70px 100px */

  }
}

html, body, header, main, footer, dialog, h1, h2, h3, h4, h5, h6, p, a, picture, button, ul, ol, nav,
fieldset, form, input, textarea, figure, blockquote, figcaption,
pint-content-width, pint-dialog-content {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100vh;
}

body {
  color: var(--color-font);
  display: flex;
  flex-direction: column;
  font-family: var(--default-font);
  font-weight: 400;
}

header, main, footer, picture, img {
  display: block;
}

main {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
}

pint-content-width {
  display: block;
  margin-inline: auto;
  max-width: var(--site-width);
  width: 100%; /* helps when parent is display flex */
}

pint-content-width + pint-content-width {
  margin-block-start: var(--v-margin);
}

@media (min-width: 1464px) {
  pint-content-width[data-max-width-at='desktophd'] {
    max-width: 100%;
    padding-inline: var(--site-padding);
  }
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--speed-fast) ease-in-out;
}

a:hover {
  /* will need to modify areas of the site to override the colour change */
  /*color: var(--link-color-hover);*/
}

p a {
  text-decoration: underline;
}

a.anchor {
  /* set to top position of height of header in mini mode */

  display: block;
  overflow: hidden;
  position: relative;
  text-indent: -10em;
  top: -6.25rem; /* 62 + 40 */
}

picture {
}

picture + h3 {
  margin-block-start: var(--picture-margin-gap);
}

img {
  width: 100%;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

button[data-inactive] {
  cursor: default;
}

strong {
  font-weight: 600;
}

/* dialogue modal */

dialog[aria-label="modal"] {
  background-color: transparent;
  border: none;
  position: relative;
  width: var(--site-width);
}

pint-dialog-content {
  display: block;
}

/* lists */

ul, ol {
  list-style-position: outside;
  margin-inline-start: 1.375rem; /* 22px */
}

li + li {
  margin-block-start: 0.625rem; /* 10px */
}

.list-reset {
  margin-inline-start: 0;
}

.list-reset li {
  list-style: none;
}

[data-obfuscate-name] {
  opacity: 0;
  visibility: hidden;
}

[data-no-js] [data-obfuscate-name] {
  opacity: 1;
  visibility: visible;
}

/* data attributes used for JS */

[data-inner-link] {
  cursor: pointer;
}

/* data-skip-to-main */

[data-skip-to-main] {
  position: absolute;
  inset-block-start: -9999px;
  inset-inline-start: -9999px;
  /*color: #fff;*/
  padding: 0.5em 1em;
}

[data-skip-to-main]:focus {
  position: fixed;
  inset-block-start: var(--gap-1-2);
  inset-inline-start: var(--gap-1-2);
}

/* ######### Flex ######### */

pint-flex,
.flex {
  display: flex;
}

pint-flex.gap,
.flex.gap {
  gap: var(--gap);
}

pint-flex.wrap,
.flex.wrap {
  flex-wrap: wrap;
}

pint-flex.center,
.flex.center {
  justify-content: center;
}

pint-flex.right,
.flex.right {
  justify-content: flex-end;
}

pint-flex.align-center,
.flex.align-center {
  align-items: center;
}

pint-flex.full-center,
.flex.full-center {
  align-items: center;
  justify-content: center;
}

pint-flex.space-between,
.flex.space-between {
  justify-content: space-between;
}

pint-column {
  display: block;
  width: 100%;
}

@media (min-width: 768px) {
  pint-column.t_3 { width: var(--cols-3); }
  pint-column.t_5 { width: var(--cols-5); }
  pint-column.t_6 { width: var(--cols-6); }
  pint-column.ft_8 {
    width: calc( (var(--gap) * 7) + (var(--column) * 8) );
  }
}

.f-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* In nearly every instance of this use, the h2 text needs to be centered */

.f-col-center > h2 {
  text-align: center;
}

/* ######### Grid ######### */

pint-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  width: 100%;
}

pint-grid.no-gap {
  gap: 0;
}

pint-grid + * {
  margin-top: var(--v-margin);
}

.g1 {
  gap: 2.5rem; /* 40 */
}

/* Grid widths */

.g2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 550px) {
  .g2_ml {
    grid-template-columns: repeat(2, 1fr);
  }
  .g3_ml {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 768px) {
  .g2_t {
    grid-template-columns: repeat(2, 1fr);
  }
  .g3_t {
    grid-template-columns: repeat(3, 1fr);
  }
  .g4_t {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .g3_d {
    grid-template-columns: repeat(3, 1fr);
  }
  .g4_d {
    grid-template-columns: repeat(4, 1fr);
  }
  .g6_d {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* Grid Line Split */

:root {
  --line-split-gap: 50px;
  --line-split-width: 2px;
}

pint-grid.line-split {
  position: relative;
  gap: 0;
}

pint-grid.line-split pint-column {
  margin-block-start: 50px;
  position: relative;
}

pint-grid.line-split pint-column:after,
pint-grid.line-split pint-column:before {
  background: hsla(var(--color-primary-hsl), 20%);
  content: '';
  display: block;
  position: absolute;
}

pint-grid.line-split pint-column:after {
  height: 100%;
  right: calc(-1 * (var(--line-split-width) / 2));
  top: 0;
  width: var(--line-split-width);
}

pint-grid.line-split pint-column:before {
  top: calc(-1 * (var(--line-split-gap) / 2));
  height: var(--line-split-width);
  width: 100%;
}

pint-grid.line-split.g2 pint-column:nth-child(-n + 2) {
  margin-block-start: 0;
}

pint-grid.line-split.g2 pint-column:nth-child(2n):after,
pint-grid.line-split.g2 pint-column:nth-child(-n + 2):before {
  display: none;
}

@media (min-width: 768px) {
  pint-grid.line-split.g2 pint-column:nth-child(2n):after,
  pint-grid.line-split.g2 pint-column:nth-child(-n + 2):before {
    display: block;
  }

  pint-grid.line-split.g3_t pint-column:nth-child(-n + 3) {
    margin-block-start: 0;
  }
  pint-grid.line-split.g3_t pint-column:nth-child(3n):after,
  pint-grid.line-split.g3_t pint-column:nth-child(-n + 3):before {
    display: none;
  }

  pint-grid.line-split.g4_t pint-column:nth-child(-n + 4) {
    margin-block-start: 0;
  }
  pint-grid.line-split.g4_t pint-column:nth-child(4n):after,
  pint-grid.line-split.g4_t pint-column:nth-child(-n + 4):before {
    display: none;
  }
}

@media (min-width: 1024px) {

  pint-grid.line-split.g3_t pint-column:nth-child(3n):after,
  pint-grid.line-split.g3_t pint-column:nth-child(-n + 3):before {
    display: block;
  }

  pint-grid.line-split.g4_t pint-column:nth-child(4n):after,
  pint-grid.line-split.g4_t pint-column:nth-child(-n + 4):before {
    display: block;
  }

  pint-grid.line-split.g6_d pint-column:nth-child(-n + 6) {
    margin-block-start: 0;
  }
  pint-grid.line-split.g6_d pint-column:after {
    display: block;
  }
  pint-grid.line-split.g6_d pint-column:nth-child(6n):after,
  pint-grid.line-split.g6_d pint-column:nth-child(-n + 6):before {
    display: none;
  }
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-light-webfont.woff2') format('woff2'),
  url('/assets/fonts/inter-light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-medium-webfont.woff2') format('woff2'),
  url('/assets/fonts/inter-medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-regular-webfont.woff2') format('woff2'),
  url('/assets/fonts/inter-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-semibold-webfont.woff2') format('woff2'),
  url('/assets/fonts/inter-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: fallback;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-font-titles);
  font-family: var(--default-font);
  font-weight: 300;
}

h1, .h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line-height);
}

h1 + *, .h1 + * {
  margin-block-start: var(--h1-margin-gap);
}

/* H2 Tag */

h2, .h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line-height);
}

h2 > strong, .h2 > strong {
  font-weight: 500;
}

h2 + *, .h2 + * {
  margin-block-start: var(--h2-margin-gap);
}

h2 + pint-grid, .h2 + pint-grid {
  margin-block-start: var(--section-v-padding-small);
}

/* H3 Tag */

h3, .h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line-height);
}

h3 + *, .h3 + * {
  margin-block-start: var(--h3-margin-gap);
}

p, .p, li {
  color: var(--color-font);
  font-size: var(--p-size);
  line-height: var(--p-line-height);
}

p + *, .p + * {
  margin-block-start: var(--p-margin-gap);
}

p + p, p + .p,
.p + p, .p + .p,
p + ul, .p + ul {
  margin-block-start: var(--p-margin-gap-p);
}

p + h1, .p + h1  { margin-block-start: var(--p-margin-gap-h1); }

p + h2, .p + h2  { margin-block-start: var(--p-margin-gap-h2); }

p + h3, .p + h3  { margin-block-start: var(--p-margin-gap-h3); }

p + h4, .p + h4  { margin-block-start: var(--p-margin-gap-h4); }

address {
  color: var(--color-font);
  font-size: var(--p-size);
  line-height: var(--p-line-height);
  font-style: normal;
}

ul + p   { margin-block-start: var(--p-margin-gap-p); }

ul + h2  { margin-block-start: var(--p-margin-gap-h2); }

ul + h3  { margin-block-start: var(--p-margin-gap-h3); }

ul + h4  { margin-block-start: var(--p-margin-gap-h4); }

form {
  accent-color: var(--color-primary-dark);
}

form legend {
  display: none;
}

fieldset {
  border: none;
}

input, textarea {
  border-color: var(--input-border-color);
  border-style: solid;
  border-width: 0.0625rem;
  border-radius: var(--form-border-radius);
  color: var(--color-grey);
  font-size: var(--p-size);
}

input::placeholder,
textarea::placeholder {
  color: var(--placeholder-text-color);
}

input:not([type=checkbox]),
textarea {
  line-height: var(--p-line-height);
  padding-block: var(--form-padding-block);
  padding-inline: 1.25rem; /* 15px */
  width: 100%;
}

textarea {
  font-family: inherit;
  /* text area height = (padding-block * 2) + (lines * line-height) */
  height: calc( var(--form-padding-block) * 2 + var(--form-textarea-line-count) * var(--p-line-height) );
}

input[type=checkbox] {
  height: 1.25rem; /* 20px */
  width: 1.25rem; /* 20px */
}

form label {
  color: var(--label-color);
  display: flex;
  font-weight: bold;
  gap: 0.625rem; /* 10px */
  justify-content: space-between;
  padding-block: 1.25rem 0.625rem; /* 20px 10px */
}

form label.check {
  justify-content: flex-start;
}

form label .req {
  color: var(--label-required-color);
  font-weight: 400;
}

form label:has(input[type=checkbox]) {
  justify-content: flex-start;
}

form * + label {
  padding-block-start: 1.25rem;
}

form label:last-of-type {
  padding-block-end: 0;
}

form button[type=submit] {
  margin-block-start: 1.875rem; /* 30px */
}

.icon-chevron-left {
  aspect-ratio: 11 / 19;
  width: 0.6875rem; /* 11px */
}

.icon-chevron-right {
  aspect-ratio: 11 / 19;
  width: 0.6875rem; /* 11px */
}

.icon-close {
  aspect-ratio: 1 / 1;
  width: 1.1875rem; /* 19px */
}

/*
  Detailed icons
  These are ones that are multi coloured and not used for navigation
*/

.icon-big-picture {
  /*width: 4.75rem; !* 76px *!*/
}

/* grey bg */

.bg-grey-lightest { background-color: var(--color-grey-lightest); }

.bg-grey-light { background-color: var(--color-grey-light); }

.bg-grey { background-color: var(--color-grey); }

.bg-grey-dark { background-color: var(--color-grey-dark); }

/* grey bg Gradients */

.bg-grey-lightest-gradient {
  background: var(--grey-lightest-gradient);
}

.bg-grey-dark-gradient {
  background: var(--grey-dark-gradient);
}

/* primary bg */

.bg-primary { background-color: var(--color-primary); }

.bg-primary-dark { background-color: var(--color-primary-dark); }

.bg-primary-darkest { background-color: var(--color-primary-darkest); }

/* font colors */

.font-color-grey-20 { color: var(--color-grey-20); }

.color-tertiary { color: var(--color-tertiary); }

/* Icons */

.icon-color-0 { fill: var(--color-primary); }

.icon-color-1 { fill: var(--color-primary-darkest); }

.icon-color-2 { fill: var(--color-primary-dark); }

/*

  BG COLOUR MODES
  for setting font and icon variables

*/

[data-mode="light"],
.bg-grey-lightest-gradient {
  --btn-border-color: var(--color-primary-darkest);
  --color-font: var(--color-grey);
  --color-font-titles: var(--color-primary-darkest);
  --label-color: var(--color-primary-dark);
  --link-color: var(--color-primary-dark);
  --input-border-color: hsla(var(--color-grey-hsl), 40%);
  --social-bg-color: rgba(255,255,255,0.05);
  --social-bg-color-hover: hsl(var(--color-grey-dark-hsl), 10%);
  --social-icon-color: var(--color-primary-dark);
  --tiny-svg-color: var(--color-primary-dark);

  --label-required-color: hsl(200deg 2.65% 44.31%); /* 6E7274 */

  /* bg-blocks */
  --bg-blocks-light-bg: var(--color-primary);
  --bg-blocks-dark-bg: var(--color-primary);

  /* Btn */
  --btn-box-shadow: none;

}

[data-mode="dark"],
.bg-grey-dark-gradient {
  --btn-border-color: var(--color-font-lightest);
  --color-font: var(--color-font-lightest);
  --color-font-titles: var(--color-font-lightest);
  --input-border-color: hsla(var(--color-grey-hsl), 0%);
  --label-color: var(--color-font-lightest);
  --link-color: var(--color-font-lightest);
  --pint-morse-code-block: hsl(0deg 0% 81.57%); /* #d0d0d0 */
  --social-bg-color: rgba(255,255,255,0.05);
  --social-bg-color-hover: rgba(255,255,255,0.25);
  --social-icon-color: var(--color-font-lightest);
  --tiny-svg-color: var(--color-font-lightest);

  --label-required-color: var(--color-grey-20);

  /* bg-blocks */
  --bg-blocks-light-bg: #fff;
  --bg-blocks-dark-bg: var(--color-primary-dark);

  /* Btn */
  --btn-box-shadow: 0 0.25rem 1.875rem hsla(0, 0%, 0%, 10%); /* 0 4px 30px */
}

.margin-top {
  margin-top: var(--v-margin);
}

.margin-top-v-small {
  margin-block-start: var(--section-v-padding-small);
}

.no-padding-inline {
  padding-inline: 0;
}

/*
  apply to any container to set the max width to
  10 columns for Desktop+
*/

.thin {
  margin-inline: auto;
  max-width: var(--site-width-thin);
}

@media (max-width: 767.95px) {
  .thin {
    padding-inline: 0;
  }
}

.display-block {
  display: block;
}

.block {
  display: block;
}

.text-align-center {
  text-align: center;
}

.no-margin-block {
  margin-block: 0;
}

.relative {
  position: relative;
}

/* Components */

:root {
  --bg-blocks-light-bg: var(--color-primary);
  --bg-blocks-dark-bg: var(--color-primary);
  --bg-blocks-anim-speed: 5000ms;
}

bg-blocks {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* set when block-skip numbers are added */

bg-block-item[data-block-skip] {
  visibility: hidden;
}

/** + bg-blocks {*/

/*  margin-top: 20px;*/

/*}*/

/* all custom markup */

bg-blocks, bg-block-item {
  box-sizing: border-box;
}

/* bg-blocks */

bg-blocks {
  display: grid;
  height: 200px; /* default height */
  opacity: 1;
  /*pointer-events: none;*/
  width: 600px; /* default width */
}

bg-block-item {
  aspect-ratio: 1/1;
  background-color: var(--bg-blocks-dark-bg);
  display: block;
  opacity: 0;
  transition: background-color var(--bg-blocks-anim-speed), opacity var(--bg-blocks-anim-speed);
}

bg-block-item:hover {
  opacity: 0.2;
  transition: background-color 100ms, opacity 100ms;
}

.bg-dark-1,
.bg-dark-2,
.bg-dark-3,
.bg-dark-4,
.bg-dark-5,
.bg-dark-6,
.bg-dark-7,
.bg-dark-8,
.bg-dark-9,
.bg-dark-10 {
  background-color: var(--bg-blocks-dark-bg);
  transition: background-color 100ms, opacity 100ms;
}

.bg-dark-1 { opacity: 0.11; }

.bg-dark-2 { opacity: 0.12; }

.bg-dark-3 { opacity: 0.13; }

.bg-dark-4 { opacity: 0.14; }

.bg-dark-5 { opacity: 0.15; }

.bg-dark-6 { opacity: 0.16; }

.bg-dark-7 { opacity: 0.17; }

.bg-dark-8 { opacity: 0.18; }

.bg-dark-9 { opacity: 0.19; }

.bg-dark-10 { opacity: 0.20; }

.bg-light-1,
.bg-light-2,
.bg-light-3,
.bg-light-4,
.bg-light-5,
.bg-light-6,
.bg-light-7,
.bg-light-8,
.bg-light-9,
.bg-light-10 {
  background-color: var(--bg-blocks-light-bg);
  transition: background-color 100ms, opacity 100ms;
}

.bg-light-1 { opacity: 0.11; }

.bg-light-2 { opacity: 0.12; }

.bg-light-3 { opacity: 0.13; }

.bg-light-4 { opacity: 0.14; }

.bg-light-5 { opacity: 0.15; }

.bg-light-6 { opacity: 0.16; }

.bg-light-7 { opacity: 0.17; }

.bg-light-8 { opacity: 0.18; }

.bg-light-9 { opacity: 0.19; }

.bg-light-10 { opacity: 0.20; }

/* DEBUGGING */

/* quick class to show the numbers */

bg-blocks.show-numbers {
  counter-reset: block-item-count;
}

bg-blocks.show-numbers bg-block-item {
  counter-increment: block-item-count;
  opacity: 1 !important;
}

bg-blocks.show-numbers bg-block-item:before {
  color: #000;
  content: counter(block-item-count) '. ';
  font-size: 1.25rem; /* 20px */
}

/*

  .btn : default button class
  .a-chevron-right : hyperlink with a chevron svg pointing right

 */

:root {
  --btn-border-color: var(--color-primary-darkest);
}

.btn {
  background-color: var(--color-primary-dark);
  border-radius: 1.25rem; /* 20px */
  box-shadow: var(--btn-box-shadow);
  color: var(--color-font-lightest);
  display: inline-flex;
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  padding-block: 0.625rem; /* 10px */
  padding-inline: 1.25rem; /* 20px */
  position: relative;
  text-transform: uppercase;
  transition: background-color var(--speed-medium) ease-in-out;
  white-space: nowrap;
}

.btn:hover {
  background-color: var(--color-primary-darkest);
}

.btn:before {
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--btn-border-color);
  content: '';
  height: 100%;
  left: 50%;
  opacity: 0;
  position: absolute;
  scale: 1;
  transition:
    box-shadow var(--speed-fast) ease-in-out,
    opacity var(--speed-fast) ease-in-out;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  width: 100%;
}

.btn:hover:before {
  box-shadow: 0 0 0 10px var(--btn-border-color);
  opacity: 0.05;
}

.a-chevron-right {
  align-items: center;
  display: flex;
  font-size: clamp(0.875rem, 0.8622rem + 0.0548vw, 0.9375rem); /* 14px - 15px */
  font-weight: 600;
  gap: 0.5rem; /* 8px */
  text-transform: uppercase;
}

.a-chevron-right .icon-chevron-right {
  width: 0.375rem; /* 6px */
}

/* standard anchor */

a[target="_blank"],
a.external {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

a[target="_blank"]:after,
a.external:after {
  content: url('/assets/svg/icon-external.svg');
  display: block;
  width: 11px;
}

/* btn links */

a.btn[target="_blank"] {
  align-items: center;
  display: inline-flex;
}

a.btn[target="_blank"] span {
  transform: translateX(10px);
  transition: transform var(--speed-fast) ease-in-out;
}

a.btn[target="_blank"]:after {
  content: url('/assets/svg/icon-external.svg');
  display: block;
  opacity: 0;
  transform: translateX(-5px);
  transition:
    opacity var(--speed-fast) ease-in-out,
    transform var(--speed-fast) ease-in-out;
  width: 11px;
}

a.btn[target="_blank"]:hover span {
  transform: translateX(0);
}

a.btn[target="_blank"]:hover:after {
  opacity: 1;
  transform: translateX(0);
}

/* no external icon */

a.no-external[target="_blank"]:after {
  display: none;
}

/* MAILTO */

/* mailto links by themselves have an icon prefixing the email address */

a[href*="mailto:"] {
  align-items: center;
  color: var(--a-mail-to-link-color);
  display: inline-flex;
  gap: 10px;
  text-transform: uppercase;
}

a[href*="mailto:"]:before {
  content: url('/assets/svg/icon-mail.svg');
  width: 18px;
}

/* mailto links within a paragraph need to look like normal links */

p a[href*="mailto:"] {
  display: inline;
  text-transform: none;
}

p a[href*="mailto:"]:before {
  display: none;
}

.client-img {
  align-items: center;
  aspect-ratio: 190 / 130;
  display: flex;
  /* setting the height messed up in Safari */
  /*height: 100%;*/
  justify-content: center;
}

.client-img img {
  /* setting the height messed up in Safari */
  /*height: 81.92%; !* max 130px *!*/
  object-fit: contain;
  width: 82.16%; /* max 190px */
}

/*@import "components/pint-author.css";*/

pint-card,
pint-card-content {
  box-sizing: border-box;
  display: block;
  margin: 0;
}

pint-card {
  background: var(--pint-card-bg-color);
  box-shadow: 0 4px 30px 0 rgba(0,0,0,0.1);
  display: block;
  transform: scale(1);
  transition: transform var(--speed-fast) ease-in-out;
}

pint-card img {
  height: auto;
  width: 100%;
  max-width: 100%;
}

pint-card-content {
  padding-block: 1.875rem; /* 30px */
  padding-inline: 2.5rem; /* 40px */
}

pint-card-content pint-tag {
  margin-block-end: 1.875rem; /* 30px */
}

pint-card-content a {
  word-break: break-word;
}

/* hover states */

pint-card:hover,
pint-card:focus {
  transform: scale(1.05);
}

/* Change bg colour of active link when hovering other links */

pint-grid:has(pint-card:hover) pint-card:not(:hover) {
  transform: scale(0.99);
}

/* Project */

pint-card[data-type="project"] p {
  margin-top: 0.3125rem; /* 5px */
}

/* Push - used on home page */

pint-card[data-type="push"] {
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

pint-card[data-type="push"]:hover,
pint-grid:has(pint-card[data-type="push"]:hover) pint-card:not(:hover) {
  /* override the hover scale on all pint-card's to make push
  cards work the same simply remove this styling */
  transform: scale(1);
}

pint-card[data-type="push"] p:last-of-type {
  flex-grow: 1;
}

pint-card[data-type="push"] .a-chevron-right {
  margin-block-start: clamp(1.25rem, 1.1216rem + 0.5479vw, 1.875rem); /* 20px - 30px */
}

pint-card[data-type="push"] .a-chevron-right .icon-chevron-right {
  position: relative;
  transform: translateX(0);
  transition: transform var(--speed-fast) ease-in-out;
}

pint-card[data-type="push"]:hover .a-chevron-right {
  color: var(--link-color-hover);
}

pint-card[data-type="push"]:hover .a-chevron-right .icon-chevron-right {
  transform: translateX(5px);
}

:root {
  --pint-contact-message-width: var(--cols-4);
  --pint-contact-form-width: var(--cols-5);
}

@media (min-width: 768px) {
  :root {
  }
}

@media (min-width: 1024px) {
  :root {
    --pint-contact-message-width: var(--cols-3);
    --pint-contact-form-width: var(--cols-4);
  }
}

pint-contact-form,
pint-contact-message {
  box-sizing: border-box;
  display: block;
  margin: 0;
}

pint-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--v-margin);
}

pint-contact-message {
}

pint-contact-form form {
}

@media (min-width: 768px) {
  pint-contact-form {
    flex-direction: row;
    gap: calc(var(--gap) * 2 + var(--column));
    justify-content: center;
  }
  pint-contact-message {
    flex-basis: var(--pint-contact-message-width);
  }
  pint-contact-form form {
    flex-basis: var(--pint-contact-form-width);
  }
}

@media (min-width: 768px) {
  .contact-form + .form-response {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 37.3125rem; /* 597px */
  }
  .form-response:empty {
    display: none;
  }
}

/*@import "components/pint-employee.css";*/

pint-icon-plus-content {
  display: flex;
  gap: 0.9375rem; /* 15px */
  justify-content: space-between;
}

pint-icon-column,
pint-icon-content {
  display: block;
}

pint-icon-column {
  align-items: flex-start;
  display: flex;
  justify-content: center;
  max-width: 3.125rem; /* 50px */
  width: 100%;
}

pint-icon-content {
  width: auto;
}

pint-icon-column svg {
  width: 100%;
}

@media (min-width: 768px) {
  pint-icon-plus-content {
    gap: 0;
  }
  pint-icon-column {
    max-width: calc( var(--column) + (var(--gap) / 2) );
  }
  pint-icon-content {
    width: calc( var(--column) * 3 + var(--gap) * 2 );
  }
}

/* Small mode */

pint-icon-plus-content[data-type="small"] {
  align-items: center;
  gap: 0.9375rem; /* 15px */
  justify-content: flex-start;
}

pint-icon-plus-content[data-type="small"] pint-icon-column,
pint-icon-plus-content[data-type="small"] pint-icon-content {
  min-width: auto;
  width: auto;
}

pint-icon-plus-content[data-type="small"] pint-icon-column {
  align-items: center;
  max-width: 2.5rem; /* 40px */
}

pint-icon-plus-content[data-type="small"] pint-icon-content p {
  line-height: 1.25rem; /* 20px */
}

pint-hero,
pint-hero-sub {
  box-sizing: border-box;
  display: block;
  margin: 0;
  padding: 0;
}

pint-hero {
  background: rgb(73,123,141);
  background: linear-gradient(180deg,
    rgba(73,123,141,1) 0%,
    rgba(32,72,88,1) 100%);
  padding-block: var(--hero-padding-block);
  position: relative;
}

pint-hero pint-content-width {
  position: relative;
  z-index: 2;
}

pint-hero bg-blocks {
  bottom: 0;
  height: calc(6.25rem * 3); /* 100px */
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: calc(6.25rem * 20); /* 100px */
  z-index: 1;
}

pint-hero span.highlight {
  background: var(--color-primary-darkest);
  color: var(--color-font);
  display: inline-block;
  font-size: clamp(1.25rem, 1.1216rem + 0.5479vw, 1.875rem); /* 20 - 30px */
  margin-block-end: clamp(0.9375rem, 0.7449rem + 0.8219vw, 1.875rem); /* 15 - 30px */
  padding-block: 0.625rem; /* 10px */
  padding-inline: 1.25rem; /* 20px */
  text-transform: uppercase;
}

pint-hero pint-flex h1 + .btn {
  margin-top: 0;
}

/* hero large */

pint-hero.large {
  --h1-size: clamp(2.5rem, 1.6114rem + 3.7915vw, 5rem); /* 40px - 80px */
  --h1-margin-bottom: var(--h1-size);

  padding-block: var(--header-height) 100px;
}

pint-hero.large bg-blocks {
  height: calc(6.25rem * 5); /* 100px */
}

@media (min-width: 768px) {
  pint-hero.large h1 {
    max-width: var(--cols-8);
  }
}

/* sub section of the Hero */

pint-hero-sub {
  border-top: 1px solid hsla(0,0%,100%,20%);
  margin-block-start: 1.875rem; /* 30px */
  padding-block-start: 1.25rem; /* 20px */
}

pint-hero-sub nav ul {
  display: flex;
  gap: 1.875rem; /* 30px */
  margin: 0;
}

pint-hero-sub nav li {
  list-style: none;
  margin: 0;
}

pint-hero-sub nav a {
  display: block;
  line-height: 1.9;
  position: relative;
  transition: color var(--speed-fast) ease-in-out;
}

pint-hero-sub nav a:after {
  background: var(--color-primary-dark);
  bottom: 0;
  content: '';
  height: 3px;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition:
    bottom var(--speed-fast) ease-in-out,
    opacity var(--speed-fast) ease-in-out;
  width: 100%;
}

pint-hero-sub nav [aria-current="tag"] {
  opacity: 0.6;
}

pint-hero-sub nav a:hover,
pint-hero-sub nav a:focus {
  color: hsla(0, 0%, 100%, 60%);
}

pint-hero-sub nav [aria-current="tag"]:after,
pint-hero-sub nav a:hover:after,
pint-hero-sub nav a:focus:after {
  bottom: -10px;
  opacity: 1;
}

/* Pagination */

pint-hero nav[aria-label="Pagination"] {
}

pint-hero nav[aria-label="Pagination"] a {
  background-color: var(--color-primary-dark);
  border-radius: 1.25rem; /* 20px */
  bottom: 0;
  display: grid;
  place-items: center;
  position: absolute;
  top: 0;
  transition: background-color var(--speed-fast) ease-in-out;
  width: 1.875rem; /* 30px */
}

pint-hero nav[aria-label="Pagination"] a svg {
  opacity: 0.8;
  transition:
    opacity var(--speed-fast) ease-in-out,
    transform var(--speed-fast) ease-in-out;
  width: 0.5625rem; /* 9px */
}

pint-hero nav[aria-label="Pagination"] a:first-of-type {
  left: calc(-1 * (var(--gap) + var(--column)));
}

pint-hero nav[aria-label="Pagination"] a:last-of-type {
  right: calc(-1 * (var(--gap) + var(--column)));
}

pint-hero nav[aria-label="Pagination"] a:first-of-type svg {
  transform: translateX(0.0625rem); /* 1px */
}

pint-hero nav[aria-label="Pagination"] a:last-of-type svg {
  transform: translateX(-0.0625rem); /* 1px */
}

pint-hero nav[aria-label="Pagination"] a:hover {
  background-color: var(--color-primary-darkest);
}

pint-hero nav[aria-label="Pagination"] a:hover svg {
  opacity: 1;
}

pint-hero nav[aria-label="Pagination"] a:first-of-type:hover svg {
  transform: translateX(-0.0625px); /* 1px */
}

pint-hero nav[aria-label="Pagination"] a:last-of-type:hover svg {
  transform: translateX(0.0625rem); /* 1px */
}

:root {
  --pint-featured-client-height: auto;
  --pint-featured-client-img-width: 26.25rem; /* 420 */
}

@media (min-width: 550px) { /* mobile large */
  :root {
    --pint-featured-client-height: 330px; /* 330px */
    --pint-featured-client-img-width: 40.625rem; /* 650px */
  }
}

@media (min-width: 768px) { /* table */
  :root {
    --pint-featured-client-height: 363px;
    --pint-featured-client-img-width: 768px; /* 768 */
  }
}

@media (min-width: 1024px) { /* desktop */
  :root {
    --pint-featured-client-height: 528px;
    --pint-featured-client-img-width: 1118px; /* 1118 */
  }
}

@media (min-width: 1464px) { /* desktop HD */
  :root {
    --pint-featured-client-height: 50rem; /* 800px */
    --pint-featured-client-img-width: 99.375rem; /* 1590px */
  }
}

.section-featured-work {
  padding-inline: 0;
}

pint-featured-client {
  background-image: url(/assets/images/featured/texture-dhd.png);
  background-position: bottom center;
  background-size: cover;
  box-sizing: border-box;
  display: block;
  height: var(--pint-featured-client-height);
  margin: 0;
  position: relative;
}

pint-featured-client:after {
  background: linear-gradient(180deg, hsla(0,0%,0%,0%) 0%, hsla(0,0%,0%,25%) 100%);
  bottom: 0;
  content: '';
  display: block;
  height: clamp(3.125rem, 2.226rem + 3.8356vw, 7.5rem); /* 50px - 120px */
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 5;
}

@media (min-width: 550px) { /* mobile large */
  pint-featured-client {
    align-items: flex-end;
    display: flex;
    position: relative;
  }
}

pint-featured-client picture {
  align-items: flex-end;
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

/* layer 1 picture, used on the client detail pages */

@media (min-width: 550px) { /* Mobile Small */
  pint-featured-client > picture {
    position: absolute;
  }
  pint-featured-client > picture img {
    height: 100%;
    object-fit: cover;
  }
}

/* layer 1 pint-slider, used on the home page */

pint-featured-client > pint-slider {
  min-height: 230px;
  width: 100%;
  z-index: 1;
}

pint-featured-client > pint-slider pint-slider-inner {
  transition: left var(--speed-slow) ease-out;
}

@media (min-width: 550px) { /* Mobile Small */
  pint-featured-client > pint-slider {
    position: absolute;
  }
  pint-featured-client > pint-slider picture {
    position: relative;
  }
}

/* img styling with the picture for both scenarios */

pint-featured-client picture img {
  position: relative;
  width: var(--pint-featured-client-img-width);
  z-index: 1;
}

@media (min-width: 550px) { /* mobile large */
  pint-featured-client picture img {
    max-width: var(--pint-featured-client-img-width);
    position: relative;
    width: 100%;
  }
}

/* make sure featured controls sits above everything */

pint-featured-client > pint-content-width {
  z-index: 10;
}

:root {
  --pint-morse-code-block-margin-top: 0 4.0625rem; /* 0 18px */
}

@media (min-width: 768px) {
  :root {
    /* calc(helps line up with the top of a paragraph) 65px */
    --pint-morse-code-block-margin-top: calc(var(--p-line-height) * 0.3) 4.0625rem;
  }
}

pint-morse-code-block {
  border-bottom: 5px solid var(--color-primary-dark);
  display: inline-flex;
  margin-block: var(--pint-morse-code-block-margin-top);
  position: relative;
}

pint-morse-code-block:before,
pint-morse-code-block:after {
  background: var(--color-primary-dark);
  bottom: -5px;
  content: '';
  height: 5px;
  position: absolute;
  width: 5px;
}

pint-morse-code-block:before {
  right: -10px;
}

pint-morse-code-block:after {
  right: -20px;
}

pint-morse-code-block p,
pint-morse-code-block h2,
pint-morse-code-block h3 {
  color: var(--pint-morse-code-block);
  font-size: 0.9375rem;
  line-height: var(--p-line-height);
  text-transform: uppercase;
  white-space: nowrap;
}

pint-morse-code-block:empty {
  margin-block: 0 1.5625rem; /* 0 25px */
  min-width: 6.8125rem;
}

@media (min-width: 768px) {
  pint-morse-code-block:empty {
    margin-block: var(--pint-morse-code-block-margin-top);
    /* bespoke: 73px - 135px media(768px - 1390px) */
    min-width: clamp(4.5625rem, -0.2221rem + 9.9678vw, 8.4375rem);
  }
}

/*
  Pint Slider Grid
  a slider which becomes grid content at a certain breakpoint
*/

pint-slider-grid,
pint-slider-grid-inner {
  display: block;
}

pint-slider-grid {
  position: relative;
}

pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-inner {
  display: grid;
  left: 0;
  transition: left var(--speed-medium) ease-in-out;
}

/* set all items within except buttons to no be clickable etc */

pint-slider-grid-item *:not(button):not(a) {
  pointer-events: none;
  user-select: none;
}

/* form navigation items */

pint-slider-grid > form {
  display: none;
  width: 100%;
}

pint-slider-grid > form button {
  opacity: 1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity var(--speed-medium) ease-in-out;
}

pint-slider-grid > form button[data-previous] {
  left: 50px
}

pint-slider-grid > form button[data-next] {
  right: 50px
}

pint-slider-grid > form button[data-inactive] {
  cursor: default;
  opacity: 0.2;
}

/* max width */

@media (max-width: 767.9px) {
  pint-slider-grid[data-grid-start="tablet"] {
    overflow: hidden;
  }
  pint-slider-grid[data-grid-start="tablet"] > form {
    display: block;
  }
  pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-inner {
    display: flex;
    height: inherit;
    position: absolute;
  }
}

/* min width */

@media (min-width: 768px) {
  pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-inner {
    gap: var(--gap);
  }
  pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-inner {
    max-width: 100%;
  }
  pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-item {
    min-width: 100%;
  }
  pint-slider-grid[data-grid-start="tablet"] pint-slider-grid-item * {
    pointer-events: auto;
    user-select: auto;
  }
}

pint-statement,
pint-statement-content {
  display: block;
}

pint-statement > h2 > strong {
  display: block;
}

@media (max-width: 767.95px) {
  pint-statement > pint-flex {
    display: block;
  }
}

@media (min-width: 768px) {
  pint-statement > pint-flex {
    align-items: flex-start;
    justify-content: space-between;
  }
  pint-statement.indent > h2 > span,
  pint-statement.indent > h3 > span,
  pint-statement.indent pint-morse-code-block {
    margin-inline-start: calc( var(--column) + var(--gap) );
  }
  pint-statement-content {
    width: calc( (var(--column) * 8) + (var(--gap) * 7) );
  }
}

pint-statement + pint-grid {
  margin-top: var(--v-margin);
}

pint-tag {
  background: var(--color-grey-light);
  color: var(--color-font-lightest);
  display: inline-flex;
  padding-inline: 0.625rem; /* 10px */
  padding-block: 0.3125rem; /* 5px */
  text-transform: uppercase;
}

/* Section */

section {
  padding-block: var(--section-v-padding);
}

.section-small {
  padding-block: var(--section-v-padding-small);
}

.section-bottom {
  padding-block-start: 0;
}

.section-bottom-small {
  padding-block-end: var(--section-v-padding-small);
}

.section-top {
  padding-block-end: 0;
}

.section-top-small {
  padding-block-start: var(--section-v-padding-small);
}

:root {
  --social-bg-color: rgba(255,255,255,0.05);
  --social-bg-color-hover: hsl(var(--color-grey-dark-hsl), 10%);
  --social-button-size: 3.125rem; /* 50px */
  --social-svg-size: 1.84em;
  --social-icon-color: var(--color-primary-dark);
}

@media screen {
  .social-media {
  }
  .social-media ul {
    display: flex;
    gap: 15px;
    margin: 0;
  }
  .social-media ul li {
    list-style: none;
    margin: 0;
  }
  .social-media-link {
    align-items: center;
    background: var(--social-bg-color);
    box-shadow: 0 4px 30px 0 hsla(0, 0%, 0%, 20%);
    display: flex;
    height: var(--social-button-size);
    justify-content: center;
    transition: background var(--speed-medium);
    width: var(--social-button-size);
  }
  .social-media-link svg path {
    fill: var(--social-icon-color);
  }

  .social-media-link:hover {
    background: var(--social-bg-color-hover);
  }



  .social-media-link.twitter svg {
    width: var(--social-svg-size);
  }
  .social-media-link.linkedin svg {
    width: var(--social-svg-size);
  }
  .social-media-link.facebook svg {
    width: 1em;
  }
}

@media print {
  .social-media-link {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
  }
  .social-media-link:after {
    content: attr(href);
  }
  .social-media-link svg {
    width: 1em !important;
  }
  .social-media svg path {
    fill: #000;
  }
}

/* Large Components */

@media screen {
  footer[data-mode="dark"] {
    --color-font: hsla(196, 14%, 69%, 100%); /* #a5b5bb */

    padding-block: clamp(2.5rem, 1.1145rem + 5.9113vw, 6.25rem); /* 40 - 100 */
  }
  footer h2 {
    text-align: center;
  }
  footer .social-media {
    margin-top: 1.25em;
  }
  footer .social-media-link {
    box-shadow: none;
  }
  .footer-copyright-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 3.125rem 0 0 0;
    padding: 0;
  }
  .footer-copyright-bar li {
    align-items: center;
    display: flex;
    justify-content: center;
    list-style: none;
    margin-block-start: 0;
    width: 100%;
  }
  .footer-copyright-bar ul {
    margin: 0;
  }
  .footer-copyright-bar li + li:before {
    color: var(--color-font);
    content: '/';
    display: inline-block;
    padding-inline: 10px;
  }
  .footer-copyright-bar li a {
    line-height: var(--p-line-height);
  }
  .footer-copyright-bar li a:hover {
    color: inherit;
    text-decoration: underline;
  }



  /* desktop max */
  @media (max-width: 1023px) {
    .footer-copyright-bar > li:first-of-type {
      width: 100%;
    }
    .footer-copyright-bar li:nth-child(2):before {
      display: none;
    }
  }

  /* tablet max */
  @media (max-width: 767px) {
    .footer-copyright-bar li:nth-child(n + 2) {
      width: auto;
    }
  }

  /* mobile large max */
  @media (max-width: 549px) {
    .footer-copyright-bar li + li:before {
      display: none;
    }
    .footer-copyright-bar li:nth-child(2) {
      width: 100%;
    }
    .footer-copyright-bar li:nth-child(n + 4):before {
      display: inline-block;
    }
  }

  /* tablet */
  @media (min-width: 768px) {
    .footer-copyright-bar li {
      width: auto;
    }
    .footer-copyright-bar ul {
      display: flex;
    }
  }

  /* desktop */
  @media (min-width: 1024px) {
    .footer-copyright-bar {
      flex-wrap: nowrap;
    }
    .footer-copyright-bar > li {
      width: auto;
    }
  }
}

@media print {
  .footer-copyright-bar a {
    display: none;
  }
}

header {
  background: transparent;
  left: 0;
  position: fixed;
  top: 0;
  transition: background var(--speed-medium) ease-in-out;
  width: 100%;
  z-index: var(--zindex-header);
}

header pint-content-width {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 1530px) {
  header pint-content-width {
    max-width: 100%;
    padding-inline: 3.125rem; /* 50px */
  }
}

primary-logo {
  align-items: center;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  height: var(--header-height);
  justify-content: center;
  transition:
    background var(--speed-fast) ease-in-out,
    height var(--speed-fast) ease-in-out;
  width: var(--header-height);
}

primary-logo a {
  align-items: center;
  display: flex;
  height: inherit;
  justify-content: center;
  width: inherit;
}

primary-logo svg {
  width: 70%;
}

/* Primary Navigation */

.primary-navigation {
  display: none;
  z-index: 1;
}

.primary-navigation ul {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 10px */
  list-style: none;
  margin: 0;
}

.primary-navigation ul li {
  margin: 0;
}

@media (max-width: 909.5px) {

  .primary-navigation {
    background-color: var(--color-primary-darkest);
    bottom: 0;
    left: 15%;
    padding-block-start: clamp(3.125rem, 2.4829rem + 2.7397vw, 6.25rem); /* 50 - 100 */
    padding-inline: clamp(1.875rem, 0.6421rem + 5.2603vw, 7.875rem); /* 30 - 126 */
    position: fixed;
    top: 0;
    right: 0;
  }

  [data-mobile-active] .primary-navigation {
    display: flex;
  }
}

@media (max-width: 550px) {
  .primary-navigation {
    left: 15%;
  }
}

@media (min-width: 910px) {
  .primary-navigation {
    display: block;
    position: relative;
  }
  .primary-navigation ul {
    flex-direction: row;
    gap: 0;
  }
}

.primary-navigation a {
  background: transparent;
  color: #fff;
  font-size: 1rem;
  padding: 0.25rem 0.9375rem; /* 7px 15px */
  text-transform: uppercase;
  transition:
    background var(--speed-medium) ease-in-out,
    color var(--speed-medium) ease-in-out,
    font-size var(--speed-fast) ease-in-out;
}

.primary-navigation a:hover,
.primary-navigation a[aria-current] {
  background: var(--color-primary-dark);
  color: #fff;
}

/*  Change bg colour of active link when hovering other links */

.primary-navigation:has(a:hover:not([aria-current])) [aria-current] {
  background: hsla(var(--color-primary-dark-hsl), 30%);
  color: #fff;
}

@media (min-width: 910px) {
  .primary-navigation a:hover,
  .primary-navigation a[aria-current] {
    background: var(--color-primary-darkest);
  }

  /* Change bg colour of active link when hovering other links */
  .primary-navigation:has(a:hover:not([aria-current])) [aria-current] {
    background: hsla(var(--color-primary-darkest-hsl), 30%);
  }
}

form.mobile-menu-options {
  display: none;
}

@media (max-width: 909.5px) {
  form.mobile-menu-options {
    display: flex;
    width: auto;
  }
}

button.mobile-open {
  --line-position: -0.5rem; /* 8px */

  align-items: center;
  display: flex;
  padding-block: 1.4375rem; /* 23px */
  padding-inline: 0.9375rem; /* 15px */
}

button.mobile-open span {
  background-color: #fff;
  display: block;
  height: 0.1875rem; /* 3px */
  position: relative;
  width: 1.625rem; /* 26px */
}

button.mobile-open span:after,
button.mobile-open span:before {
  background-color: inherit;
  content: '';
  height: inherit;
  left: 0;
  position: absolute;
  width: inherit;
}

button.mobile-open span:after {
  bottom: var(--line-position);
}

button.mobile-open span:before {
  top: var(--line-position);
}

[data-mobile-active] button.mobile-open {
  display: none;
}

button.mobile-close {
  --tiny-svg-color: #fff;

  display: none;
  margin-inline-end: 0.625rem; /* 10px */
  z-index: 2;
}

[data-mobile-active] button.mobile-close {
  display: block;
}

/* Compressed mode */

[html-header-bar-scrolled] primary-logo {
  background: transparent;
  height: 3.875rem; /* 62px */
}

[html-header-bar-scrolled] header {
  background: hsla(var(--color-primary-dark-hsl), 97%);
}

[html-header-bar-scrolled] .primary-navigation a {
  font-size: 0.9375rem; /* 15px */
}

/* ########## PRINT ########## */

@media print {
  header {
    border-bottom: 1px solid #eee;
    display: block;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
  }
  header:after {
    content: "San Diego-based, full-service web development and digital consulting agency.";
    display: block;
    text-align: center;
    padding: 0 25%;
  }
  header .logo {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5em;
  }
  header .primary-navigation {
    display: none;
  }
}