/* Final layout and branding adjustments based on the reference site. */
#header .textlogo {
  justify-content: flex-start;
}

#header .textlogo img {
  display: block;
  width: 85px;

  object-fit: contain;
  object-position: left center;
}

.fvHeader .logo{
           width: 64.8px;
    padding-top: 0px;
    margin-top: -16px;
    line-height: 1;
    margin-left: -20px;
    }
    
    
#headerMob .logo img,
.fvHeader .logo img {
  display: block;
  width: 130px;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.single .bodyArea p,
.single .bodyArea p * {
  color: var(--main-text) !important;
  font-size: 14.4px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
}
@media screen and (max-width: 851px) {
   #headerMob .logo img, .fvHeader .logo img{
           width: 100px !important;
   }
}
@media screen and (min-width: 851px) {

  .fvHeader .navi,
  #header .navi {
    left: 48.42%;
    font-size: 14px;
  }

  .projects .cSelectCat .selectTitle,
  .projects .cSelectCat .navi {
    font-size: 14px;
  }

  .projects .projectList>li>a figure figcaption {
    right: 21.6px;
    bottom: 20px;
    font-size: 13px;
  }
}
.projects .projectList>li>a figure figcaption{
    color: #000 !important;
}
.archive .cSelectCat .navi a, .projects .cSelectCat .navi a{
    color:#000 !important;
}
@media screen and (max-width: 850px) {
    #menu .scrollBox{
        margin-top: 30px;
    }
    #headerMob #menuBtn{
        top: 35px;
    }
    #menu .gnavi li>a{
        color:#000 !important;
        font-weight: 400;
    }
    
#headerMob .logo{
    top: 20px !important;
}
  .projects .cSelectCat .selectTitle,
  .projects .cSelectCat .navi {
    font-size: 14px;
  }

  .projects .projectList>li>a figure figcaption {
    right: 18px;
    bottom: 18px;
    font-size: 11px;
  }

  .single .bodyArea p,
  .single .bodyArea p * {
    font-size: 14px !important;
  }
}

/* Keep service body copy uniform without overriding heading animations. */
.services .gs_textSections .cTitle2,
.services .gs_textSections .cTitle2 *,
.services .gs_textSections .liner,
.services .gs_textSections .liner * {
  color: var(--black) !important;
}

/* Keep the services image mosaic aligned when CMS images have different ratios. */
.services .projectShowcase li img {
  display: block;
  object-fit: cover;
  object-position: center;
}

.services .projectShowcase li:nth-child(odd) img:nth-child(odd),
.services .projectShowcase li:nth-child(even) img:nth-child(even) {
  aspect-ratio: 1000 / 686;
}

.services .projectShowcase li:nth-child(odd) img:nth-child(even),
.services .projectShowcase li:nth-child(even) img:nth-child(odd) {
  aspect-ratio: 707 / 1000;
}

/* Website typography supplied by the client. */
@font-face {
  font-family: "Huayuan Gothic Bold";
  src: url("/static/fonts/huayuan-gothic-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Deng Light";
  src: url("/static/fonts/deng-light.ttf") format("truetype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

body,
body p,
body a,
body span,
body li,
body dt,
body dd,
body th,
body td,
body figcaption,
body label,
body input,
body textarea,
body button,
body select,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: "Deng Light", sans-serif !important;
}

body .title.gs_heading,
body .title.gs_heading *,
body .title.gs_heroTitle,
body .title.gs_heroTitle * {
  font-family: "Huayuan Gothic Bold", sans-serif !important;
  font-weight: 700 !important;
}

.services .hero .cLinks li {
  font-size: 12px;
}

.contact .studio-address {
  display: block;
}