/* <Style>s */

@import url("https://p.typekit.net/p.css?s=1&k=obf0onq&ht=tk&f=51975.51998&a=20002161&app=typekit&e=css");

@font-face {
  font-family: "acumin-variable";
  src: url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/cd27bb/0000000000000000774be2a6/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
}

@font-face {
  font-family: "marlide-display-variable";
  src: url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/26a9a4/0000000000000000774ba8d7/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 100;
  font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/9cb78a/0000000000000000000118ad/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/b825af/0000000000000000000118b1/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3")
      format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("woff"),
    url("https://use.typekit.net/af/07d425/0000000000000000000118ae/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i4&v=3")
      format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "franklin-gothic-urw";
  src: url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("woff2"),
    url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("woff"),
    url("https://use.typekit.net/af/9a7284/0000000000000000000118b2/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=i7&v=3")
      format("opentype");
  font-display: auto;
  font-style: italic;
  font-weight: 700;
  font-stretch: normal;
}

.tk-franklin-gothic-urw {
  font-family: "franklin-gothic-urw", sans-serif;
}
.tk-franklin-gothic-ext-comp-urw {
  font-family: "franklin-gothic-ext-comp-urw", sans-serif;
}
.tk-franklin-gothic-urw-cond {
  font-family: "franklin-gothic-urw-cond", sans-serif;
}
.tk-franklin-gothic-urw-comp {
  font-family: "franklin-gothic-urw-comp", sans-serif;
}
.tk-acumin-variable {
  font-family: "acumin-variable", sans-serif;
}
.tk-marlide-display-variable {
  font-family: "marlide-display-variable", sans-serif;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}
body {
  margin-bottom: 1em;
}

button,
input[type="submit"],
input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0.5em;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  border: 1px solid black;
  border-radius: 1em;
}

body {
  background-color: rgb(203, 200, 191);
  width: 100vw;
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1,
h2,
h3 {
  font-family: "marlide-display-variable", sans-serif;
  font-weight: lighter;
  line-height: 0.95em;
  margin: 0.5em 0;
}
p {
  margin: 0.5em 0;
}

a {
  color: inherit;
  text-decoration: none;
}



/* <Home> */

.home {
  display: flex;
  flex-direction: column;
  background-image: url("content/home.jpg");
  background-position: center center;
  border-radius: 0 0 50px 50px;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 1.25em 1em 1.25em;
}

.about {
  background-image: unset;
  background-color: #b5aca3;
}

.contact  {
  background-image: unset;
  background-color:unset; 
}


.case-study-page {
  background-image: unset;
  background-color:unset; 
}

.branding {
  background-image: unset;
  background-color: black;
  color: rgb(201, 195, 188);
}

.creative {
  background-image: unset;
  background-image: url("content/services-header.jpg");
  color: unset;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 100px;
  align-items: center;
  z-index: 1000;
}

.header .lbmark {
  height: 75px;
}


/* .floating-contact {
  display: flex;
  position: fixed;
  right: 0.5em;
  top: 0.5em;
  justify-content: space-around;
  align-items: center;
  z-index: 1001;
  background-color: black;
  border-radius: 2em;
  padding: 1em 0.5em;
  color: white  ;
} */

.navigation {
  display: flex;
  justify-content: space-around;
  min-width: 40vw;
  min-height: 25vh;
  align-items: center;
  z-index: 1000;
}

.navigation h2 {
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
}

.navigation .contact {
  padding: 0.5em 2em;
  z-index: 101;
}

.navigation .contact-board {
  background: none;
  color: inherit;
  border: none;
  font: inherit;
  outline: inherit;
  border: 1px solid black;
  border-radius: 1em;
  padding: 0.5em 1em;
}
.cursor {
  cursor: pointer;
}

.navigation .toggle {
  display: none;
}

@media screen and (max-width: 844px) {
  .navigation {
    position: absolute;
    right: 1em;
    top: 1em;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    min-width: 40vw;
    border-radius: 25px;
    padding: 1em;
    color: white;
    background-color: black;
  }
  .navigation .contact-board {
    padding: unset;
    margin: unset;
  }

  .navigation .contact-board::before {
    border-bottom: 1px solid white;
    display: inline-block;
    content: "";
    width: 100%;
    margin: 1.5em 0 0 0 ;
    transform: translateY(-1rem);
  }

  .navigation.closed {
    min-width: unset;
    overflow: hidden;
    color: black;
    background-color: unset;
    width: 50px;
    height: 50px;
  }
  .navigation.closed h2 {
    display: none;
  }
  .navigation .toggle {
    position: absolute;
    right: 0.4em;
    top: 0.1em;
    display: unset;
    text-align: center;
    display: unset;
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    font-weight: bold;
    z-index: 100;
  }
  .navigation.closed .toggle::before {
    content: "=";
  }
  .navigation .toggle::before {
    content: "x";
  }
}

.home h1 {
  font-size: 8em;
}

@media screen and (max-width: 844px) {
  .home h1 {
    font-size: 10vw;
  }
}

.home .title-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0;
  min-height: 20vh;
}

.home .logo-title-right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 20vh;
}

.home .logo-title-right .logo {
  max-height: 1.5em;
}

.home .content {
  font-size: 1.25em;
}

.home .title-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 0;
  margin-bottom: 0.25em;
}
.home .title-logo {
  margin: 0.25em 0;
}

.home .sub-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0;
}

.home .sub-header .content {
  margin: 1em 0;
  font-weight: lighter;
  font-size: 1.25em;
}

.home.branding .content {
  color: rgb(132, 160, 187);
}

.home .sub-header .explore {
  margin: 1em 0;
  padding: 0.5em 1em;
  background-color: black;
  color: #d6d1cb;
}

/* </Home> */

/* <Line> */

.line {
  width: 100%;
  border-top: 1px solid black;
}

/* </Line> */

/* <SnippetLeft> */

.snippet-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(205, 199, 191);
  padding: 2em;
}

.snippet-left .eyebrow {
  font-size: 1em;
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.snippet-left .content {
  font-size: 5em;
  font-family: "marlide-display-variable", sans-serif;
  line-height: 1em;
  font-weight: lighter;
}

.snippet-left .link-to {
  font-size: 1.25em;
}

@media screen and (max-width: 967px) {
  .snippet-left .content {
    font-size: 3em;
    font-weight: lighter;
  }
}

/* </SnippetLeft> */

/* <SnippetCenter> */

.snippet-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(205, 199, 191);
  padding: 5em 2em;
}

.snippet-center .title {
  font-size: 4em;
  margin: 0;
}

.snippet-center .content {
  font-size: 1.25em;
}

.snippet-center .link-to {
  font-size: 1.25em;
}

@media screen and (min-width: 1024px) {
  .snippet-center .title {
    font-size: 8vw;
    width: 50%;
  }
}

/* </SnippetCenter> */

/* <LengthySnippetCenter> */

.lengthy-snippet-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: rgb(205, 199, 191);
  padding: 5em;
  border-radius: 0 0 2em 2em;
}

.lengthy-snippet-center .title {
  font-size: 7em;
  margin: 0;
  padding-bottom: 0.5em;
}

.lengthy-snippet-center .hangoff {
  font-weight: bold;
  padding: 1em;
}

.lengthy-snippet-center .content {
  font-size: 1.25em;
  max-width: 45vw;
}

.lengthy-snippet-center .linkoff {
  padding: 1em;
  text-decoration: underline;
}

@media screen and (max-width: 844px) {
  .lengthy-snippet-center {
    padding: 1em;
  }
  .lengthy-snippet-center .content {
    max-width: unset;
  }
}

.lengthy-snippet-center.about {
  background-color: #2e402a;
  color: white;
}
.lengthy-snippet-center.branding {
  background-color: unset;
  color: unset;
}
.lengthy-snippet-center.branding .title {
  font-size: 2em;
}

/* </LengthySnippetCenter> */

/* <NiceSubCardGroup> */
.nice-subcard-group {
  display: flex;
  max-width: 60vw;
  flex-wrap: wrap;
}
/* </NiceSubCardGroup> */

/* <NiceSubCard> */
.nice-subcard {
  margin: 0.25em;
  padding: 0.25em 0.75em;
  border: 1px solid black;
  border-radius: 2em;
  padding: 1.5em;
  text-align: left;
  width: 40%;
}

.about .nice-subcard {
  border: 1px solid white;
}

.nice-subcard .title {
  font-size: 1em;
  font-weight: bold;
}

.nice-subcard .content {
  font-size: 1em;
}

@media screen and (max-width: 967px) {
  .nice-subcard-group {
    max-width: 99vw;
  }
  .nice-subcard {
    width: 100%;
  }
}

/* </NiceSubCard> */

/* <Feature> */

.feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: rgb(205, 199, 191);
  padding: 2em;
}

.feature .image {
  border-radius: 2em;
  width: 100%;
  min-height: 90vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media screen and (max-width: 844px) {
  .feature .image {
    height: 90vw;
    min-height: unset;
  }
}

.feature .image.port-mcc-campaign {
  background-image: url(content/port-mcc.jpg);
}

.feature .image.port-sacolor {
  background-image: url(content/port-sacolor.jpg);
}

.feature .image.port-mcc-recruitment {
  background-image: url(content/port-mcc-recruitment.jpg);
}

.feature .image.port-ibu {
  background-image: url(content/port-ibu.jpg);
}

.feature .title {
  margin: 0.5em 0 0 0;
  font-size: 2.5em;
}

.feature .content {
  margin: 0;
}

.feature .sub-title {
}

.feature .list {
  padding-inline-start: 1.25em;
  margin-block-start: 0;
}

.feature .list .list-item {
}

/* </Feature> */

/* <Profile> */

.profile {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: rgb(205, 199, 191);
  padding: 2em;
}

.profile .image {
  border-radius: 2em;
  min-width: 40vw;
  min-height: 80vh;
  background-position: center top;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
}

.profile .image.profile-lauren {
  background-image: url(content/lauren.jpeg);
}

.profile .client-logos {
  object-fit: scale-down;
  max-width: 100%;
}

.profile .clients-title {
  font-weight: bold;
}

.profile .content {
  max-width: 500px;
  margin: 0;
}

.profile .title {
  font-size: 5em;
}

.profile .tagline {
  font-size: 1.25em;
}

@media screen and (max-width: 844px) {
  .profile .image {
    min-width: 90vw;
    min-height: 80vh;
  }
  .profile .content {
    padding: 1em;
    max-width: unset;
    margin: 0;
  }
}

/* </Profile> */

/* <Card> */

.card {
  position: relative;
  display: flex;
  background-color: white;
  border-radius: 2em;
  flex-direction: column;
  padding: 2em 2em;
}

.card.branding {
  background-color: unset;
  color: unset;
}

.card .title {
  font-size: 4em;
}

@media screen and (max-width: 844px) {
  .card .title {
    font-size: 3em;
  }
}

.card .content {
  font-size: 1em;
}

/* </Card> */

/* <Case> */

.case {
  position: relative;
  display: flex;
  background-color:unset;
  border-radius: 2em;
  flex-direction: column;
  padding: 1em 0em;
}

.case .image {
  background-position: center center;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
  width: 100%;
  min-height: 70vh;
  border-radius: 2em;
}


.little-more-image {
  min-height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
  width: 100%;
  border-radius: 2em;
}


@media screen and (max-width: 844px) {
  .little-more-image {
    min-height: 25vh;
  }
}





.case-card {
  background-color:white;
  position: relative;
  display: flex;
  border-radius: 2em;
  flex-direction: column;
  padding: 2em 2em;
}
.case-card .image {
  background-position: center center;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
  width: 100%;
  min-height: 70vh;
  border-radius: 2em;
}

.case-card .title {
  font-size: 5em
}

@media screen and (max-width: 844px) {
  .case-card .title {
    font-size: 2.5em
  }
}

/* </Case> */


/* <NextUp> */

.next-up {
  background-color:white;
  position: relative;
  display: flex;
  border-radius: 2em;
  flex-direction: column;
  align-items: center;
  padding: 2em 2em;
}

.next-up .image {
  background-position: center center;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
  width: 100%;
  min-height: 70vh;
  border-radius: 2em;
}


.next-up .next {
  font-weight: bold;
}

.next-up .title {
  font-size: 4em;
}

/* </NextUp> */


/* <NiceButtonGroup> */
.nice-button-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
/* </NiceButtonGroup> */

/* <NiceButton> */
.nice-button {
  margin: 0.25em;
  padding: 0.25em 0.75em;
  font-family: "marlide-display-variable", sans-serif;
  /* font-weight: lighter; */
  font-size: 2.5em;
}
/* </NiceButton> */

/* <QuoteGroup> */
.quote-group {
  display: flex;
  flex-direction: column;
  padding: 2em;
}

.quote-group .eyebrow {
  font-family: franklin-gothic-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
}

/* <Quote> */

.quote-group .quotes {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quote-group .quotes .quote {
  background-color: rgb(165, 156, 146);
  border-radius: 2em;
  margin: 1em;
  padding: 2em;
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 1024px) {
  .quote-group .quotes {
    display: flex;
    flex-direction: row;
  }
  .quote-group .quotes .quote {
    width: 50%;
  }
}

.quote-group .quotes .quote .image {
  border-radius: 50%;
  width: 5em;
}
.quote-group .quotes .quote .content {
  font-size: 2.5em;
  line-height: 1em;
}
.quote-group .quotes .quote .tagline {
}
/* </Quote> */
/* </QuoteGroup> */

/* <Footer> */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 2em 1em;
}
.footer .left {
  display: flex;
  flex-direction: column;
}
.footer .right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* </Footer> */

.kits {
  display: flex;
  flex-direction: column;
  background-color: white;
  border-radius: 5em;
  padding: 3em;
}

.kit {
  display: flex;
  flex-direction: column;
  padding: 2em 0;
}

.kit .title {
  font-size: 1.25em;
  font-weight: lighter;
}

.kit .content {
  font-size: 1.25em;
}

.kits .kit .image {
  background-position: center center;
  background-repeat: no-repeat;
  align-items: center;
  background-size: cover;
  width: 100%;
  min-height: 70vh;
  border-radius: 2em;
}

@media screen and (max-width: 844px) {
  .kits .kit .image {
    height: 90vw;
    /* width: 90vw; */
    min-height: unset;
  }
}

.kits .kit .name {
  font-size: 5em;
  margin: 0.25em 0 0 0;
}

.kits .kit .learn-more {
  background-color: black;
  color: white;
  width: 10em;
}

.why-toolkits {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  border-radius: 2em;
}

.why-toolkits .title {
  font-size: 5em;
}

.why-toolkits .mini-title {
  font-size: 1em;
}

.why-toolkits .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.why-toolkits .card-title {
  font-weight: bold;
}

.why-toolkits .card {
  border: 1px solid black;
  border-radius: 2em;
  padding: 1.5em;
  margin: 1em 1em;
  width: 33%;
  background-color: unset;
}
.why-toolkits .content {
  font-size: 1.25em;
  width: 60%;
  margin: 0 2em 1em 2em;
  text-align: center;
}

@media screen and (max-width: 844px) {
  .why-toolkits .card {
    width: 80%;
  }
  .why-toolkits .content {
    width: 90%;
  }
}

.ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: unset;
  border-radius: 2em;
  margin: 0 1em 3em 1em;
  text-align: center;
}

.ready .title {
  font-size: 5em;
  margin: 0.5em 0 0 0;
  text-align: center;
}

.ready .button-target {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0.5em 0 0.5em 0;
  text-decoration: none;
}

.ready .get-in-touch {
  border: 1px solid black;
  border-radius: 2em;
  width: 50%;
  min-width: 200px;
  height: 3em;
}


.bold {
  font-weight: bold;
}

.half-width {
  width: 50%;
  
}

@media screen and (max-width: 844px) {
  .half-width {
    width: 100%;
  }
}

.nudge-down {
  margin-top: 1em;
}

#video {
  width: 100vw;
  height: 110vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border-radius: 0 0 50px 50px;
}

/* </Styles> */