*,:after,:before{
  box-sizing:border-box
}

:root{
  font-size:20px
}

body{
  --color-text:#191a1b;
  --color-bg:#c6c6c6;
  --color-link:#ffffff;
  --color-link-hover:#ff4438;
  color:var(--color-text);
  background-color:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  width:100%;
  margin:0;
  font-family:'Acma-Extralight',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  font-variant-ligatures: discretionary-ligatures;
  overflow-x:hidden;
}

a{
  color:var(--color-link);
  outline:none;
  text-decoration:none
}

a:hover{
  color:var(--color-link-hover);
  outline:none
}

a:focus{
  background:#d3d3d3;
  outline:none
}

a:focus:not(:focus-visible){
  background:0 0
}

a:focus-visible{
  background:0 0;
  outline:2px solid #fff
}

.js .loading:before,.js .loading:after{
  content:"";
  z-index:1000;
  position:fixed
}

.js .loading:before{
  width:100%;
  height:100%;
  background:var(--color-bg);
  top:0;
  left:0
}

.js .loading:after{
  width:60px;
  height:60px;
  opacity:.4;
  background:var(--color-link);
  border-radius:50%;
  margin:-30px 0 0 -30px;
  animation:loaderAnim .7s linear infinite alternate forwards;
  top:50%;
  left:50%
}

@keyframes loaderAnim{
  to{
    opacity:1;
    transform:scale(.5)
  }
}

.unbutton{
  font:inherit;
  cursor:pointer;
  background:0 0;
  border:0;
  margin:0;
  padding:0
}

.unbutton:focus{
  outline:none
}

.content{
  position:relative
}

.big-content{
  position: relative;
  top: -28vh;
}

.content--centered{
  min-height:70vh;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  display:flex
}

.content__title{
  font-family:'Acma-Extrabold',scotch-display,serif;
  font-style:normal;
  font-weight:400;
  line-height:.9
}

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

.text-light{
  color:var(--color-bg)
}

.content__title-pre{
  font-family: Acma-Extralight;
  font-size:max(2rem,min(17vw,7rem));
  font-style:normal;
  font-weight:400;
  display:block
}

.content__title-pre-header{
  font-family: Acma-Extrabold;
  font-size:1.5rem;
  font-style:normal;
  font-weight:400;
  display:block;
  font-variant-ligatures: discretionary-ligatures;
  padding-left: 6.5vw;
}

.content__title-pre--offset{
  margin-left:12vw
}

.content__title em{
  font-weight:700
}

.content__title-main{
  margin:0;
  font-size:max(2rem,min(17vw,7rem));
}

.content__title-main-header{
  margin:0;
  font-size:1.5rem;
  font-variant-ligatures: discretionary-ligatures;
}

.content__title-main-header-2{
  font-family: Acma-Extralight;
  font-size:1.5rem;
  font-style:normal;
  font-weight:400;
  display:block;
  font-variant-ligatures: discretionary-ligatures;
  margin-left: 5vw;
}

.content__scroll{
  margin-top:10vh;
  padding-bottom:6rem;
  position:absolute;
  bottom:0
}

.content__scroll:before,.content__scroll:after{
  content:"";
  width:1px;
  height:3rem;
  background:currentColor;
  position:absolute;
  top:3rem;
  left:50%
}

.content__scroll:after{
  background:var(--color-bg);
  height:.25rem;
  top:5rem
}

.content__bg{
  width:100%;
  height:100vh;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:cover;
  align-items:center;
  justify-items:center;
  display:grid;
  position:relative;
}

.content__bg--bottom{
  background-position:50% 100%
}

.separator{
  z-index:1000;
  pointer-events:none;
  width:100%;
  height:150px;
  fill:var(--color-bg);
  display:block;
  position:absolute
}

.separator--center{
  height:300px;
  opacity:.2;
  top:10vh
}

.separator--up{
  top:-1px
}

.separator--down{
  bottom:-1px
}

.separator--solo{
  height:auto;
  width:calc(100% + 5px);
  margin-left:-2.5px;
  position:relative
}

.separator--line{
  fill:none;
  stroke:#000;
  stroke-width:1px
}

.separator--line-light{
  fill:none;
  stroke:var(--color-bg);
  stroke-width:1px
}

.content__stacked{
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:20vh 10vw 30vh;
  display:flex
}

.content__interlude{
  writing-mode:vertical-rl;
  font-family:'Hatton',ab-appare,sans-serif;
  font-size:7vw;
  font-style:normal;
  font-weight:400
}

.content__text{
  flex-direction:column;
  justify-content:center;
  align-items:end;
  display:flex
}

.content__text--left{
  text-align:left;
  align-items:start;
}

.content__text h2{
  margin:0;
  font-family:'Acma-Extralight',scotch-display,serif;
  font-size:max(1.5rem,min(9vw,7rem));
  font-weight:400;
  line-height:1.1;
  text-align: left;
  color: var(--color-link-hover);
}

.content__text p{
  font-family:'NeueMontreal',-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  max-width:48ch;
  font-size:.9rem;
  line-height:1.5;
}

.content__text--right p {
  text-align: left;
}

.content__sides{
  grid-gap:6vw;
  grid-template-columns:100%;
  align-content:center;
  justify-content:center;
  align-items:center;
  padding:0vh 10vw 10vh;
  display:grid
}

.content__footer{
  grid-gap:6vw;
  grid-template-columns:100%;
  align-content:center;
  justify-content:center;
  align-items:center;
  padding:5vh 10vw 0vh;
  display:grid
}

.content__footer h2{
  font-size: max(2rem,min(11vw,7rem));
  color: var(--color-bg);
}

.content__sides--nogap{
  grid-gap:0;
  padding-bottom:0
}

.content__sides .image-clip{
  max-width:100%;
  justify-self:center
}

.content__footer .image-clip{
  max-width:100%;
  justify-self:center
}

.content--grid{
  grid-gap:10vw;
  max-width:620px;
  grid-template-rows:auto;
  grid-template-columns:100%;
  justify-items:center;
  margin:0 auto;
  padding:0vh 0vw 15vh;
  display:grid;
  line-height: .5;
}

.content__img{
  width:100%;
  max-width:400px;
  height:auto;
  text-align: center;
}

.content__img h2{
  color: var(--color-link-hover);
  font-weight: 400;
}

.content__img p{
  font-family: NeueMontreal;
  font-size: .9rem;
}

.footer{
  color:#fff;
  background: var(--color-link-hover);
  position:relative;
}

.footer a{
  color: #000;
  text-decoration: underline 1px;
  text-decoration-skip: ink;
  text-underline-offset: .3rem;
}

.footer a:hover{
  color: var(--color-link);
}

.credits{
  text-align:center;
  padding:0vh 10vw 15vh;
  font-size:max(1.5rem,min(3vw,3rem));
  font-weight:400;
  line-height: 1.25;
}

.phone{
  color: #000;
}

.image-clip{
  max-width:100%;
  height:auto
}

.image-clip--offset{
  margin-top:-20%
}

@media only screen and (min-width: 33em) and (max-width: 53em) {
  .content__title-pre-header {
    font-size: 2.5rem;
  }

  .content__title-main-header {
    font-size: 2.5rem;
  }

  .content__title-main-header-2 {
    font-size: 2.5rem;
  }

  .content__text h2 {
    font-size: max(1rem, min(8vw,7rem));
  }

  .content__text {
    align-items: flex-start;
  }

  .content__text--left {
    align-items: center;
  }

  .content__sides {
    padding: 0vh 15vw 10vh;
  }

}

@media screen and (min-width:53em){
  .big-content{
    top: 0vh;
  }

  .content--centered{
    min-height:100vh;
    top: 0vh;
  }

  .content__title-pre-header {
    font-size:max(2rem,min(5vw,7rem));
  }

  .content__title-main-header{
    font-size:max(2rem,min(5vw,7rem));
  }

  .content__title-main-header-2{
    font-size:max(2rem,min(5vw,7rem));
  }

  .content__text h2{
    font-size:max(1.75rem,min(2.2vw,7rem));
    line-height:1;
    max-width: 30ch;
  }

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

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

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

  .context__text--footer h2{
    max-width: 8ch;
  }

  .content__sides{
    grid-template-columns:45% 1fr
  }

  .content__sides-right{
    grid-template-columns:40% 1fr
  }

  .content__footer{
    grid-template-columns:55% 1fr;
    padding:0vh 20vw 0vh;
  }

  .content--grid{
    grid-template-columns:repeat(2,1fr);
    padding: 5vh 0vw 20vh;
  }

  .content__img{
    text-align: left;
  }

  .content--grid .content__img:nth-child(2){
    margin-top:5vh
  }

  .content--grid .content__img:nth-child(3){
    margin-top:-18vh;
    margin-left: 5rem;
  }

  .content--grid .content__img:nth-child(4){
    margin-top:-10vh;
    margin-left: 5rem;
  }

  .content__title-pre{
    font-size:max(2rem,min(10vw,7rem));
  }

  .content__title-main{
    font-size:max(2rem,min(10vw,7rem));
  }

  .credits{
    text-align:center;
    padding:0vh 0vw 20vh;
    font-size:max(1.75rem,min(3vw,3rem));
    font-weight:400;
    line-height: 1.5;
  }

  .content__footer h2{
    font-size: max(1.75rem, min(7vw, 5rem));
    text-align: left;
  }

  .mobile-break{
    display: none;
  }
}