@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700&family=Barlow:ital,wght@0,400;0,500;0,700;1,700&family=Reenie+Beanie&display=swap"); /* ==========================================================================
   Ovation Audiovisual — Design tokens
   Source: Figma "Ovation-UI-Design-DEV" › page "UI Design"
   ========================================================================== */
/*Fonts*/
/*Font weights*/
/*Colors*/
/*Testimonial gradient*/
/*Framework aliases (the grid partial expects these accent names)*/
/*Layout metrics from the 1512px design frame*/
/*Transitions*/
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
:root {
  --bs-gutter-x: 15px;
  --bs-gutter-y: 30px;
}

.container,
.container-fluid {
  width: 100%;
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 991px) {
  .container-fluid {
    max-width: 720px;
  }
}
@media (max-width: 767px) {
  .container-fluid {
    max-width: 540px;
  }
}
@media (max-width: 575px) {
  .container-fluid {
    max-width: 100%;
  }
}

/* Design frame is 1512px wide with a 1280px content box (116px side margins) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1310px;
  }
}

@media (min-width: 1360px) {
  .container-xl {
    max-width: 1420px;
  }
}

.small-container {
  width: 100%;
  max-width: 85%;
  margin-inline: auto;
}
@media (max-width: 991px) {
  .small-container {
    max-width: 100%;
  }
}

.row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-1 * var(--bs-gutter-x));
  margin-left: calc(-1 * var(--bs-gutter-x));
}

.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: var(--bs-gutter-x);
  padding-left: var(--bs-gutter-x);
  margin-top: var(--bs-gutter-y);
}

@media (min-width: 992px) {
  .gap {
    --bs-gutter-x: 30px;
  }
  .small-gap {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 20px;
  }
}
@media (max-width: 991px) {
  .small-gap {
    --bs-gutter-y: 10px;
  }
}
@media (min-width: 992px) {
  .order-1 {
    order: 1;
  }
}
@media (max-width: 1199px) {
  .order-2 {
    order: 2;
  }
}
.g-0 {
  --bs-gutter-x: 0;
}

.g-5 {
  --bs-gutter-x: 1.8rem;
}

.col {
  -webkit-box-flex: 0;
  -ms-flex: 1 0 0%;
  flex: 1 0 0%;
}

.row-cols-auto > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
}

.row-cols-1 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
}

.row-cols-2 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 50%;
}

.row-cols-3 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 33.3333333333%;
}

.row-cols-4 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 25%;
}

.row-cols-5 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 20%;
}

.row-cols-6 > * {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 16.6666666667%;
}

.col-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: 100%;
}

/*Max Style*/
@media (max-width: 575px) {
  .col-xs {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-xs-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xs-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xs-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xs-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xs-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xs-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xs-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xs-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-xs-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xs-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xs-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xs-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xs-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xs-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xs-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xs-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xs-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xs-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xs-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xs-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
/*Min Style*/
@media (min-width: 576px) {
  .col-sm {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xl-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
@media (min-width: 1500px) {
  .col-xxl {
    -webkit-box-flex: 0;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-xxl-4 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-xxl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
  }
}
/* ==========================================================================
   Base elements, type scale and shared UI atoms
   ========================================================================== */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
}

/*Keep the viewport as the scroll container — giving <body> a height plus
  overflow-x promotes overflow-y to auto and creates a second scroller*/
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  position: relative;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  font-family: "Barlow", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  color: #000000;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.scroll {
  overflow: hidden;
}
@media (max-width: 991px) {
  body {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 17px;
    line-height: 27px;
  }
}
@media (max-width: 575px) {
  body {
    line-height: 1.35;
  }
}

/*The 24px graph-paper tile sits over the whole page at 5% — Figma page bkgd*/
body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("../images/bkgd-grid.png");
  background-repeat: repeat;
  background-size: 24px 24px;
  background-position: top left;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

main,
header,
section,
footer {
  position: relative;
  width: 100%;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Headings — Big Shoulders Display Bold, uppercase throughout
   -------------------------------------------------------------------------- */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 20px;
}
@media (max-width: 767px) {
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    -webkit-text-stroke: 0.5px black !important;
  }
}

/*Billboard headline — 100px / 100px*/
h1,
.h1 {
  font-size: 100px;
  line-height: 100px;
  -webkit-text-stroke: 1.5px black;
}
@media (max-width: 1399px) {
  h1,
  .h1 {
    font-size: 84px;
    line-height: 84px;
  }
}
@media (max-width: 1199px) {
  h1,
  .h1 {
    font-size: 70px;
    line-height: 70px;
  }
}
@media (max-width: 991px) {
  h1,
  .h1 {
    font-size: 58px;
    line-height: 58px;
  }
}
@media (max-width: 767px) {
  h1,
  .h1 {
    font-size: 46px;
    line-height: 46px;
  }
}
@media (max-width: 575px) {
  h1,
  .h1 {
    font-size: 38px;
    line-height: 40px;
  }
}

/*Section headline — 80px / 80px*/
h2,
.h2 {
  font-size: 80px;
  line-height: 80px;
  -webkit-text-stroke: 1.5px black;
}
@media (max-width: 1399px) {
  h2,
  .h2 {
    font-size: 68px;
    line-height: 68px;
  }
}
@media (max-width: 1199px) {
  h2,
  .h2 {
    font-size: 58px;
    line-height: 58px;
  }
}
@media (max-width: 991px) {
  h2,
  .h2 {
    font-size: 48px;
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  h2,
  .h2 {
    font-size: 38px;
    line-height: 40px;
  }
}

/*Sub-section headline — 60px / 60px*/
h3,
.h3 {
  font-size: 60px;
  line-height: 60px;
  -webkit-text-stroke: 1.5px black;
}
@media (max-width: 1199px) {
  h3,
  .h3 {
    font-size: 50px;
    line-height: 50px;
  }
}
@media (max-width: 991px) {
  h3,
  .h3 {
    font-size: 42px;
    line-height: 44px;
  }
}
@media (max-width: 767px) {
  h3,
  .h3 {
    font-size: 34px;
    line-height: 36px;
  }
}

/*Intro headline — 40px / 34px*/
h4,
.h4 {
  font-size: 40px;
  line-height: 40px;
  -webkit-text-stroke: 1.5px black;
}
@media (max-width: 991px) {
  h4,
  .h4 {
    font-size: 34px;
    line-height: 36px;
  }
}
@media (max-width: 767px) {
  h4,
  .h4 {
    font-size: 28px;
    line-height: 30px;
  }
}

/*Block / card title — 30px / 35px*/
h5,
.h5 {
  font-size: 30px;
  line-height: 35px;
}
@media (max-width: 767px) {
  h5,
  .h5 {
    font-size: 25px;
    line-height: 30px;
  }
}

h6,
.h6 {
  font-size: 24px;
  line-height: 30px;
}
@media (max-width: 767px) {
  h6,
  .h6 {
    font-size: 20px;
    line-height: 26px;
  }
}

/*CTA headline sits a step above the section scale*/
.h2--cta {
  font-size: 90px;
  line-height: 80px;
}
@media (max-width: 1399px) {
  .h2--cta {
    font-size: 74px;
    line-height: 68px;
  }
}
@media (max-width: 1199px) {
  .h2--cta {
    font-size: 62px;
    line-height: 58px;
  }
}
@media (max-width: 991px) {
  .h2--cta {
    font-size: 50px;
    line-height: 50px;
  }
}
@media (max-width: 767px) {
  .h2--cta {
    font-size: 40px;
    line-height: 42px;
  }
}

/* --------------------------------------------------------------------------
   Outlined display text — Figma renders these spans as white fill with a
   hairline dark stroke, e.g. "RIGHT-SIZED SOLUTIONS", "CHOOSE", "Action"
   -------------------------------------------------------------------------- */
.outline, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  /*Only the FILL is cleared — `color` stays put so `currentColor` still
    resolves for the stroke (setting `color: transparent` erases both)*/
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px currentColor;
}
@media (max-width: 767px) {
  .outline, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    -webkit-text-stroke-width: 1px;
  }
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: normal;
}

h1 .outline,
.h1 .outline {
  -webkit-text-stroke-width: 2px;
}

p {
  margin: 0 0 20px;
}
p:last-child {
  margin-bottom: 0;
}
p strong,
p b {
  font-weight: 700;
}
p em,
p i {
  font-style: italic;
}

a {
  display: inline-block;
  text-decoration: none;
  outline: none !important;
  color: inherit;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

button {
  background: none;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  font-family: "Barlow", sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

svg {
  display: block;
}

figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  padding-left: 20px;
  margin: 0;
}

.no-bullets ul,
.no-bullets ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */
.full-width {
  width: 100%;
}

.relative {
  position: relative;
}

.z-index {
  position: relative;
  z-index: 2;
}

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

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

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

.d-none {
  display: none !important;
}

.d-flex {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*Flex alignment utilities*/
.align-item-start {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.align-item-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.align-item-end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.justify-start {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.flex-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
}

/* --------------------------------------------------------------------------
   Section rhythm — sections sit 100px apart in the design
   -------------------------------------------------------------------------- */
.commonPY {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 1199px) {
  .commonPY {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .commonPY {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .commonPY {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.commonPT {
  padding-top: 100px;
}
@media (max-width: 1199px) {
  .commonPT {
    padding-top: 80px;
  }
}
@media (max-width: 991px) {
  .commonPT {
    padding-top: 60px;
  }
}
@media (max-width: 767px) {
  .commonPT {
    padding-top: 50px;
  }
}

.commonPB {
  padding-bottom: 100px;
}
@media (max-width: 1199px) {
  .commonPB {
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .commonPB {
    padding-bottom: 60px;
  }
}
@media (max-width: 767px) {
  .commonPB {
    padding-bottom: 50px;
  }
}

.commonMT {
  margin-top: 100px;
}
@media (max-width: 1199px) {
  .commonMT {
    margin-top: 80px;
  }
}
@media (max-width: 991px) {
  .commonMT {
    margin-top: 60px;
  }
}
@media (max-width: 767px) {
  .commonMT {
    margin-top: 50px;
  }
}

/* --------------------------------------------------------------------------
   Eyebrow — 16px Barlow Bold, 3.2px tracking, orange
   -------------------------------------------------------------------------- */
.eyebrow {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: #f9850a;
  margin: 0 0 12px;
}
@media (max-width: 767px) {
  .eyebrow {
    font-size: 13px;
    letter-spacing: 2.4px;
  }
}

/*Label — 15px, 3px tracking (project card location, testimonial attribution)*/
.label {
  display: block;
  font-family: "Barlow", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}
@media (max-width: 767px) {
  .label {
    font-size: 13px;
    letter-spacing: 2px;
  }
}

/*Lead paragraph — 24px / 34px*/
.lead {
  font-size: 24px;
  line-height: 34px;
  font-weight: 400;
}
@media (max-width: 1199px) {
  .lead {
    font-size: 21px;
    line-height: 31px;
  }
}
@media (max-width: 767px) {
  .lead {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 575px) {
  .lead {
    line-height: 1.3;
  }
}

/*Small copy — 18px / 25px (slideshow captions)*/
.small-copy {
  font-size: 18px;
  line-height: 25px;
}
@media (max-width: 767px) {
  .small-copy {
    font-size: 16px;
    line-height: 24px;
  }
}

/*Handwritten annotation — Reenie Beanie 30px*/
.script {
  font-family: "Reenie Beanie", cursive;
  font-size: 30px;
  line-height: 34px;
}
@media (max-width: 767px) {
  .script {
    font-size: 24px;
    line-height: 28px;
  }
}

.text-white,
.text-white * {
  color: #ffffff;
  -webkit-text-stroke: 0 !important;
}

/* --------------------------------------------------------------------------
   Bttn / Rounded — 50px pill, 16px Barlow Medium uppercase
   -------------------------------------------------------------------------- */
.bttn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 36px;
  border: 1px solid transparent;
  border-radius: 500px;
  background-color: #068c7f;
  font-family: "Barlow", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /*CTA variant*/
  /*Header variant — outlined on the dark billboard*/
}
.bttn:hover {
  background-color: #f9850a;
  border-color: #f9850a;
}
.bttn--red {
  background-color: #a2112e;
}
.bttn--outline {
  background-color: transparent;
  border-color: #ffffff;
  border-radius: 300px;
}
.bttn--outline:hover {
  background-color: #ffffff;
  color: #002e3b;
  border-color: #ffffff;
}
@media (max-width: 767px) {
  .bttn {
    min-height: 46px;
    padding: 0 26px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Carousel arrows — 40px "east" glyphs used by slideshows
   -------------------------------------------------------------------------- */
.arrowNav {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0px;
  /*Both slider pairs on Specialties are drawn in the CTA red*/
}
.arrowNav__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 50px;
  height: 40px;
  color: #000000;
}
.arrowNav__btn svg {
  width: 100%;
  height: 100%;
}
.arrowNav__btn:hover {
  color: #068c7f;
}
.arrowNav__btn--prev svg {
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.arrowNav__btn[disabled] {
  opacity: 0.3;
  cursor: default;
}
.arrowNav--red .arrowNav__btn {
  color: #a2112e;
}
.arrowNav--red .arrowNav__btn:hover {
  color: #a2112e;
}
.arrowNav--red .arrowNav__btn[disabled]:hover {
  color: #a2112e;
}

/* --------------------------------------------------------------------------
   Parallax reveal
   -------------------------------------------------------------------------- */
.parallax {
  opacity: 0;
  transform: translateY(30px);
  -webkit-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.parallax.show {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}

/* Section Spacing */
.commonPY {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (max-width: 1199px) {
  .commonPY {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .commonPY {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (max-width: 767px) {
  .commonPY {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.commonPT {
  padding-top: 100px;
}
@media (max-width: 1199px) {
  .commonPT {
    padding-top: 80px;
  }
}
@media (max-width: 991px) {
  .commonPT {
    padding-top: 64px;
  }
}
@media (max-width: 767px) {
  .commonPT {
    padding-top: 48px;
  }
}

.commonPB {
  padding-bottom: 100px;
}
@media (max-width: 1199px) {
  .commonPB {
    padding-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .commonPB {
    padding-bottom: 64px;
  }
}
@media (max-width: 767px) {
  .commonPB {
    padding-bottom: 48px;
  }
}

/* ==========================================================================
   Header — Figma: "Header"
   Sits over the Billboard, so it is transparent with white type.
   ========================================================================== */
.header {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 50;
  padding-left: 30px;
  padding-right: 30px;
  /*Nav + contact button travel together at the right edge*/
  /*Sticky variant applied on scroll*/
}
@media (max-width: 767px) {
  .header {
    top: 0;
    padding: 8px 15px;
  }
}
.header__inner {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 30px;
  min-height: 60px;
}
.header__logo {
  display: block;
  width: 200px;
  flex: 0 0 200px;
}
.header__logo img,
.header__logo svg {
  width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .header__logo {
    width: 150px;
    flex-basis: 150px;
  }
}
.header__actions {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 30px;
}
.header__toggle {
  display: none;
  display: none;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #ffffff;
}
@media (max-width: 991px) {
  .header__toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.header__toggle svg.icon {
  width: 30px;
  height: auto;
}
.header.is-stuck {
  position: fixed;
  top: 0;
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #002e3b;
  -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
@media (max-width: 767px) {
  .header.is-stuck {
    padding-block: 0;
  }
}

/* --------------------------------------------------------------------------
   Main Nav — 18px Barlow Medium uppercase
   -------------------------------------------------------------------------- */
.mainNav {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainNav .dropdown {
  position: relative;
}
.mainNav .dropdown:hover > a {
  color: #f9850a;
}
.mainNav .dropdown:hover svg {
  fill: #f9850a;
  rotate: 180deg;
}
.mainNav .dropdown:hover .dropdownMenu {
  visibility: visible;
  opacity: 1;
}
.mainNav .dropdownMenu {
  position: absolute;
  top: 125%;
  left: -24px;
  width: max-content;
  max-width: 300px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  list-style: none;
  color: #000000;
  visibility: hidden;
  opacity: 0;
  padding: 10px 15px;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mainNav .dropdownMenu a {
  display: block;
  padding: 5px 0;
  font-size: 16px;
  line-height: 22px;
  border-radius: 5px;
  padding: 8px 10px;
  color: #000000;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mainNav .dropdownMenu a:hover {
  background-color: #ececec;
  color: #f9850a;
}
.mainNav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mainNav__link svg {
  fill: #ffffff;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 991px) {
  .mainNav {
    display: none;
  }
}

@media (max-width: 991px) {
  .header__actions .bttn {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------------------- */
.mobileNav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  background-color: #002e3b;
  padding: 90px 24px 40px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mobileNav.is-open {
  opacity: 1;
  visibility: visible;
}
.mobileNav__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  color: #ffffff;
}
.mobileNav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.mobileNav .dropdown {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mobileNav .dropdownMenu {
  display: none;
  list-style: none;
  padding: 10px 15px;
  margin-bottom: 20px;
  background-color: #ffffff;
  color: #000000;
  border-radius: 10px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mobileNav .dropdownMenu a {
  display: block;
  padding: 5px 0;
  font-size: 18px;
  line-height: 22px;
  border-radius: 5px;
  padding: 8px 10px;
  color: #000000;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mobileNav .dropdownMenu a:hover {
  background-color: #ececec;
  color: #f9850a;
}
.mobileNav .dropdown.is-open .dropdownMenu {
  display: block;
}
.mobileNav .mobileNav__link svg {
  transition: transform 0.2s ease;
}
.mobileNav .dropdown.is-open .mobileNav__link svg {
  transform: rotate(180deg);
}
.mobileNav .dropdown.is-open span {
  color: #f9850a;
}
.mobileNav .dropdown.is-open svg {
  fill: #f9850a;
}
.mobileNav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 34px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}
.mobileNav__link svg {
  fill: #ffffff;
  width: 15px;
  height: auto;
}
@media (min-width: 992px) {
  .mobileNav {
    display: none;
  }
}

/* ==========================================================================
   Footer — Figma: "Footer" (1512 × 130, white plate)
   ========================================================================== */
.footer {
  background-color: #ffffff;
  color: #000000;
  height: 130px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  /*Nav — 16px Barlow Medium uppercase, 32px apart*/
  /*Legal — 12px Barlow Regular uppercase*/
  /*Stack the row once it can no longer sit on one line*/
}
.footer__inner {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  width: 100%;
}
@media (max-width: 575px) {
  .footer__inner {
    gap: 14px;
  }
}
.footer__logo img,
.footer__logo svg {
  width: 100%;
  height: auto;
}
@media (min-width: 1127px) {
  .footer__logo {
    width: 177px;
    flex-basis: 177px;
  }
}
.footer__nav {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0 0 0 83px;
}
@media (max-width: 1199px) {
  .footer__nav {
    margin-left: 40px;
    gap: 24px;
  }
}
.footer__link {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
}
.footer__link:hover {
  color: #068c7f;
}
.footer__legal {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 46px;
  margin-left: 128px;
}
@media (max-width: 1199px) {
  .footer__legal {
    margin-left: 40px;
    gap: 24px;
  }
}
.footer__legalItem {
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
.footer__legalItem a:hover {
  color: #068c7f;
}
.footer__social {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.footer__socialLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 20px;
  height: 20px;
  color: #a2112e;
}
.footer__socialLink svg {
  width: 100%;
  height: 100%;
}
.footer__socialLink:hover svg {
  top: -4px;
}
.footer__socialLink svg {
  position: relative;
  top: 0;
  transition: ease 0.3s;
}
@media (max-width: 1199px) {
  .footer {
    height: auto;
    padding: 40px 0;
  }
}
@media (max-width: 991px) {
  .footer__inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .footer__nav, .footer__legal {
    margin-left: 0;
  }
  .footer__social {
    margin-left: 0;
  }
}

/* ==========================================================================
   Home page sections — Figma: "Home"
   Section names follow the Figma layer names so CMS templates map 1:1.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Billboard — Figma: "Billboard" (1512 × 995)
   -------------------------------------------------------------------------- */
.billboard {
  position: relative;
  min-height: 100dvh;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  overflow: hidden;
  /*
   * ============================================================
   * Billboard Slides
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Image
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Content
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Row
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Main
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Aside
   * ============================================================
   */
  /*
   * Big Shoulders carries almost no side bearing, so the design
   * nudges the headline 7px left of the container to optically align it
   */
  /*
   * ============================================================
   * Billboard Intro
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Action
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Slider Dots
   * ============================================================
   */
  /*
   * ============================================================
   * Billboard Slide Animation
   * ============================================================
   */
  /*
   * ============================================================
   * Desktop / Large Screens
   * ============================================================
   */
  /*
   * ============================================================
   * Tablet
   * ============================================================
   */
  /*
   * ============================================================
   * Mobile
   * ============================================================
   */
}
.billboard__slides {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.billboard__slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /*
   * Only the active slide is visible.
   */
  /*
   * Keep image and content full-size inside each slide.
   */
}
.billboard__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.billboard__slide .billboard__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.billboard__slide .billboard__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.billboard__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #002e3b;
}
.billboard__img img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -o-object-fit: cover;
  object-fit: cover;
}
.billboard__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 114px;
}
.billboard__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  gap: 130px;
}
@media (max-width: 1399px) {
  .billboard__row {
    gap: 60px;
  }
}
@media (max-width: 1199px) {
  .billboard__row {
    gap: 20px;
  }
}
@media (max-width: 575px) {
  .billboard__row {
    gap: 10px;
  }
}
.billboard__main {
  width: 657px;
  flex: 0 0 657px;
}
@media (max-width: 1399px) {
  .billboard__main {
    width: 560px;
    flex-basis: 560px;
  }
}
@media (max-width: 1199px) {
  .billboard__main {
    width: 100%;
    flex-basis: 100%;
  }
}
.billboard__aside {
  width: 453px;
  flex: 0 0 453px;
}
@media (max-width: 1199px) {
  .billboard__aside {
    width: 100%;
    flex-basis: 100%;
  }
}
.billboard__title {
  margin: 0 0 0 -7px;
}
@media (max-width: 767px) {
  .billboard__title {
    margin-left: 0;
  }
}
.billboard__intro {
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}
.billboard__action {
  margin-top: 54px;
}
@media (max-width: 575px) {
  .billboard__action {
    margin-top: 20px;
  }
}
.billboard__dots {
  position: absolute;
  top: 50%;
  right: 63px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  gap: 14px;
  z-index: 5;
  /*
   * ========================================================
   * Tablet
   * ========================================================
   */
  /*
   * ========================================================
   * Mobile
   * ========================================================
   */
}
.billboard__dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.billboard__dots span.is-active {
  background-color: #ffffff;
}
.billboard__dots span:hover {
  background-color: #ffffff;
}
@media (max-width: 1199px) {
  .billboard__dots {
    display: flex;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
  }
}
@media (max-width: 767px) {
  .billboard__dots {
    top: 50%;
    right: 20px;
    gap: 12px;
  }
  .billboard__dots span {
    width: 7px;
    height: 7px;
  }
}
@media (max-width: 767px) and (max-width: 575px) {
  .billboard__dots span {
    padding: 4px;
  }
}
.billboard.is-sliding .billboard__content {
  animation: billboardSlideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.billboard.is-sliding .billboard__img img {
  animation: billboardImageSlideUp 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 1399px) {
  .billboard {
    min-height: 860px;
  }
}
@media (max-width: 1199px) {
  .billboard {
    min-height: 760px;
  }
  .billboard__content {
    padding-bottom: 80px;
  }
}
@media (max-width: 767px) {
  .billboard {
    min-height: 600px;
  }
  .billboard__content {
    padding-bottom: 56px;
  }
}

/*
 * ============================================================
 * Billboard Slide Animations
 * ============================================================
 */
@keyframes billboardSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes billboardImageSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 0.5;
    transform: translateY(0);
  }
}
/*
 * ============================================================
 * Eyebrow + Intro Spacing Inside Billboard Aside
 * ============================================================
 */
.billboard__aside .eyebrow {
  margin-bottom: 17px;
}
@media (max-width: 575px) {
  .billboard__aside .eyebrow {
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   Intro — centred headline + lead, Figma: "Intro"
   -------------------------------------------------------------------------- */
.intro {
  position: relative;
  padding: 150px 0;
  text-align: center;
  /*Hand-drawn speaker hanging into the top-right corner.
    Figma "Speaker" (3288:884) sits at x1349 y995, 87.22 x 134.83, and the
    section itself starts at y995 — so it hangs level with the section top and
    overshoots the 1280 content box by 40px on the right.*/
  /*Specialties leads with a standalone paragraph on a tighter rhythm*/
}
.intro__speaker {
  position: absolute;
  top: 0;
  /*The section is full-bleed, so the offset is measured from the centre line
    out: half the content box (640) plus the 40px overhang = 680*/
  right: max(15px, 50% - 680px);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1399px) {
  .intro__speaker {
    right: max(15px, 50% - 595px);
  }
}
@media (max-width: 1199px) {
  .intro__speaker {
    right: calc(50% - 505px);
  }
}
@media (max-width: 991px) {
  .intro__speaker {
    right: calc(50% - 375px);
  }
}
@media (max-width: 767px) {
  .intro__speaker {
    display: none;
  }
}
.intro__title {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto 30px;
}
.intro__text {
  width: 1020px;
  max-width: 100%;
  margin: 0 auto;
}
.intro--tight {
  padding: 100px 0px 20px;
}
@media (max-width: 1199px) {
  .intro {
    padding: 60px 0;
  }
}
@media (max-width: 767px) {
  .intro {
    padding: 30px 0;
  }
}

/* --------------------------------------------------------------------------
   Resolution — image left, copy right, Figma: "Resolution"
   -------------------------------------------------------------------------- */
.resolution {
  position: relative;
  /*"0db / +-12db / 2db" annotation with its curved arrow.
    Figma group "Figure 4" (3288:877) is at x49 y1462, 107.12 x 148.74; the
    Resolution section starts at y1587 and the content box at x116 — so the
    group sits 125px above the section and 67px outside the box on the left.*/
}
.resolution__levels {
  position: absolute;
  top: -125px;
  /*Measured from the centre line: half the content box (640) plus the 67px
    the annotation sits outside it on the left*/
  left: max(15px, 50% - 707px);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 1399px) {
  .resolution__levels {
    left: max(15px, 50% - 622px);
  }
}
@media (max-width: 1199px) {
  .resolution__levels {
    top: -75px;
    left: max(-15px, 50% - 707px);
  }
}
@media (max-width: 1199px) {
  .resolution__levels {
    display: none;
  }
}
.resolution__levels-thunder {
  position: absolute;
  bottom: 0;
  right: 125px;
}
.resolution__levels-arrow {
  position: absolute;
  bottom: -40px;
  right: -40px;
}
@media (max-width: 599px) {
  .resolution__levels-arrow {
    right: -10px;
    bottom: -60px;
  }
}
.resolution__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  gap: 70px;
}
@media (max-width: 1199px) {
  .resolution__row {
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 40px;
  }
}
.resolution__media {
  position: relative;
  width: 500px;
  flex: 0 0 500px;
  height: 650px;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.resolution__media .resolution__levels-console {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 10px;
}
@media (max-width: 1199px) {
  .resolution__media {
    width: 400px;
    flex-basis: 400px;
    height: 540px;
  }
}
@media (max-width: 991px) {
  .resolution__media {
    width: 100%;
    flex-basis: 100%;
    height: 420px;
  }
}
.resolution__body {
  min-width: 0;
  padding-top: 55px;
}
@media (max-width: 991px) {
  .resolution__body {
    padding-top: 0;
  }
}
.resolution__title {
  margin: 0 0 35px;
}
.resolution__text {
  margin: 0 0 20px;
}
.resolution__text ul {
  list-style: disc;
  padding-left: 22px;
  margin: 0 0 20px;
}
.resolution__text ul li {
  margin-bottom: 5px;
}
.resolution__text ul li:last-child {
  margin-bottom: 0;
}
.resolution__action {
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Client Testimony — full-bleed gradient plate, Figma: "Client Testimony"
   -------------------------------------------------------------------------- */
.testimony {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: 100px;
  min-height: 800px;
  overflow: hidden;
  padding-block: 100px;
  color: #ffffff;
  /*Oversized opening quote in the left margin, set level with the first line
    of the pull-quote. Figma (3288:836) puts the 250px/80px text box at y2693
    while __inner starts at y2617 (section top 2337 + 280 padding) — 76px, not
    the 356px this was carrying, which pushed it down past the attribution.*/
}
.testimony__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(242.12deg, #19aa9c 0%, #196f71 100%);
}
.testimony__img img {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  -o-object-fit: cover;
  object-fit: cover;
}
.testimony__inner {
  position: relative;
  z-index: 2;
}
.testimony__mark {
  position: absolute;
  top: 76px;
  left: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 250px;
  font-weight: 700;
  line-height: 80px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 991px) {
  .testimony__mark {
    display: none;
  }
}
.testimony__quote {
  width: 1020px;
  max-width: 100%;
  margin: 0 0 39px 130px;
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
}
@media (max-width: 1199px) {
  .testimony__quote {
    font-size: 32px;
    line-height: 36px;
    margin-left: 80px;
  }
}
@media (max-width: 991px) {
  .testimony__quote {
    font-size: 26px;
    line-height: 32px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .testimony__quote {
    font-size: 22px;
    line-height: 28px;
  }
}
.testimony__cite {
  margin-left: 130px;
  font-style: normal;
  font-weight: 500;
}
@media (max-width: 1199px) {
  .testimony__cite {
    margin-left: 80px;
  }
}
@media (max-width: 991px) {
  .testimony__cite {
    margin-left: 0;
  }
}
@media (max-width: 1199px) {
  .testimony {
    margin-top: 80px;
    padding-top: 180px;
    min-height: 0;
    padding-bottom: 120px;
  }
}
@media (max-width: 767px) {
  .testimony {
    margin-top: 50px;
    padding-top: 90px;
    padding-bottom: 70px;
  }
}

/* --------------------------------------------------------------------------
   Who We Serve — heading + client logo row, Figma: "Who We Serve"
   -------------------------------------------------------------------------- */
.whoWeServe {
  padding-top: 100px;
  /*Hand-drawn underline. Figma "lines-14" (3288:831) spans x99-262 y3326-3361;
    the heading box is x116 y3237 with an 80px line — so the swoosh starts 17px
    left of the content box and clears the heading by 9px.*/
}
.whoWeServe__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 65px;
}
.whoWeServe__title {
  position: relative;
  margin: 0;
  flex: 0 0 auto;
}
.whoWeServe__swoosh {
  position: absolute;
  top: 89px;
  left: -17px;
  width: 163px;
  height: 35px;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .whoWeServe__swoosh {
    left: 0;
  }
}
@media (max-width: 991px) {
  .whoWeServe__swoosh {
    top: 54px;
    width: 122px;
    height: 26px;
  }
}
@media (max-width: 767px) {
  .whoWeServe__swoosh {
    top: 44px;
    width: 100px;
    height: 21px;
  }
}
.whoWeServe__text {
  width: 760px;
  flex: 0 1 760px;
  margin: 0;
  padding-top: 6px;
}
@media (max-width: 1199px) {
  .whoWeServe__text {
    flex-basis: 100%;
  }
}
@media (max-width: 767px) {
  .whoWeServe__text {
    text-align: left;
  }
}
@media (max-width: 1199px) {
  .whoWeServe {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .whoWeServe {
    padding-top: 50px;
  }
  .whoWeServe__row {
    margin-bottom: 30px;
  }
}
.whoWeServe .partners__row {
  margin-top: 50px;
  gap: 150px !important;
}
@media (max-width: 575px) {
  .whoWeServe .partners__row {
    margin-top: 0 !important;
    gap: 50px !important;
  }
}
.whoWeServe img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: auto;
}
@media (max-width: 575px) {
  .whoWeServe img {
    max-height: 40px !important;
  }
}

/* --------------------------------------------------------------------------
   Video — 1280 × 721 plate with a centred play control, Figma: "Video"
   -------------------------------------------------------------------------- */
.videoBlock {
  margin-top: 100px;
}
.videoBlock__plate {
  position: relative;
  width: 100%;
  height: 721px;
  border-radius: 5px;
  background-color: #000000;
  overflow: hidden;
  cursor: pointer;
}
.videoBlock__plate img {
  width: 100%;
  height: 100%;
  opacity: 0.3;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1199px) {
  .videoBlock__plate {
    height: 520px;
  }
}
@media (max-width: 767px) {
  .videoBlock__plate {
    height: 320px;
  }
}
.videoBlock__play {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  color: #ffffff;
  z-index: 2;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.videoBlock__play svg {
  width: 26px;
  height: 26px;
  margin-left: 5px;
}
@media (max-width: 767px) {
  .videoBlock__play {
    width: 64px;
    height: 64px;
  }
  .videoBlock__play svg {
    width: 20px;
    height: 20px;
  }
}
.videoBlock__plate:hover img {
  opacity: 0.45;
}
.videoBlock__plate:hover .videoBlock__play, .videoBlock__plate:hover .videoBlock__play {
  background-color: #068c7f;
  border-color: #068c7f;
}
@media (max-width: 1199px) {
  .videoBlock {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .videoBlock {
    margin-top: 50px;
  }
}

/* --------------------------------------------------------------------------
   Projects — 4-up project cards, Figma: "Projects" › "Card / Project"
   -------------------------------------------------------------------------- */
.projects {
  margin-top: 60px;
  /*On Specialties the block carries its own headline and follows the Why
    Clients Choose columns — Figma puts that headline at y6569.8, 115px down*/
}
.projects--titled {
  margin-top: 100px;
}
.projects__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 27px;
}
.projects__title {
  margin: 0 0 49px -3px;
}
@media (max-width: 1199px) {
  .projects {
    margin-top: 50px;
  }
}

.projectCard {
  /*flex-grow fills the row exactly — a fixed 25% basis can round past the
    container by a fraction of a pixel and drop the fourth card to a new line*/
  flex: 1 1 calc(25% - 27px);
  min-width: 0;
  color: #000000;
}
.projectCard__img {
  display: block;
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 16px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.projectCard__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.projectCard__title {
  font-size: 30px;
  line-height: 35px;
  margin: 0 0 4px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.projectCard__location {
  color: #000000;
}
.projectCard:hover .projectCard__img img {
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}
.projectCard:hover .projectCard__title {
  color: #068c7f;
  -webkit-text-stroke: 0.5px #068c7f !important;
}
@media (max-width: 991px) {
  .projectCard {
    flex: 1 1 calc(50% - 14px);
  }
}
@media (max-width: 575px) {
  .projectCard {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   CTA — dark plate, headline left / copy + button right, Figma: "CTA"
   -------------------------------------------------------------------------- */
/*Figma "CTA" (3288:808) measured off the 1512 frame:
    plate      y4881 -> y5435           = 554 tall
    copy       y5105, x636, w760        = 224 from the plate top
    headline   y5116, x116, 90/80       = 11px lower than the copy (cap-aligned)
    button     y5246, x636, 265 x 50    = 39px under the copy
  so the row is a fixed 520 / 760 split of the 1280 box, not a gap-driven one —
  the headline's own width was deciding where the copy started.*/
.cta {
  position: relative;
  margin-top: 100px;
  padding: 224px 0 139px;
  overflow: hidden;
  color: #ffffff;
  /*Nudged down 11px so the 90px headline's cap height lines up with the first
    line of the 24/34 copy rather than with its box top*/
  /*Centred variant used on the interior pages*/
}
.cta__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #002e3b;
}
.cta__bg img {
  width: 100%;
  height: 100%;
  opacity: 0.1;
  -o-object-fit: cover;
  object-fit: cover;
}
.cta__inner {
  position: relative;
  z-index: 2;
}
.cta__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0;
}
.cta__title {
  width: 520px;
  flex: 0 0 520px;
  margin: 11px 0 0;
  padding-right: 40px;
}
@media (max-width: 1199px) {
  .cta__title {
    width: 100%;
    flex-basis: 100%;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 24px;
  }
}
.cta__body {
  width: 760px;
  flex: 0 0 760px;
  max-width: 100%;
}
@media (max-width: 1199px) {
  .cta__body {
    width: 100%;
    flex-basis: 100%;
  }
}
.cta__text {
  margin: 0 0 39px;
}
.cta--center {
  text-align: center;
  padding: 119px 0 101px;
}
.cta--center .cta__row {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  flex-flow: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0;
}
.cta--center .cta__title {
  width: 1020px;
  max-width: 100%;
  flex: 0 0 auto;
  margin: 0 0 20px;
  padding-right: 0;
}
.cta--center .cta__body {
  width: 1020px;
  max-width: 100%;
  flex: 0 0 auto;
}
.cta--center .cta__text {
  margin: 0 0 40px;
}
@media (max-width: 1199px) {
  .cta {
    margin-top: 80px;
    padding: 120px 0 100px;
  }
}
@media (max-width: 767px) {
  .cta {
    margin-top: 50px;
    padding: 70px 0 60px;
  }
  .cta__text {
    margin-bottom: 32px;
  }
}

/*Specialties butts the CTA plate straight onto the closing testimonial —
  Figma runs that testimony 8820-9620 and opens the CTA at 9620. The Project
  page keeps the usual 100px gap, so this is opt-in rather than adjacency.*/
.cta--tight {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Section / Logo Carousel — Figma: "Section / Logo Carousel"
   -------------------------------------------------------------------------- */
.partners {
  background-color: #ececec;
  padding: 120px 0;
  text-align: center;
}
@media (max-width: 575px) {
  .partners {
    padding: 50px 0;
  }
}
.partners__title {
  margin-bottom: 80px;
}
@media (max-width: 575px) {
  .partners__title {
    margin-bottom: 30px;
  }
}
.partners__text {
  max-width: 1000px;
  margin: 0 auto 43px;
}
.partners .marquee-container {
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.partners .marquee-container .marquee-track {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  will-change: transform;
}
.partners .marquee-container .marquee-track .marquee-slide {
  position: relative;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0;
  padding: 0 35px;
}
@media (max-width: 767px) {
  .partners .marquee-container .marquee-track .marquee-slide {
    padding: 0 30px;
  }
}
@media (max-width: 575px) {
  .partners .marquee-container .marquee-track .marquee-slide {
    padding: 0 25px;
  }
}
@media (max-width: 479px) {
  .partners .marquee-container .marquee-track .marquee-slide {
    padding: 0 20px;
  }
}
.partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item {
  width: 200px;
  display: inline-block;
}
@media (max-width: 1199px) {
  .partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item {
    width: 170px;
  }
}
@media (max-width: 991px) {
  .partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item {
    width: 140px;
  }
}
.partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item img {
  max-height: 130px;
}
@media (max-width: 1199px) {
  .partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item img {
    max-height: 110px;
  }
}
@media (max-width: 991px) {
  .partners .marquee-container .marquee-track .marquee-slide .marquee-slide-item img {
    max-height: 90px;
  }
}

/* ==========================================================================
   Reusable modules — Figma: "Project" and "Specialties"
   ========================================================================== */
/* --------------------------------------------------------------------------
   Interior Page Billboard — centred hero
   -------------------------------------------------------------------------- */
.pageBillboard {
  position: relative;
  min-height: 100dvh;
  padding-top: 376px;
  overflow: hidden;
  text-align: center;
  color: #ffffff;
  /*
   * Slider layer
   * This sits behind the content but does not change
   * the original billboard dimensions.
   */
  /*
   * Each slide fills the billboard.
   *
   * IMPORTANT:
   * Because this is absolute, we need to reproduce the
   * original 376px top padding here so the content does
   * not move to the top of the screen.
   */
  /*
   * Keep the content above the background image.
   */
}
.pageBillboard__slides {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.pageBillboard__slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pageBillboard__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.pageBillboard__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #002e3b;
}
.pageBillboard__img img {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  -o-object-fit: cover;
  object-fit: cover;
}
.pageBillboard__slide .container {
  position: relative;
  z-index: 2;
}
.pageBillboard__slide .pageBillboard__inner {
  position: relative;
  z-index: 2;
}

/* ========================================================
   Page Billboard Photo Slider
   ======================================================== */
.pageBillboard--photo.is-sliding .pageBillboard__inner {
  animation: pageBillboardPhotoSlideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.pageBillboard--photo.is-sliding .pageBillboard__img img {
  animation: pageBillboardPhotoImageSlideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ========================================================
   Content: Bottom → Top
   ======================================================== */
@keyframes pageBillboardPhotoSlideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* ========================================================
   Image: Bottom → Top
   ======================================================== */
@keyframes pageBillboardPhotoImageSlideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
/* ========================================================
   Page Billboard Slider Animation
   ======================================================== */
.pageBillboard--stacked.is-sliding .pageBillboard__inner {
  animation: pageBillboardSlideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.pageBillboard--stacked.is-sliding .pageBillboard__img img {
  animation: pageBillboardImageSlideUp 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* --------------------------------------------------------
   Content: Bottom → Top
   -------------------------------------------------------- */
@keyframes pageBillboardSlideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
/* --------------------------------------------------------
   Image: Bottom → Top
   -------------------------------------------------------- */
@keyframes pageBillboardImageSlideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
/* --------------------------------------------------------------------------
   Stats — four figures under a centred headline, Figma: "Stats"
   -------------------------------------------------------------------------- */
.stats {
  padding-top: 100px;
  text-align: center;
  /*Hand-drawn rule under the headline. Figma (3288:421) puts it at x304 y1285
    at 903 x 23.7 — centred in the 1280 box, 30px under the headline and 42px
    above the numbers. Drawn in black, not the eyebrow orange.*/
}
.stats__title {
  width: 1280px;
  max-width: 100%;
  margin: 0 auto 30px;
}
.stats__lines {
  display: block;
  width: 903px;
  max-width: 90%;
  height: auto;
  margin: 0 auto 42px;
}
@media (max-width: 767px) {
  .stats__lines {
    margin-bottom: 30px;
  }
}
.stats__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 30px;
}
@media (max-width: 1199px) {
  .stats {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .stats {
    padding-top: 50px;
  }
}

.stat {
  width: 237px;
  flex: 0 1 237px;
}
.stat__number {
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 80px;
  line-height: 80px;
  font-weight: 700;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 6px;
  -webkit-text-stroke: 1.5px black;
}
@media (max-width: 991px) {
  .stat__number {
    font-size: 60px;
    line-height: 62px;
  }
}
@media (max-width: 767px) {
  .stat__number {
    font-size: 48px;
    line-height: 50px;
  }
}
.stat__label {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}
@media (max-width: 767px) {
  .stat__label {
    font-size: 17px;
    line-height: 26px;
  }
}
@media (max-width: 767px) {
  .stat {
    flex: 0 1 calc(50% - 15px);
  }
}

/* --------------------------------------------------------------------------
   Split intro — headline left, copy right (Project Vision / Where Smart Meets Heart)
   -------------------------------------------------------------------------- */
.splitIntro {
  padding-top: 104px;
  /*Figma (5201:661 / 3288:583) sets both headlines in a 497px column at x119,
    three pixels outside the content box — Big Shoulders carries almost no side
    bearing, so the design nudges them left to optically align*/
  /*Hooked arrow under "VISION". Figma (3288:418) boxes it at x267 y2476.3 at
    41 x 51.2, against a headline box at x119 y2389.7 — the -28.8deg rotation
    is already baked into the supplied export, so none is applied here.*/
  /*Speaker hanging off "HEART". Figma (5201:662) boxes it at x370.56 y3370,
    62 x 159 — but that box squashes the drawing, so the height is honoured and
    the width follows the artwork's own 88:135 ratio.*/
  /*"(Oh, and we like it loud)." — Figma draws the arrow and the handwriting as
    one group (5204:179) at x641 y3432, 14px under the paragraph */
  /*Figma (3288:415) sets this 40px sub-headline on a 34px leading at y2398,
    8px under the headline box, with the body copy 35px below it*/
  /*Content Columns pairs an 80px headline with 24/34 copy. Figma's boxes sit
    29px apart, but that renders the copy well below the headline's cap line —
    the supplied reference has the two optically aligned, 13px of ink apart, so
    the offset is 10px. Where Smart Meets Heart takes no offset at all.*/
}
.splitIntro__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px;
}
.splitIntro__title {
  position: relative;
  width: 497px;
  flex: 0 0 497px;
  margin: 0 0 0 3px;
}
@media (max-width: 1199px) {
  .splitIntro__title {
    width: 400px;
    flex-basis: 400px;
  }
}
@media (max-width: 991px) {
  .splitIntro__title {
    width: 100%;
    flex-basis: 100%;
    margin-left: 0;
  }
}
.splitIntro__arrow {
  position: absolute;
  bottom: -40px;
  left: 148px;
  pointer-events: none;
}
@media (max-width: 1399px) {
  .splitIntro__arrow {
    top: 50px;
    left: 0;
  }
}
@media (max-width: 991px) {
  .splitIntro__arrow {
    position: static;
    display: block;
    margin: 8px 0 0;
  }
}
.splitIntro__speaker {
  position: absolute;
  bottom: -141px;
  left: 252px;
  pointer-events: none;
}
@media (max-width: 1399px) {
  .splitIntro__speaker {
    display: none;
  }
}
.splitIntro__body {
  width: 760px;
  flex: 0 1 760px;
  /*Figma separates the two paragraphs with a blank line rather than the
    20px the base rule gives every <p> (body box y3214.8 -> y3417.9)*/
}
@media (max-width: 1199px) {
  .splitIntro__body {
    flex-basis: 100%;
  }
}
.splitIntro__body p {
  margin-bottom: 34px;
}
.splitIntro__body p:last-of-type {
  margin-bottom: 0;
}
.splitIntro__note {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 9px 0 0 5px;
}
@media (max-width: 767px) {
  .splitIntro__note {
    margin-left: 0;
  }
}
.splitIntro__lead {
  line-height: 34px;
  margin: 6px 0 35px;
  text-transform: none;
}
@media (max-width: 991px) {
  .splitIntro__lead {
    line-height: 36px;
    margin-top: 0;
  }
}
.splitIntro__row--offset {
  margin-bottom: 65px;
}
.splitIntro__row--offset .splitIntro__body {
  padding-top: 10px;
}
@media (max-width: 1199px) {
  .splitIntro__row--offset .splitIntro__body {
    padding-top: 0;
  }
}
@media (max-width: 1199px) {
  .splitIntro {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .splitIntro {
    padding-top: 50px;
  }
}

/* --------------------------------------------------------------------------
   3 Column Section — image + title + copy, Figma: "3 Column Section"
   Also used for "Value Sliders" on Specialties
   -------------------------------------------------------------------------- */
.columnSection {
  padding-top: 100px;
  /*Headline left, arrows right, both on one line. Figma (5201:700 / 5201:701)
    puts the 60px title at y3595 and the 40px glyphs at y3605 — centred against
    each other, with the last arrow ending flush at the content edge (x1394).*/
  /*Project opens its card row 100px under an 80px headline (Figma: headline
    y2737, images y2917); the Specialties columns sit 50px under a 60px one*/
  /*The slider variant drops the flex row — the track owns the layout.
    Figma lands this headline at y3595, 132px under the handwritten note.*/
}
.columnSection__title {
  margin: 0 0 50px 3px;
}
.columnSection__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 85px;
}
@media (max-width: 1199px) {
  .columnSection__row {
    gap: 40px;
  }
}
.columnSection__head {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 50px;
}
.columnSection__head .columnSection__title {
  margin: 0;
}
@media (max-width: 575px) {
  .columnSection__head .arrowNav {
    order: 2;
  }
}
.columnSection--cards .columnSection__title {
  margin-bottom: 100px;
}
@media (max-width: 991px) {
  .columnSection--cards .columnSection__title {
    margin-bottom: 30px;
  }
}
.columnSection--slider {
  padding-top: 129px;
}
.columnSection--slider .columnSection__head {
  margin-bottom: 50px;
}
@media (max-width: 575px) {
  .columnSection--slider .columnSection__head {
    margin-bottom: 20px;
  }
}
@media (max-width: 1199px) {
  .columnSection {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .columnSection {
    padding-top: 50px;
  }
}

.columnBlock {
  flex: 1 1 calc(33.333% - 57px);
  min-width: 0;
  /*As a slide the basis is fixed so the track can be translated by whole
    cards — a grow-based basis would just reflow when slides are added*/
}
.columnBlock.slider__slide {
  flex: 0 0 var(--slide-width);
}
.columnBlock__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 30px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.columnBlock__img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.columnBlock__title {
  margin: 0 0 20px;
}
.columnBlock__text {
  margin: 0;
}
@media (max-width: 991px) {
  .columnBlock {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Content Block — 630px square image beside a copy column
   -------------------------------------------------------------------------- */
/*Figma opens each Content Block 103px under the block above (images y3655 /
  y4385 against a Challenges row closing at 3492)*/
.contentBlock {
  padding-top: 103px;
  /*Image on the right*/
}
.contentBlock__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 70px;
}
@media (max-width: 1199px) {
  .contentBlock__row {
    gap: 40px;
  }
}
@media (max-width: 575px) {
  .contentBlock__row {
    gap: 20px;
  }
}
.contentBlock__media {
  width: 630px;
  flex: 0 0 630px;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.contentBlock__media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
@media (max-width: 1199px) {
  .contentBlock__media {
    width: 480px;
    flex-basis: 480px;
  }
}
@media (max-width: 991px) {
  .contentBlock__media {
    width: 100%;
    flex-basis: 100%;
  }
}
.contentBlock__body {
  min-width: 0;
}
@media (min-width: 992px) {
  .contentBlock__body {
    width: 580px;
    flex: 1 1 580px;
  }
}
.contentBlock__title {
  margin: 0 0 30px;
}
@media (max-width: 575px) {
  .contentBlock__title {
    margin: 0 0 10px;
  }
}
.contentBlock--reverse .contentBlock__row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
@media (min-width: 992px) {
  .contentBlock--reverse .contentBlock__body {
    width: 576px;
    flex-basis: 576px;
  }
}
@media (max-width: 991px) {
  .contentBlock--reverse .contentBlock__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
  }
}
@media (max-width: 1199px) {
  .contentBlock {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .contentBlock {
    padding-top: 50px;
  }
}

/* --------------------------------------------------------------------------
   Slideshow — full-width plate, caption and prev/next, Figma: "Slideshow"
   -------------------------------------------------------------------------- */
.slideshow {
  padding-top: 110px;
  /*Figma: eyebrow y4300.2 on a 22px line, plate y4349*/
  /*Figma (5201:708): 1280 x 700 plate at y4349, caption and arrows on one
    line at y5065 — 16px below it*/
}
.slideshow .eyebrow {
  margin-bottom: 27px;
}
.slideshow__plate {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.slideshow__plate img {
  border-radius: 10px;
}
.slideshow__slide {
  height: 100%;
  border-radius: 10px;
}
.slideshow__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.slideshow__foot {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 30px;
}
.slideshow__caption {
  width: 1095px;
  flex: 0 1 1095px;
  margin: 0;
}
@media (max-width: 1199px) {
  .slideshow {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .slideshow {
    padding-top: 50px;
  }
}

/* --------------------------------------------------------------------------
   Linear Blocks — numbered service rows, Figma: "Linear Blocks" › "Row"
   -------------------------------------------------------------------------- */
.linearBlocks {
  padding-top: 100px;
  padding-bottom: 50px;
}
.linearBlocks__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.linearRow {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  min-height: 140px;
  padding: 40px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  color: #000000;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.linearRow:last-child {
  border-bottom: 0px solid rgba(0, 0, 0, 0.15);
}
.linearRow__number {
  width: 60px;
  flex: 0 0 60px;
  font-family: "Big Shoulders Display", sans-serif;
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  color: #f9850a;
  margin: 0;
}
.linearRow__title {
  width: 440px;
  flex: 0 0 440px;
  font-size: 30px;
  line-height: 30px;
  margin: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1199px) {
  .linearRow__title {
    width: 340px;
    flex-basis: 340px;
  }
}
@media (max-width: 991px) {
  .linearRow__title {
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 14px;
  }
}
.linearRow__text {
  min-width: 0;
  margin: 0;
}
.linearRow__inner {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 991px) {
  .linearRow__inner {
    flex-direction: column;
  }
}
.linearRow:hover .linearRow__title {
  color: #068c7f;
}
@media (max-width: 991px) {
  .linearRow {
    padding-top: 30px;
    min-height: 0;
    padding-bottom: 30px;
  }
  .linearRow__number {
    flex-basis: 45px;
    width: 45px;
  }
}

/* --------------------------------------------------------------------------
   Content Columns — asterisk highlights, Figma: "Content Columns" › "Highlight"
   -------------------------------------------------------------------------- */
.highlights {
  padding-top: 96px;
  /*Figma stacks the nine Highlights on a 242px pitch (rows y7377 / 7619 /
    7861) and the tallest block runs 210 — so the row gutter is 32, not 40*/
}
.highlights__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 42px 41px;
}
@media (max-width: 1199px) {
  .highlights {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .highlights {
    padding-top: 50px;
  }
  .highlights__row {
    gap: 42px;
  }
}

.highlight {
  position: relative;
  flex: 1 1 calc(33.333% - 28px);
  min-width: 0;
  padding-left: 51px;
  /*The asterisk glyph sits in the left gutter*/
  /*Highlight titles use Barlow Bold, not the display face*/
}
.highlight__mark {
  position: absolute;
  top: 4px;
  left: 0;
  width: 26px;
  height: 26px;
  color: #f9850a;
}
.highlight__mark svg {
  width: 100%;
  height: 100%;
}
.highlight__title {
  font-family: "Barlow", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
  text-transform: none;
  color: #000000;
  margin: 0 0 10px;
}
@media (max-width: 767px) {
  .highlight__title {
    font-size: 24px;
    line-height: 30px;
  }
}
@media (max-width: 575px) {
  .highlight__title {
    font-size: 20px;
    line-height: 1.3;
  }
}
.highlight__text {
  margin: 0;
}
@media (max-width: 991px) {
  .highlight {
    flex: 1 1 calc(50% - 21px);
  }
}
@media (max-width: 575px) {
  .highlight {
    flex: 1 1 100%;
  }
}

/* --------------------------------------------------------------------------
   Decorative flourishes — hand-drawn marks that sit outside the content flow
   -------------------------------------------------------------------------- */
/*The hand-drawn flourishes that used to be stubbed out here (.flourish with
  page-absolute coordinates, and .levels rebuilding the "0db" annotation out of
  Reenie Beanie text) are gone — the real artwork now ships as Speaker.svg,
  DB-graph.svg and lines-14.svg, positioned against their own sections in
  _layout.scss.*/
/* --------------------------------------------------------------------------
   Slider — shared track used by "Value Sliders" and "Our team at work"
   The track is translated by whole slides; `--slide-width` is written by
   custom.js from the measured viewport so the maths survives any breakpoint.
   -------------------------------------------------------------------------- */
.slider {
  position: relative;
  /*Motion is decoration — respect the OS setting*/
}
.slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.slider__track {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: var(--slide-gap, 0px);
  will-change: transform;
  -webkit-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider__slide {
  flex: 0 0 var(--slide-width, 100%);
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  .slider__track {
    transition: none;
  }
}

/*Value slider — three 370px cards, 85px apart (Figma x116 / x571 / x1026)*/
.columnSection--slider .slider {
  --slide-gap: 85px;
}
@media (max-width: 1199px) {
  .columnSection--slider .slider {
    --slide-gap: 40px;
  }
}
@media (max-width: 767px) {
  .columnSection--slider .slider {
    --slide-gap: 24px;
  }
}

/*Slideshow — one plate at a time, so the track has no gutter*/
.slideshow .slider {
  --slide-gap: 0px;
}

/*Project leads into its highlights tighter than Specialties does and leaves a
  wider gap after: Figma puts the eyebrow at y5092.8 under a Content Block
  closing at 5014, and the testimony at y6052 under a caption closing at 5908*/
.slideshow--tight {
  padding-top: 75px;
}
.slideshow--tight + .testimony {
  margin-top: 144px;
}
@media (max-width: 1199px) {
  .slideshow--tight {
    padding-top: 60px;
  }
  .slideshow--tight + .testimony {
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .slideshow--tight {
    padding-top: 50px;
  }
  .slideshow--tight + .testimony {
    margin-top: 50px;
  }
}

.video_wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: 5px;
}
.video_wrapper video,
.video_wrapper iframe {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  aspect-ratio: 16/9;
  display: block;
}

/* ============================================================
   Photo Lightbox
   ============================================================ */
.photoLightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* ---------------------------------------------------------
     Previous / Next arrows
     --------------------------------------------------------- */
  /* ---------------------------------------------------------
     Close button
     --------------------------------------------------------- */
  /* ---------------------------------------------------------
     Mobile
     --------------------------------------------------------- */
}
.photoLightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.photoLightbox__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  max-height: 100%;
  z-index: 1;
}
.photoLightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  object-fit: contain;
}
.photoLightbox__caption {
  width: 100%;
  max-width: 1000px;
  margin: 20px 0 0;
  color: #fff;
  text-align: center;
}
.photoLightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.photoLightbox__arrow svg {
  display: block;
  width: 28px;
  height: 28px;
  fill: currentColor;
}
.photoLightbox__arrow:hover {
  background: rgba(0, 0, 0, 0.75);
}
.photoLightbox__arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
.photoLightbox__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.photoLightbox__arrow--prev {
  left: 25px;
}
.photoLightbox__arrow--prev svg {
  transform: rotate(180deg);
}
.photoLightbox__arrow--next {
  right: 25px;
}
.photoLightbox__close {
  position: absolute;
  top: 20px;
  right: 25px;
  z-index: 11;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.photoLightbox__close:hover {
  opacity: 0.7;
}
.photoLightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
@media (max-width: 767px) {
  .photoLightbox {
    padding: 25px 20px;
  }
  .photoLightbox__image {
    max-height: calc(100vh - 130px);
  }
  .photoLightbox__caption {
    margin-top: 15px;
  }
  .photoLightbox__close {
    top: 10px;
    right: 12px;
  }
  .photoLightbox__arrow {
    width: 45px;
    height: 45px;
    background: rgba(0, 0, 0, 0.55);
  }
  .photoLightbox__arrow svg {
    width: 24px;
    height: 24px;
  }
  .photoLightbox__arrow--prev {
    left: 10px;
  }
  .photoLightbox__arrow--next {
    right: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .photoLightbox {
    transition: none;
  }
}

/* ==========================================================================
   Contact — Figma: "Contact" › "Sidebar" + "Form"
   The form panel is a dark rounded plate; every field is a baseline-ruled
   input whose placeholder is set in the handwritten face.
   ========================================================================== */
/*Figma puts the Contact headline at y8183.4, 92px under the last Highlight row*/
.contact {
  padding-top: 92px;
  /*Figma (5201:786 / 5201:753): details at x116, form plate x633 -> x1393,
    760 wide. 497 + 67 + 760 is 1324 — wider than the 1280 box, which is what
    was dropping the form onto its own line. The split is 517 / 760 with no
    gutter, and the 20px inset keeps the copy off the plate.*/
  /* ---------------------------------------------------------------- sidebar */
  /*Figma draws the mail / call / location glyphs in black, not the brand teal*/
  /* ------------------------------------------------------------------- form */
}
.contact__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 10px;
}
@media (max-width: 1399px) {
  .contact__row {
    gap: 40px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.contact__sidebar {
  width: 517px;
  flex: 0 0 517px;
  padding-right: 20px;
}
@media (max-width: 1199px) {
  .contact__sidebar {
    width: 100%;
    flex-basis: 100%;
    padding-right: 0;
  }
}
.contact__title {
  margin: 0 0 36px;
}
.contact__lead {
  width: 473px;
  max-width: 100%;
  margin: 0 0 35px;
}
.contact__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact__item {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 26px;
  margin-bottom: 34px;
}
@media (max-width: 575px) {
  .contact__item {
    gap: 16px;
    margin-bottom: 20px;
  }
}
.contact__item:last-child {
  margin-bottom: 0;
}
.contact__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 8px;
  color: #000000;
}
@media (max-width: 575px) {
  .contact__icon {
    margin-top: 0;
  }
}
.contact__icon svg {
  width: 100%;
  height: 100%;
}
.contact__text {
  font-size: 24px;
  line-height: 34px;
  margin: 0;
}
.contact__text a:hover {
  color: #068c7f;
}
@media (max-width: 767px) {
  .contact__text {
    font-size: 19px;
    line-height: 29px;
  }
}
@media (max-width: 575px) {
  .contact__text {
    font-size: 17px;
    line-height: 1.3;
  }
}
.contact__form {
  width: 760px;
  flex: 0 0 760px;
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 1199px) {
  .contact__form {
    width: 100%;
    flex-basis: 100%;
  }
}
@media (max-width: 1199px) {
  .contact {
    padding-top: 80px;
  }
}
@media (max-width: 767px) {
  .contact {
    padding-top: 50px;
  }
}

.contactForm {
  background-color: #273131;
  border-radius: 10px;
  /*Figma (5201:753): plate 760 x 537 at y8183 — first label 42px in, submit
    button y8630-8680, plate closing at 8720*/
  padding: 42px 55px 40px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.contactForm__row {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 50px;
}
.contactForm__col {
  flex: 1 1 calc(50% - 25px);
  min-width: 0;
}
@media (max-width: 575px) {
  .contactForm__col {
    flex: 1 1 100%;
  }
}
.contactForm__actions {
  margin-top: 41px;
}
@media (max-width: 767px) {
  .contactForm {
    padding: 30px 24px 36px;
  }
  .contactForm__row {
    gap: 0;
  }
}

/*Baseline-ruled field — label above, hand-written placeholder inside*/
.field {
  display: block;
  margin-bottom: 39px;
  /*Label bottom y8455.8 to the message rule at y8589*/
}
.field__label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #ffffff;
  margin-bottom: 0;
}
.field__input,
.field input.field__input,
.field textarea.field__input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  font-family: "Reenie Beanie", cursive;
  font-size: 30px;
  line-height: 34px;
  color: #ffffff;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.field__input::placeholder,
.field input.field__input::placeholder,
.field textarea.field__input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  opacity: 1;
}
.field__input:focus,
.field input.field__input:focus,
.field textarea.field__input:focus {
  border-bottom-color: #068c7f;
}
.field textarea.field__input {
  height: 133px;
  padding-top: 6px;
  resize: vertical;
}
.field--full {
  width: 100%;
}