* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 1000px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 700px) {
    html {
        font-size: 12px;
    }
}

img {
    border-style: none;
    width: 100%;
    height: auto;
}

body {
    font-size: 1rem;
    font-family: "Sofia-Pro",sans-serif;
    color: #000;
    line-height: 1.5;
    font-weight: 400;
    margin: 132px 0 0 0;
}

@media (max-width: 700px) {
    body {
        margin: 82px 0 0 0;
    }
}

.responsive-object {
    position: relative;
  }
  
.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

::-webkit-input-placeholder {
    color: black !important;
}

::-moz-placeholder {
    color: black !important;
}

::-ms-placeholder {
    color: black !important;
}

::placeholder {
    color: black !important;
}

.visually-hidden { /* For hiding content but keeping it for accessibility and SEO */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* TYPOGRAPHY */

h1 {
    font-size: 2.5rem;
    line-height: 1.3;
    font-weight: 900;
    margin: 1.5rem 0 0 0;
}

h2 {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.3;
    margin: 1.5rem 0 0 0;
}

h3 {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.5;
    margin: 1.5rem 0 0 0;
}

h4 {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 1.5rem 0 0 0;
    /* letter-spacing: 2.4px; */
}

h5 {
    font-size: 1.125rem;
    font-weight: 900;
    line-height: 1.5;
    margin: 1.5rem 0 0 0;
}

h6 {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
    margin: 1.5rem 0 0 0;
}

p,
ul,
ol {
    font-size: 1.25rem;
    margin: 1.25rem 0 0 0;
}

p > a {
    font-weight: 900;
    text-decoration: underline;
    color: inherit;
}

p > a:hover {
    opacity: 0.75;
}

.blockquote {
    font-size: 1.5rem;
    font-weight: 900;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* HEADER */

header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
}

.top-wrapper {
    height: 132px;
    background-color: #fff;
}

@media (max-width: 700px) {
    .top-wrapper {
        height: 82px;
    }
}

.top {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
}

.header-image {
    display: inline-block;
    outline: none;
    width: 7.5rem;
}

@media (max-width: 700px) {
    .header-image {
        width: 80px;
    }
}

.menu-button {
    padding: 10px;
    cursor: pointer;
}

header.active .burger-icon {
    background-color: transparent;
}

header.active .burger-icon:before {
    transform: translateY(9px) rotate(45deg);
}

header.active .burger-icon:after {
    transform: translateY(-8px) rotate(-45deg);
}

.burger-icon:before {
    content: "";
    top: -8px;
}

.burger-icon:after {
    content: "";
    top: 6px;
}

.burger-icon,
.burger-icon:before,
.burger-icon:after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #f36f21;
    -webkit-transition-property: background-color,-webkit-transform;
    -moz-transition-property: background-color,-moz-transform;
    -o-transition-property: background-color,-o-transform;
    transition-property: background-color,transform;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    position: relative;
}

nav {
    height: 0;
    overflow: hidden;
    text-align: right;
    transition: height 0.25s;
    background-color: #000;
    color: #fff;
}

nav a {
    color: inherit;
    font-weight: 900;
    text-decoration: none;
}

nav a:hover {
    color: #f36f21;
}

nav > ul {
    font-size: 2em;
    padding-top: 3.125rem;
    padding-bottom: 3.125rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    max-width: 1280px;
    margin: 0 auto;
}

nav ul ul {
    font-size: 1.1rem;
    padding-bottom: 0px;
    height: 0;
    overflow: hidden;
    transition: height 0.25s;
}

nav ul ul li {
    margin-bottom: 5px;
}

nav ul {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

/* FOOTER */

footer {
    background-color: #f36f21;
}

footer h6 {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    gap: 1.875rem;
    max-width: 1280px;
    padding: 6.25rem 1.875rem;
    margin: 0 auto;
}

.footer-content .subscription {
    flex-basis: calc(25% - 1.40625rem);
}

.footer-content .branches {
    flex-basis: calc(50% - 1.40625rem);
    display: flex;
    gap: 1.875rem;
    align-content: flex-start;
}

.footer-content .branch {
    flex-basis: calc(50% - 0.9376rem);
}

.footer-content .branch a,
.footer-content .branch address > p {
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    color: #000;
}

.footer-content .misc {
    flex-shrink: 1;
    display: flex;
    flex-direction: column;
}

.footer-content .misc-text {
    margin-top: auto;
}

.footer-content .misc-text * {
    font-size: 0.875rem;
    font-weight: normal;
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9375rem;
}

.footer-social-icon {
    -webkit-transition: filter .25s ease-in-out;
    -moz-transition: filter .25s ease-in-out;
    transition: filter .25s ease-in-out;
}

.footer-social-icon:hover {
    filter: invert(1);
}

footer form .fieldWrapper:first-of-type {
    margin-top: 26px;
}

footer input[type=text], footer input[type=email] {
    font-size: 1rem;
    font-weight: 900;
    background-color: #fff;
    color: #000;
    border-color: #fff;
    padding: 10px;
    border: 2px solid #fff;
    line-height: 1.5;
    width: 100%;
    -webkit-appearance: none;
    border-radius: 0;
    max-width: 25rem;
    margin-bottom: 6px;
    font-family: "Sofia-Pro", sans-serif;
}

footer input[type=submit] {
    font-size: 0.875rem;
    font-weight: 900;
    letter-spacing: 1.68px;
    line-height: 1;
    padding: 12px 40px;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    display: inline-block;
    outline: none;
    position: relative;
    cursor: pointer;
    border: 2px solid #000;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;
    margin-top: 1.25rem;
    font-family: "Sofia-Pro", sans-serif;
}

footer input[type=submit]:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

footer ::-webkit-input-placeholder {
    color: rgba(255,255,255,.8);
}

.htmx-indicator {
    opacity: 1 !important;
    display: none !important;
    transition: unset !important;
}

.htmx-request .htmx-indicator {
    display: block !important;
}

.htmx-request.htmx-indicator {
    display: block !important;
}

/* 404 page */

.page-error-content {
    max-width: 1280px;
    padding: 6rem 1.875rem;
    margin: 0 auto;
}

/* HERO */

.hero {
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    padding-top: 12.5rem;
    padding-bottom: 6.25rem;
    max-width: 1280px;
    margin: 0 auto;
}

.hero-inner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* background: linear-gradient(0deg,rgba(0,0,0,0.35) 0%,#54545400 100%) 0% 0% no-repeat padding-box; */
}

@media (max-width: 700px) {
    .hero-content {
        padding-top: 4.6875rem;
        padding-bottom: 3.125rem;
    }
}

.homepage .hero-content {
    padding-top: 18.625rem;
    padding-bottom: 12.5rem;
}

@media (max-width: 700px) {
    .homepage .hero-content {
        padding-top: 4.6875rem;
        padding-bottom: 3.125rem;
    }
}

.homepage .hero h1 {
    font-size: 3.125rem;
}

.hero h1 {
    margin-top: 0;
}

.hero h2 {
    font-size: 1.75rem;
}

.scroll-down {
    color: #fff;
    font-weight: 900;
    border: 2px solid #fff;
    padding: 1rem 0.9rem;
    cursor: pointer;
    max-width: 3rem;
    margin-top: 3rem;
}

.scroll-down:hover {
    color: #000;
    cursor: pointer;
    border: 2px solid #000;
    background-color: #000;
}

.hero-images {
    height: 100%;
    width: 100%;
}

.hero-images-wrapper-large {
    display: block !important;
}

.hero-images-wrapper-small {
    display: none !important;
}

@media (max-width: 600px) {
    .hero-images-wrapper-large {
        display: none !important;
    }
    .hero-images-wrapper-small {
        display: block !important;
    }
}

.hero-images-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.hero-image {
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-images .slick-track {
    display: flex;
}
  
.hero-image.slick-slide {
    height: auto;
}

/* HOMEPAGE */

.intro {
    display: flex;
    gap: 3.125rem;
    padding: 6.25rem 1.875rem;
    margin: 0 auto;
    max-width: 1280px;
}

@media (max-width: 700px) {
    .intro {
        flex-wrap: wrap;
    }
}

.intro > div {
    align-self: start;
    flex-basis: 50%;
}

@media (max-width: 700px) {
    .intro > div {
        flex-basis: 100%;
    }
}

.intro .primary-text > * {
    font-size: 1.75rem;
    font-weight: 900;
}

.intro .secondary-text > * {
    font-size: 1.25rem;
}

.homepage .banner {
    background-color: #f36f21;
}

.servicespage .streamfields {
    margin-top: 6.25rem;
}

/* STANDARD PAGE */

main > .streamfields {
    margin: 6.25rem auto;
}

/* SERVICES */

.services-grid {
    max-width: 1280px;
    margin: 6.25rem auto;
    padding: 0 1.875rem;
}

.services-grid > h2 {
    margin-top: 0;
    margin-bottom: 3.125rem;
}

.service-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.875rem;
}

.service-item {
    display: block;
    flex-basis: calc(25% - 1.40625rem);
    cursor: pointer;
}

@media (max-width: 1000px) {
    .service-item {
        flex-basis: calc(33.3333333% - 1.25rem);
    }
}

@media (max-width: 700px) {
    .service-item {
        flex-basis: calc(50% - 0.9376rem);
    }
}

.service-item .container {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

.service-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
    background-color: #f36f21;
}

.service-item.active .before {
    opacity: 1;
}

.service-item:hover .before {
    opacity: 1;
}

.service-item .inner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-item .inner-container > * {
    align-items: center;
    flex-basis: 33%;
    display: flex;
    text-align: center;
    margin: 0;
}

.service-item .svg-icon {
    width: 3.75rem;
    height: 3.75rem;
}

@media (max-width: 700px) {
    .service-item .svg-icon {
        width: 1.875rem;
        height: 1.875rem;
    }
}

@media (max-width: 700px) {
    .service-item .inner-container > *:first-child {
        flex-basis: 20%;
    }
}

.service-item .container svg > * {
    fill: #fff;
    -webkit-transition: fill .25s ease-in-out;
    -moz-transition: fill .25s ease-in-out;
    transition: fill .25s ease-in-out;
}

.service-item.active .container svg > *,
.service-item:hover .container svg > * {
    fill: #000;
}

.service-name {
    color: #fff;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    padding: 0 1rem;
    text-transform: uppercase;
    letter-spacing: 1.68px;
}

@media (max-width: 700px) {
    .service-name {
        font-size: 0.85rem;
    }
}

.service-item.active .service-name,
.service-item:hover .service-name {
    color: #000;
}

.service-items .detail-summary .svg-icon {
    width: 3.75rem;
    height: auto;
}

@media (max-width: 700px) {
    .service-items .detail-summary .svg-icon {
        width: 1.875rem;
    }
}

.service-items .detail-summary .svg-icon svg > * {
    fill: #f36f21;
}
  
.service-items .detail-summary {
    font-weight: 900;
}
  
.service-items .detail-supplementary {
    text-align: center;
    font-size: 1rem;
}
  
.service-items .detail-supplementary p {
    font-size: 1rem;
}

.detail-supplementary > :first-child {
    margin-top: 0;
}
  
.detail {
    background-color:#000;
    display:none;
    flex-basis: 100%;
    flex-wrap: wrap;
    color: #FFF;
    padding-top: 104px;
    padding-bottom: 104px;
}
  
.detail.active {
    display: flex;
}
  
.detail {
    gap: 1.875rem;
    padding: 1.875rem
}
  
.detail-image img {
    width: 100%;
    height: auto;
}
  
.detail h2 {
    margin-top: 0;
}
  
.detail h4 {
    font-size: 1.25rem;
    font-weight: 200;
    margin-top: 0;
}
  
.detail h5 {
    margin-top: 0;
    font-weight: 400;
}
  
.detail h6 {
    font-size: 0.7rem;
    margin-top: 0.75rem;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 500;
    color: #a4a4a4;
}
  
.detail div:first-child {
    align-self: start;
}

.detail > div {
    flex-basis: calc(50% - 0.9376rem);
}

@media (max-width: 700px) {
    .detail > div {
        flex-basis: 100%;
    }
}

/* PEOPLE */

.people-grid {
    max-width: 1280px;
    margin: 6.25rem auto;
    padding: 0 1.875rem;
}

.people-grid > h2 {
    margin-top: 0;
    margin-bottom: 3.125rem;
}

.person-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.875rem;
}

.person-item {
    display: block;
    flex-basis: calc(25% - 1.40625rem);
    cursor: pointer;
}

@media (max-width: 700px) {
    .person-item {
        flex-basis: calc(50% - 0.9376rem);
    }
}

.person-item .container {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

.person-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    transition: background-color .25s ease-in-out;
    background: transparent linear-gradient(0deg, rgba(0,0,0,0.35) 0%, #54545400 100%) 0% 0% no-repeat padding-box;
}

.person-item.active .before,
.person-item:hover .before {
    background: #f36f21;
}

.person-item .inner-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.person-item .inner-container > .person-name {
    text-align: center;
    margin: auto auto 0;
    padding: 1rem;
    line-height: 1.25;
}

@media (max-width: 700px) {
    .person-item .inner-container > .person-name {
        padding: 0.5rem;
    }
}

.person-item .svg-icon {
    width: 3.75rem;
    height: 3.75rem;
}

.person-item .container svg > * {
    fill: #fff;
    -webkit-transition: fill .25s ease-in-out;
    -moz-transition: fill .25s ease-in-out;
    transition: fill .25s ease-in-out;
}

.person-item.active .container svg > *,
.person-item:hover .container svg > * {
    fill: #000;
}

.person-name {
    color: #fff;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
    text-shadow: black 0px 0px 1.25rem;
}

.person-item.active .person-name,
.person-item:hover .person-name {
    color: #000;
    text-shadow: none;
}

.person-items .detail-summary .svg-icon {
    width: 3.75rem;
    height: auto;
}
  
.person-items .detail-summary {
    font-weight: 900;
}

.detail h2.detail-person-name {
    color: #f36f21;
}

.detail h5.detail-contact-role {
  font-size: 1.25rem;
  font-weight: 900;
}

.detail .detail-contact-email {
  text-decoration: underline;
  font-size: 0.875rem;
  color: #fff;
}

.detail .detail-contact-mobile {
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;;
}

.detail .detail-person-summary * {
    font-weight: normal;
}

.detail-contact {
  margin-top: 2rem;
}

.detail-contact svg {
  fill: #fff;
  max-width: 1.875rem;
}

.detail-contact .linkedin {
  font-size: 1rem;
  margin-top: 1rem;
  display: inline-block;
}

/* NEWS PAGE */

.feature-image {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
    padding-top: 6.25rem;
}

.feature-image img {
    max-width: 100%;
    display: block;
}

.display-heading {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
    margin-top: 6.25rem;
}

.display-heading h1 {
    max-width: 900px;
    margin-top: 0;
}

/* CASE STUDY PAGE */

.feature-image {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
    padding-top: 6.25rem;
}

.feature-image img {
    max-width: 100%;
    display: block;
}

.client-name {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
    margin-top: 6.25rem;
}

.client-name h3 {
    max-width: 900px;
    margin-top: 0;
}

.content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.875rem;
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}

.client-name ~ .content-container {
    margin-top: 3.125rem;
}

.content-container > div {
    flex-basis: calc(50% - 0.9376rem);
    flex-grow: 0;
    align-self: start;
}

@media (max-width: 475px) {
    .content-container > div {
        flex-basis: 100%;
    }
}

.content-container .display-heading {
    padding: 0;
    margin-top: 0;
}

.content-container .display-heading h1 {
    margin-top: 0;
}

.content-container .services {
    margin-top: 3.125rem;
}

.content-container .service {
    font-size: 0.875rem;
    margin-top: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1.68px;
}

.content-container .secondary-image {
    max-width: 100%;
    margin-top: 3.125rem;
}

.content-container .streamfields {
    padding: 0;
}

.content-container .right .streamfields {
    margin-top: -1.5rem;
}

/* WORK INDEX PAGE */

.workindexpage .streamfields {
    margin-top: 6.25rem;
}

.featured-content-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    width: 100%;
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 6.25rem auto;
}

.featured-content-item {
    display: block;
    flex-basis: calc(33.3333333% - 1.25rem);
}

.featured-content-item:nth-child(-n+2) {
    flex-basis: calc(50% - 0.9376rem);
}

@media (max-width: 700px) {
    .featured-content-item:nth-child(-n+2),
    .featured-content-item {
        flex-basis: 100%;
    }
}

.featured-content-item .image-container {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.featured-content-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent linear-gradient(0deg, rgba(0,0,0,0.35) 0%, #54545400 100%) 0% 0% no-repeat padding-box;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.featured-content-item:hover .before {
    background: #f36f21;
}

.featured-content-item-title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    color: #fff;
    z-index: 1;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

.featured-content-item:hover .featured-content-item-title {
    color: #000;
}

/* CONTACT PAGE */

.contactpage main .branches {
    padding: 6.25rem 1.875rem;
    max-width: 1280px;
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    margin: 0 auto;
}

.contactpage .branches .branch {
    flex-basis: calc(50% - 0.9376rem);
    flex-shrink: 1;
}

.contactpage .branches .branch-name {
    margin-top: 0;
}

.contactpage .branches .branch-email {
    margin-top: 1.5rem;
    display: inline-block;
    font-weight: 900;
    color: #000;
    font-size: 1.25rem;
}

.contactpage .branches address > a {
    font-weight: 900;
    color: #000;
    font-size: 1.25rem;
    text-decoration: none;
    font-style: normal;
    margin-top: 1.5rem;
    display: inline-block;
}

.contactpage .branches p:first-child {
    margin-top: 0;
}

.contactpage .branches .responsive-object {
    margin-top: 3.125rem;
}

/* SECTOR INDEX PAGE */

/* SECTOR PAGE */

/* SECTORS */

.sectors-grid {
    max-width: 1280px;
    margin: 0 auto;
    padding: 6.25rem 1.875rem;
}

.sectors-grid > h2 {
    margin-top: 0;
    margin-bottom: 3.125rem;
}

.sector-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.875rem;
}

.sector-item {
    display: block;
    flex-basis: calc(50% - 0.9376rem);
    cursor: pointer;
}

@media (max-width: 700px) {
    .sector-item {
        flex-basis: 100%;
    }
}
  
.sector-item .sector-name {
    text-transform: uppercase;
    text-align: center;
    margin-top: 0;
    padding: 1rem;
    letter-spacing: 1.68px;
}

.sector-item .container {
    padding-bottom: 23.737373%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
  }
  
.sector-item .aspect-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent linear-gradient(0deg,rgba(0,0,0,0.35) 0%,#54545400 100%) 0% 0% no-repeat padding-box;
}
  
.sector-item .inner-container {
    z-index: 1;
}
  
.sector-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

.sector-item:hover .before {
    opacity: 1;
}

.clients {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 6.25rem 1.875rem;
}

.clients-heading {
    margin-top: 0;
    margin-bottom: 3.125rem;
}

.clients-carousel {
    max-width: 1280px;
    display: flex;
    align-items: center;
    gap: 1.5625rem;
    margin-left: auto;
    margin-right: auto;
}

.clients-carousel-container {
    max-width: calc(100% - 9.125rem);
}

.clients-carousel-container .slick-track {
    display: flex;
}

.clients-carousel-container .slick-track .slick-slide {
    display: flex;
    height: auto;
    align-items: center;
    justify-content: center;
}

.clients-carousel-item .image {
    display: block;
    width: 100%;
    padding: 1.5rem;
}

.clients-carousel-item img {
    margin: 0 auto;
    width: 100%;
    height: auto;
}

/* TRUST BAROMETER */

.previous-years {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 3.125rem auto;
    display: flex;
    gap: 1.875rem;
}

.previous-years h4 {
    margin-top: 2.5rem;
    flex-shrink: 0;
}

.previous-years .buttons-block {
    gap: 0.9375rem;
}

/* STREAMFIELDS */

.streamfields {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
}

.streamfields > *:not(.image-grid-block, .page-grid-block) {
    max-width: 900px;
}

.streamfields > .image-block.large {
    max-width: 1280px;
}

.streamfields > .image-block.small {
    max-width: 600px;
}

.page-grid-block {
    margin-top: 6.25rem;
}

.image-block {
    margin-top: 2rem;
}

.image-block .attribution {
    font-style: italic;
    font-size: 0.875rem;
}

.text-block {
    margin-top: 1.5rem;
}

.text-block > *:first-child {
    margin-top: 0;
}

.embed {
    margin-top: 1.5rem;
}

.table {
    overflow: scroll;
    display: flex;
}

table {
    border-collapse: collapse;
}

table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.table-cell-content {
    max-width: 30em;
    min-width: 12.5rem;
}

.image-items {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
}

@media (max-width: 700px) {
    .image-items {
        gap: 3.125rem;
    }
}

.image-item {
    flex-grow: 0;
    flex-basis: calc(16.66666% - 1.5625rem);
}

@media (max-width: 700px) {
    .image-item {
        flex-grow: 0;
        flex-basis: calc(50% - 0.9376rem);
    }
}

.image-item-image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    padding-top: 100%;
}

@media (max-width: 700px) {
    .image-item-image {
        padding-top: unset;
        height: 6.25rem;
    }
}
  
.image-item-image a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.summary-page-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    width: 100%;
    max-width: 1280px;
    margin: 1.5em auto;
}

.summary-page-item {
    display: block;
    flex-basis: calc(33.3333333% - 1.25rem);
}

@media (max-width: 700px) {
    .summary-page-item {
        flex-basis: 100%;
    }
}

.summary-page-item .image-container {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.summary-page-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent linear-gradient(0deg, rgba(0,0,0,0.35) 0%, #54545400 100%) 0% 0% no-repeat padding-box;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.summary-page-item:hover .before {
    background: #f36f21;
}

.summary-page-item-title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    color: #fff;
    z-index: 1;
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

.summary-page-item:hover .summary-page-item-title {
    color: #000;
}

.casestudypage h3.summary-page-item-title {
    font-size: 1rem;
}

@media (max-width: 1000px) {
    .casestudypage h3.summary-page-item-title {
        font-size: 0.75rem;
    }
}

@media (max-width: 700px) {
    .casestudypage h3.summary-page-item-title {
        font-size: 2rem;
    }
}

@media (max-width: 475px) {
    .casestudypage h3.summary-page-item-title {
        font-size: 1rem;
    }
}

.summary-page-item:hover summary-page-item-title {
    color: #000;
}

/* BUTTONS */

.buttons-block {
    display: flex;
    flex-wrap: wrap;
    gap: 1.875rem;
    margin-top: 2.5rem;
}

.button {
    display: flex;
    align-items: end;
}

.button a {
    border: 2px solid rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    margin: 0;
    font-size: 0.875rem;
    font-family: "sofia-pro",sans-serif;
    font-weight: 900;
    letter-spacing: 1.68px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    padding: 10px 40px 12px 40px;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    display: inline-block;
    outline: none;
    position: relative;
    cursor: pointer;
    min-width: 135px;
    text-transform: uppercase;
}

.button.light a {
    border: 2px solid #f36f21;
    background-color: #f36f21;
    color: rgb(0,0,0);
}

.button a:hover {
    border: 2px solid #f36f21;
    background-color: #f36f21;
    color: rgb(255, 255, 255);
}

.button.light a:hover {
    border: 2px solid rgb(0, 0, 0);
    background-color: rgb(0, 0, 0);
}

.button.dark a:hover {
    border: 2px solid #fff;
    background-color: #fff;
    color: #000;
}

/* LATEST AND RELATED WORK */

.latest-work,
.related-work {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 6.25rem auto;
}

.banner > .latest-work {
    padding: 6.25rem 1.875rem;
    margin: 0 auto;
}

.latest-work .top-row,
.related-work .top-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.875rem;
}

.latest-work-heading,
.related-work-heading {
    margin-top: 0;
}

.latest-work-items,
.related-work-items {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 1.875rem;
    margin-top: 3.125rem;
}

.latest-work-item,
.related-work-item {
    display: block;
    flex-basis: calc(33.3333333% - 1.25rem);
}

@media (max-width: 1000px) {
    .latest-work-item,
    .related-work-item {
        flex-basis: calc(50% - 0.9376rem);
    }
}

@media (max-width: 700px) {
    .latest-work-item,
    .related-work-item {
        flex-basis: 100%;
    }
}

.latest-work-item .image-container,
.related-work-item .image-container {
    padding-top: 100%;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.latest-work-item .before,
.related-work-item .before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent linear-gradient(0deg, rgba(0,0,0,0.35) 0%, #54545400 100%) 0% 0% no-repeat padding-box;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}

.latest-work-item:hover .before,
.related-work-item:hover .before {
    background: #000;
}

.latest-work-item-title,
.related-work-item-title {
    position: absolute;
    bottom: 0;
    padding: 1rem;
    color: #fff;
    z-index: 1;
}

/* GET IN TOUCH BANNER */

.get-in-touch-banner {
    padding: 6.25rem 0;
    background-size: cover;
    background-position: center center;
}

.get-in-touch-banner-small {
    display: none;
}

.get-in-touch-banner-large {
    display: block;
}

@media (max-width: 600px) {
    .get-in-touch-banner-small {
        display: block;
    }
    
    .get-in-touch-banner-large {
        display: none;
    }
}

.get-in-touch-banner .banner-content {
    max-width: 1280px;
    padding: 0 1.875rem;
    margin: 0 auto;
}

.get-in-touch-banner h2 {
    color: #fff;
}

.get-in-touch-banner .button {
    margin-top: 3rem;
}

/* SLICK SLIDER */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
  
.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}
  
.slick-list:focus {
    outline: none;
}
  
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,.slick-slider .slick-list {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
  
.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
}
  
.slick-track:before,.slick-track:after {
    content: "";
    display: table;
}
  
.slick-track:after {
    clear: both;
}
  
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}
  
[dir="rtl"] .slick-slide {
    float: right;
}
  
.slick-slide img {
    display: block;
}
  
.slick-slide.slick-loading img {
    display: none;
}
  
.slick-slide.dragging img {
    pointer-events: none;
}
  
.slick-initialized .slick-slide {
    display: block;
}
  
.slick-loading .slick-slide {
    visibility: hidden;
}
  
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
  
.slick-loading .slick-list {
    background: #fff;
}

.slick-slider, .slick-list, .slick-track {
    height: 100%;
}

.nav-left,
.nav-right {
    border: 2px solid #000;
    padding: 1rem 0.9rem;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
}

.nav-left:hover,
.nav-right:hover {
    cursor: pointer;
    border: 2px solid #f36f21;
    background-color: #f36f21;
}

.nav-left {
    transform: rotate(90deg);
}

.nav-right {
    transform: rotate(-90deg);
}