﻿#section-brand-story-immerse-ourselves {
  --bu: calc((10/1600) * 100vw);
  --text_max: clamp(39px, calc(var(--bu) * 10.6), 106px);
  --page_peak: clamp(89px, calc(var(--bu) * 10.6), 156px);
  min-height: calc(100vh - var(--page_peak));
  display: flex;
}
@media (max-width:  767px ), (min-width:  768px ) and (max-width:  991px ) {
  #section-brand-story-immerse-ourselves {
    min-height: max-content;
  }
}
.sp-50 {
  --bu: calc((10/1600) * 100vw);
  --text_max: clamp(40px, calc(var(--bu) * 10.6), 106px);
  --text_min: clamp(16px, calc(var(--bu) * 3), 30px);
  --text_big: clamp(20px, calc(var(--bu) * 4), 40px);
  --text_bigger: clamp(27px, calc(var(--bu) * 5), 50px);
  --vbar_width: clamp(5px, calc(var(--bu) * 1.3), 13px);
  --left-pad: clamp(20px, calc(var(--bu) * 8), 80px);
  text-align: left;
  text-transform: uppercase;
  font-family: brandon-grotesque, sans-serif;
}
.sp-50.sp-video > * {
  padding-left: 0;
}
.sp-50 .bottom-section {
  flex-grow: 1;
}
.sp-50.who-we-are {
  min-height: auto;
  /*height: 67vh;*/
  margin-top: calc(33vh - var(--page_peak));
  /*padding-top: 80px;*/
  /*margin-right: 20px;*/
  --anim_toggle: 1;
  --a_1: 500ms;
  --a_2: 1125ms;
  --a_3: 1125ms;
  /*> * {
            padding-left: var(--left-pad);
        }*/
}
@media (max-width:  767px ), (min-width:  768px ) and (max-width:  991px ) {
  .sp-50.who-we-are {
    margin-top: 4rem;
  }
}
.sp-50.who-we-are .top-section {
  padding-left: var(--left-pad);
  margin-left: 0;
  margin-right: 0;
  /*margin-top: clamp(60px, calc(var(--bu) * 8), 80px);*/
  margin-bottom: clamp(55px, calc(var(--bu) * 8), 80px);
}
.sp-50.who-we-are .top-section > div {
  transition: transform 750ms, opacity 750ms;
  transform: translate3d(0, calc(var(--text_bigger) * var(--anim_toggle)), 0);
  opacity: calc(1 - var(--anim_toggle));
}
.sp-50.who-we-are .top-section :first-child {
  transition-delay: var(--a_1);
}
.sp-50.who-we-are .top-section :last-child {
  transition-delay: var(--a_2);
}
.sp-50.who-we-are .bottom-section {
  /*margin-right: 20px;*/
  transition: transform 750ms;
  transition-delay: var(--a_3);
  transition-timing-function: ease;
  transform: translate3d(0, calc(100% * var(--anim_toggle)), 0);
}
.sp-50.who-we-are .bottom-section span:first-child {
  z-index: 1;
  background-color: white;
}
.sp-50.who-we-are .bottom-section span:last-child {
  transition: transform 500ms;
  transform: translate3d(0, calc(-100% * var(--anim_toggle)), 0);
  transition-delay: calc(var(--a_3) + 2000ms);
}
.sp-50.who-we-are .bottom-section > div {
  transition: inherit;
}
.sp-50.who-we-are .bottom-section > :last-child {
  padding-bottom: var(--text_big);
  transform: translate3d(calc(-120% * var(--anim_toggle)), 0, 0);
  transition-duration: 1s;
  transition-delay: calc(var(--a_3) + 750ms);
  transition-timing-function: ease-out;
}
.sp-50.immersively-different {
  padding-bottom: var(--text_max);
  background-color: var(--blue);
  color: white;
  /*[class^="vbar_"] {
            box-sizing: content-box;
            border-left-width: var(--left-pad);
            border-left-style: solid;
            z-index: 1;
        }*/
}
.sp-50.immersively-different > :first-child {
  background-color: var(--teal);
  z-index: 1;
}
.sp-50.immersively-different > :first-child div:last-of-type {
  padding: var(--text_max) 0;
}
.sp-50.immersively-different .main-content {
  --top-pad: clamp(60px, calc(var(--bu) * 16), 160px);
  padding-top: var(--top-pad);
  margin-right: 40px;
}
.sp-50.immersively-different .main-content .sp-50_subhead {
  font-size: var(--text_bigger);
}
.sp-50.immersively-different .main-content .sp-50_copy {
  margin-top: var(--text_big);
  max-width: 57ch;
  line-height: 1.3;
}
.sp-50.immersively-different .main-content > :last-child {
  margin-top: auto;
  line-height: 1;
  padding-top: var(--text_max);
}
.sp-50 .sp-50_head {
  font-size: var(--text_max);
  font-weight: 900;
  line-height: 1;
}
.sp-50 .sp-50_subhead {
  font-size: var(--text_big);
  line-height: 1.1;
}
.sp-50 .sp-50_copy {
  font-size: var(--text_min);
  line-height: 1.1;
  text-transform: none;
}
.sp-50 .mt_1rem {
  margin-top: 1rem;
}
.sp-50 .mr_200px {
  margin-right: 200px;
}
.sp-50 [class^="vbar_"] {
  width: var(--text_big);
  position: relative;
  flex-shrink: 0;
  box-sizing: content-box;
  border-left-width: var(--left-pad);
  border-left-style: solid;
  z-index: 1;
}
.sp-50 [class^="vbar_"]:before {
  content: "";
  position: absolute;
  left: 0;
  width: var(--vbar_width);
  height: 100%;
}
.sp-50 [class^="vbar_"][class$="orange"] {
  border-left-color: white;
}
.sp-50 [class^="vbar_"][class$="orange"]:before {
  background-color: var(--orange);
}
.sp-50 [class^="vbar_"][class$="white"] {
  border-left-color: var(--teal);
}
.sp-50 [class^="vbar_"][class$="white"]:before {
  background-color: white;
}
.sp-50 [class^="vbar_"][class$="teal"] {
  border-left-color: var(--blue);
}
.sp-50 [class^="vbar_"][class$="teal"]:before {
  background-color: var(--teal);
}
.full-screen-panel.cancel-full-page {
  min-height: auto;
}
.flex {
  display: flex;
}
.flex.v-center {
  height: 100%;
  align-items: center;
}
.flex.h-center {
  height: 100%;
  justify-content: center;
}
.flex.center {
  align-items: center;
  justify-content: center;
}
.flex.cols {
  flex-direction: column;
}
.flex.cols.v-center {
  justify-content: center;
}
.flex.cols.h-center {
  align-items: center;
}
.knockout {
  -webkit-text-stroke: 1px white;
  -webkit-text-fill-color: transparent;
}
.sp-50 {
  --sans: brandon-grotesque, sans-serif;
  --serif: mrs-eaves-xl-serif-narrow, serif;
  --orange: #F26527;
  --teal: #00848A;
  --blue: #003343;
  --d_center-m_left: center;
  --d_63vw-m_unset: 63vw;
  min-height: inherit;
}
@media (max-width: 500px) {
  .sp-50 {
    --d_center-m_left: left;
    --d_63vw-m_unset: unset;
  }
}
.sp-50.immersively-different-container .background > div {
  background-color: var(--blue);
}
.sp-50.immersively-different-container .background > div:first-child {
  background-color: var(--blue);
  flex-grow: 1;
}
.sp-50.immersively-different-container .background > div:last-child {
  flex-basis: var(--d_63vw-m_unset);
}
.sp-50.immersively-different-container .background > div:last-child > div:first-child {
  flex-basis: 42%;
  background-color: var(--orange);
}
.sp-50.immersively-different-container .background > div:last-child > div:last-child {
  flex-basis: 58%;
  background-color: var(--teal);
}
.sp-50.immersively-different-container .text-container {
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-50.immersively-different-container .text-container .headline {
  --target-font-size: calc(100vw / (1900 / 90));
  font-size: clamp(25px, var(--target-font-size), 90px);
}
.sp-50.immersively-different-container .text-container > div:first-child {
  flex-basis: 37vw;
}
.sp-50.immersively-different-container .text-container > div:last-child {
  flex-grow: 1;
}
.sp-50.identity-container > div {
  position: relative;
  width: 100%;
}
.sp-50.identity-container > div > * {
  padding: 0 5vw;
}
.sp-50.identity-container > :first-child {
  --top-section-height: clamp(65px, 10vw, 160px);
  min-height: max(337px, 40%);
}
.sp-50.identity-container > :first-child .top-section {
  height: 160px;
  height: var(--top-section-height);
  background-color: var(--blue);
  color: white;
  font-family: var(--serif), serif;
  font-weight: bold;
  /*max-width: 1920px;*/
  flex-wrap: wrap;
  align-content: center;
  justify-content: var(--d_center-m_left);
}
.sp-50.identity-container > :first-child .top-section div {
  --target-font-size: calc(100vw / (1600 / 55));
  font-size: clamp(20px, var(--target-font-size), 55px);
  line-height: 1;
  width: fit-content;
  min-width: fit-content;
}
.sp-50.identity-container > :first-child .bottom-section {
  --v-pad: clamp(15px, 3vw, 55px);
  height: calc(100% - var(--top-section-height));
  position: relative;
}
.sp-50.identity-container > :first-child .bottom-section .background {
  z-index: 0;
  flex-wrap: wrap;
}
.sp-50.identity-container > :first-child .bottom-section .background div {
  flex-grow: 1;
}
.sp-50.identity-container > :first-child .bottom-section .background .orange-bg {
  background-color: var(--orange);
  width: 57%;
  min-width: 362px;
}
.sp-50.identity-container > :first-child .bottom-section .background .teal-bg {
  background-color: var(--teal);
  width: 43%;
}
.sp-50.identity-container > :first-child .bottom-section .bottom-section-container {
  position: relative;
  z-index: 1;
  max-width: 1920px;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
}
.sp-50.identity-container > :first-child .bottom-section .bottom-section-container > div {
  font-family: var(--sans);
  text-transform: uppercase;
  text-align: left;
  min-width: 275px;
}
.sp-50.identity-container > :first-child .bottom-section .bottom-left-copy {
  --fs-max: 60;
  --target-font-size: calc(100vw / (1800 / 60));
  font-size: clamp(25px, var(--target-font-size), 60px);
  line-height: 1.1;
  color: #033343;
  width: 47.5%;
  padding: var(--v-pad) 0;
}
.sp-50.identity-container > :first-child .bottom-section .bottom-right-copy {
  --target-font-size: calc(100vw / (1800 / 85));
  flex-basis: auto;
  font-size: clamp(35px, var(--target-font-size), 85px);
  line-height: 1;
  color: white;
  padding: var(--v-pad) 0;
  min-width: 362px;
}
.sp-50.identity-container > :last-child {
  flex-grow: 1;
  min-height: 400px;
}
.sp-50.identity-container > :last-child > div.flex {
  justify-content: space-evenly;
}
.sp-50.identity-container > :last-child .headline {
  --target-font-size: calc(100vw / (1600 / 65));
  font-size: clamp(25px, var(--target-font-size), 65px);
  line-height: 1;
  max-width: 24ch;
  text-align: var(--d_center-m_left);
}
.sp-50.identity-container > :last-child .copy {
  max-width: 125ch;
  text-align: var(--d_center-m_left);
}
.sp-50.identity-container > :last-child .copy p {
  margin: 0;
}
.sp-50 .absolute-parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.sp-50 .headline {
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: bold;
}
.sp-50 .orange {
  color: var(--orange);
}
.sp-50 .blue {
  color: var(--blue);
}
.sp-50 .teal {
  color: var(--teal);
}
.sp-50 .copy {
  font-family: var(--serif);
}
.sp-50.sp-video {
  /*position: absolute;
        top: -50px;
        bottom: 50px;
        left: 0;
        right: 0;*/
  --target-mt-size: calc(84vw / (1600 / 60));
  --target-mb-size: calc(84vw / (1600 / 80));
  margin-top: clamp(13px, var(--target-mt-size), 60px);
  margin-bottom: clamp(38px, var(--target-mb-size), 80px);
}
.sp-50.sp-video .headline h2 {
  /*--target-font-size: calc(100vw / (1600 / 40));
            font-size: clamp(15px, var(--target-font-size), 40px);*/
  font-size: var(--text_big);
  line-height: 1;
  padding: 10px 50px;
  text-align: center;
  margin: 0 !important;
}
.sp-50.sp-video .video-container {
  width: calc(100% - 60px);
  max-width: 1400px;
  position: relative;
  --side-margins: 1rem;
  margin-left: var(--side-margins);
  margin-right: var(--side-margins);
}
.sp-50.sp-video .video-container iframe {
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #D9D9D9;
}
.sp-50.sp-video .video-container:after {
  content: '';
  width: 100%;
  height: 0;
  margin-top: 56.25%;
  display: block;
}