@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght@600;700&display=swap');
/* LeadLab additive styles — do not edit theme files */

/* adapted-mode hero (guide §6.1) */
.bf-adapted-title { position: relative; }
.bf-adapted-text .line { display: block; will-change: transform; }
.bf-fixed-img { position: absolute; z-index: -1; visibility: hidden; }
.bf-img-a { right: 5%; }    /* image 1 horizontal slot */
.bf-img-b { left: 24%; }    /* image 2 horizontal slot */
@media (max-width: 1199.98px) {
  .bf-adapted-text br { display: none; }   /* admin line breaks ignored on mobile */
}

/* round button: center label vertically for any line count;
   side padding makes multi-word labels wrap like the demo */
.bf-btn-rounded {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
}

/* marquee section title: Roboto Condensed instead of ThunderMed */
.bf-text-slider-style .tp-text-content span {
  font-family: 'Saira Extra Condensed', sans-serif;
  font-weight: 600;
  font-size: 180px;
  letter-spacing: -0.01em;
}
@media (max-width: 767px) {
  .bf-text-slider-style .tp-text-content span {
    font-size: 76px;
  }
}

/* brands marquee sits right after the GSAP-pinned Instagram section;
   when Instagram is hidden, reset the compensating top margin */
.marq-brand.no-insta { margin-block: 0 -300px; }

/* partner logos: grayscale at rest, real colors on hover */
.marq-brand .item-marq img {
  filter: grayscale(100%);
  transition: filter .3s ease, opacity .3s ease;
}
.marq-brand .item-marq:hover img {
  filter: none;
  opacity: 1;
}

/* header logo: fixed height, width auto */
.px-header-logo img.px-main-logo { height: 32px; width: auto; }

/* portfolio filter links (replaces theme's isotope <button> filters) */
.px-project-inner-5-tab .masonary-menu a {
   font-size: 26px;
   font-weight: 600;
   color: #BCBCBC;
   letter-spacing: -0.52px;
   font-family: var(--tp-ff-p);
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
}
.px-project-inner-5-tab .masonary-menu a:hover,
.px-project-inner-5-tab .masonary-menu a.active {
   color: var(--tp-common-px-black-2);
}
.px-project-inner-5-tab .masonary-menu a:not(:last-of-type) {
   margin-right: 30px;
}
#portfolio-load-more.is-loading { opacity: .5; pointer-events: none; }
@media (max-width: 767px) {
   .px-project-inner-5-tab .masonary-menu a:not(:last-of-type) { margin-right: 20px; }
   .px-project-inner-5-tab .masonary-menu a { font-size: 20px; }
}

/* instagram section: 100vh shrinks below the absolute-positioned content
   (text block hangs -340px under the center image => ~736px real extent).
   Floor the height so short viewports can't push it into the partners marquee. */
@media (min-width: 768px) {
   .bf-instagram-area.bf-instagram-ptb { min-height: 800px; }
}

/* instagram section is GSAP-pinned (pinSpacing:false) on >=1200px: while pinned,
   the marquee keeps scrolling up toward it and the center image grows 396->580px,
   pushing the text block down. The stock 385px marquee margin only covers tall
   viewports; scale it with viewport height so short windows keep a buffer. */
@media (min-width: 1200px) {
   .marq-brand:not(.no-insta) { margin-block-start: max(385px, calc(1000px - 70vh)); }
}

body.ll-loading { overflow: hidden; }
#smooth-wrapper { transition: filter .9s ease; }
body.ll-loading #smooth-wrapper { filter: blur(16px); }
.ll-overlay {
   position: fixed; inset: 0; z-index: 99999;
   display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px;
   background: rgba(10, 10, 10, 0.25);
   transition: opacity .7s ease, visibility .7s ease;
}
body:not(.ll-loading) .ll-overlay { opacity: 0; visibility: hidden; }
.ll-loader-logo { width: 180px; max-width: 40vw; }
.ll-loader-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.ll-piece {
   transform-box: view-box;
   transform-origin: 248.13px 261.3px;
   animation-duration: 2.4s;
   animation-timing-function: cubic-bezier(.65,0,.35,1);
   animation-iteration-count: infinite;
}
.ll-piece-a { animation-name: ll-split-a; }
.ll-piece-b { animation-name: ll-split-b; }
@keyframes ll-split-a {
   0%, 8%   { transform: translate(0,0) rotate(0); }
   35%      { transform: translate(56px,-34px) rotate(0); }
   65%      { transform: translate(56px,-34px) rotate(180deg); }
   92%,100% { transform: translate(0,0) rotate(180deg); }
}
@keyframes ll-split-b {
   0%, 8%   { transform: translate(0,0) rotate(0); }
   35%      { transform: translate(-56px,34px) rotate(0); }
   65%      { transform: translate(-56px,34px) rotate(180deg); }
   92%,100% { transform: translate(0,0) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
   .ll-piece { animation: none; }
   #smooth-wrapper { transition: none; }
}

.bf-hero-3-title-video video {
   clip-path: url(#ll-mark-clip);
   border-radius: 0;
}

.tp-btn-border:hover {
   border-color: #F4451C;
   background: #F4451C;
   color: var(--tp-common-px-white);
}
.bf-dark .bf-text-slider-style .tp-text-slide-bottom .tp-text-content span {
   color: #F4451C !important;
}
.bf-btn-circle-dot {
   background: #F4451C;
}

:root {
   --tp-common-px-orange: #F4451C;
}

.bf-instagram-area {
   position: relative;
   z-index: 1;
}
.design-award-area {
   position: relative;
   z-index: 3;
}
.tp-text-slider-area.bf-text-slider-style {
   position: relative;
   z-index: 4;
}

.in-team-hero-title {
   font-family: 'Inter', sans-serif;
}

.in-team-hero-title {
   letter-spacing: -0.02em;
}

.pf-5-hero-title {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
}

.in-team-hero-title {
   line-height: 1.08;
}

.tp-contact-me-interest-title {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
}


.in-team-hero-title {
   font-size: clamp(56px, 6.2vw, 96px);
}

.bf-hero-area .bf-btn-rounded {
   background-color: #F4451C;
   border-color: #F4451C;
   color: #FFFFFF;
}
.bf-hero-area .bf-btn-rounded .bf-btn-circle-dot {
   background: #A03412;
}

.bf-hero-3-title .bf-item-anime-md.marque {
   position: relative;
   z-index: 2;
}
.bf-hero-3-title .bf-hero-3-title-video {
   position: relative;
   z-index: 1;
}

.px-header-menu > nav > ul > li > a:hover {
   color: #CD4219;
}

.px-header-menu > nav > ul > li > a:hover {
   color: #F4451C;
}

.px-header-menu > nav > ul > li:hover > a {
   color: #F4451C;
}

.px-header-menu nav.tp-mobile-menu-active > ul > li > a:hover {
   color: #F4451C;
}

.px-pd-2-np-content a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background-color: #CD4219;
   color: #FFFFFF;
   padding: 14px 30px;
   border-radius: 100px;
   transition: background-color .3s ease;
}
.px-pd-2-np-content a:hover {
   background-color: #A03412;
   color: #FFFFFF;
}

.bf-instagram-area .tp-btn {
   background-color: #CD4219;
   color: #FFFFFF;
}
.bf-instagram-area .tp-btn:hover {
   background-color: #A03412;
   color: #FFFFFF;
}

#marq-brand .slide-har.st1 .box,
#marq-brand .slide-har.st2 .box {
   animation: none !important;
}
#marq-brand .main-marq {
   cursor: grab;
   touch-action: pan-y;
}
#marq-brand .main-marq:active {
   cursor: grabbing;
}
#marq-brand .slide-har {
   will-change: transform;
}

.bf-instagram-thumb-inner-1,
.bf-instagram-thumb-inner-2 {
   top: 10px;
}

@media (min-width: 1400px) {
   .bf-portfolio-3-content.pl-200 {
      padding-left: clamp(0px, calc(100% - 480px), 200px);
   }
}

@media (min-width: 1400px) {
   .bf-portfolio-3-area .bf-portfolio-3-content:not(.pl-200) {
      padding-left: clamp(0px, calc(100% - 480px), 200px);
   }
}