body.elementor-page-29495:not(.elementor-motion-effects-element-type-background), body.elementor-page-29495 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-f57781e *//* =========================================================
   BRAND IMPRINT — HOME HERO
========================================================= */

.bi-funky-balanced {

  --orange:#F0552C;
  --black:#080808;
  --cream:#EFE8DF;
  --yellow:#E5FF3C;

  position:relative;

  overflow:hidden;

  background:#080808;

  color:white;

}



/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

.bi-fb-bg {

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

  opacity:.13;

  pointer-events:none;

}



/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.bi-fb-shape {

  position:absolute;

  pointer-events:none;

  transition:
    transform .8s ease;

}


.shape-a {

  width:130px;

  height:130px;

  right:10%;

  top:9%;

  border-radius:
    46% 54% 62% 38% /
    56% 39% 61% 44%;

  background:
    rgba(240,85,44,.13);

  animation:
    biFbMorph 7s ease-in-out infinite;

}


.shape-b {

  width:85px;

  height:85px;

  left:42%;

  bottom:15%;

  border:
    16px solid
    rgba(229,255,60,.08);

  border-radius:50%;

}


@keyframes biFbMorph {

  50% {

    border-radius:
      63% 37% 42% 58% /
      38% 57% 43% 62%;

    transform:
      rotate(12deg);

  }

}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.bi-fb-wrap {

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:auto;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:70px;

  align-items:center;

  min-height:570px;

  padding:
    168px 0 58px;

  position:relative;

  z-index:3;

}



/* =========================================================
   HEADLINE
========================================================= */

.bi-fb-copy h1 {

  margin:0;

  max-width:790px;

  letter-spacing:-.05em;

}



/* =========================================================
   DIGITAL MARKETING AGENCY
========================================================= */

.bi-fb-agency {

  display:inline-block;

  position:relative;

  font-size:
    clamp(48px,5.1vw,77px);

  line-height:.93;

  font-weight:750;

  color:#FFFFFF;

  animation:
    biFbReveal .8s ease .10s both;

}



/* ORANGE SWEEP */

.bi-fb-agency::before {

  content:
    "Digital Marketing Agency";

  position:absolute;

  inset:0;

  color:var(--orange);

  clip-path:
    inset(0 100% 0 0);

  animation:
    biFbSweep 4.2s ease-in-out infinite;

}


@keyframes biFbSweep {

  0%,
  15% {

    clip-path:
      inset(0 100% 0 0);

  }

  48% {

    clip-path:
      inset(0 0 0 0);

  }

  72%,
  100% {

    clip-path:
      inset(0 0 0 100%);

  }

}



/* =========================================================
   SCRIBBLE
========================================================= */

.bi-fb-scribble {

  position:absolute;

  left:4%;

  bottom:-8px;

  width:78%;

  height:7px;

  border-bottom:
    3px solid var(--orange);

  border-radius:50%;

  transform:
    rotate(-1deg)
    scaleX(0);

  transform-origin:left;

  animation:
    biFbScribble 1s ease .9s forwards;

}


@keyframes biFbScribble {

  to {

    transform:
      rotate(-1deg)
      scaleX(1);

  }

}



/* =========================================================
   SECOND HEADLINE LINE
========================================================= */

.bi-fb-main {

  display:block;

  margin-top:11px;

  font-size:
    clamp(39px,4vw,60px);

  line-height:.98;

  font-weight:650;

  color:
    rgba(255,255,255,.92);

  animation:
    biFbReveal .8s ease .17s both;

}


.bi-fb-main em {

  color:
    var(--orange);

  font-style:normal;

  display:inline-block;

  animation:
    biGrowBounce 3.5s ease-in-out infinite;

}


@keyframes biGrowBounce {

  50% {

    transform:
      rotate(-2deg)
      translateY(-2px);

  }

}



/* =========================================================
   NOT JUST LOOK GOOD
========================================================= */

.bi-fb-muted {

  display:block;

  margin-top:3px;

  font-size:
    clamp(34px,3.6vw,54px);

  line-height:1;

  font-weight:600;

  color:#FFFFFF;

  animation:
    biFbReveal .8s ease .22s both;

}



/* =========================================================
   DESCRIPTION
   UPDATED — BIGGER + WHITE
========================================================= */

.bi-fb-copy p {

  margin:
    27px 0 0;

  max-width:
    720px;

  font-size:
    16px;

  line-height:
    1.7;

  font-weight:
    450;

  color:
    #FFFFFF;

  opacity:
    .92;

  animation:
    biFbReveal .8s ease .28s both;

}



/* =========================================================
   BUTTONS
========================================================= */

.bi-fb-actions {

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:27px;

  animation:
    biFbReveal .8s ease .34s both;

}


.bi-fb-btn {

  min-height:49px;

  padding:
    0 20px;

  display:inline-flex;

  align-items:center;

  gap:14px;

  border-radius:3px;

  text-decoration:none;

  font-size:12.5px;

  font-weight:700;

  transition:
    all .3s ease;

}


.bi-fb-btn.primary {

  color:white;

  background:
    var(--orange);

}


.bi-fb-btn.primary:hover {

  transform:
    translateY(-4px)
    rotate(-1deg);

}


.bi-fb-btn.secondary {

  color:white;

  background:
    rgba(255,255,255,.02);

  border:
    1px solid
    rgba(255,255,255,.14);

}


.bi-fb-btn.secondary:hover {

  color:
    var(--orange);

  border-color:
    var(--orange);

  transform:
    translateY(-4px)
    rotate(1deg);

}



/* =========================================================
   RIGHT VISUAL
========================================================= */

.bi-fb-visual {

  position:relative;

}


.bi-fb-image-card {

  position:relative;

  width:100%;

  min-height:430px;

  border-radius:
    18px 18px 65px 18px;

  padding:13px;

  background:
    var(--cream);

  overflow:hidden;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.32);

  transition:
    transform .25s ease;

}



/* =========================================================
   IMAGE
========================================================= */

.bi-fb-image {

  position:absolute;

  inset:13px;

  border-radius:
    13px 13px 53px 13px;

  background-image:
    url("http://brandimprint.in/assets/uploads/2026/09/brand-imprint-hero-section.webp");

  background-size:
    cover;

  background-position:
    center;

}



/* =========================================================
   IMAGE LABEL
========================================================= */

.bi-fb-label {

  position:absolute;

  z-index:5;

  padding:
    8px 11px;

  font-size:8px;

  font-weight:800;

  letter-spacing:.13em;

}


.label-one {

  right:20px;

  bottom:29px;

  background:
    var(--orange);

  color:white;

  transform:
    rotate(-2.5deg);

}



/* =========================================================
   CIRCULAR BADGE
========================================================= */

.bi-fb-circle {

  position:absolute;

  z-index:6;

  right:25px;

  top:25px;

  width:92px;

  height:92px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:
    var(--yellow);

  color:#111;

  font-size:9px;

  line-height:1.08;

  font-weight:900;

  transform:
    rotate(7deg);

  animation:
    biFbBadge 4.2s ease-in-out infinite;

}


.bi-fb-circle span {

  display:block;

  margin-right:3px;

}


@keyframes biFbBadge {

  50% {

    transform:
      translateY(-7px)
      rotate(11deg);

  }

}



/* =========================================================
   FLOATING TAG
========================================================= */

.bi-fb-tag {

  position:absolute;

  left:-24px;

  bottom:42px;

  z-index:7;

  padding:
    9px 12px;

  background:#fff;

  color:#111;

  font-size:8px;

  font-weight:900;

  letter-spacing:.11em;

  transform:
    rotate(-5deg);

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.18);

}



/* =========================================================
   STATS
========================================================= */

.bi-fb-stats {

  width:
    min(
      1180px,
      calc(100% - 80px)
    );

  margin:
    0 auto 18px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;

  position:relative;

  z-index:4;

}



/* =========================================================
   STAT CARD
========================================================= */

.bi-fb-stat {

  min-height:74px;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:8px;

  background:
    rgba(255,255,255,.025);

  display:flex;

  flex-direction:column;

  justify-content:center;

  transition:
    transform .3s ease,
    border-color .3s ease;

}


.bi-fb-stat:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(240,85,44,.45);

}



/* =========================================================
   TILTED STAT
========================================================= */

.bi-fb-stat.tilted {

  transform:
    rotate(-1.3deg);

}


.bi-fb-stat.tilted:hover {

  transform:
    rotate(0deg)
    translateY(-4px);

}



/* =========================================================
   ORANGE STAT
========================================================= */

.bi-fb-stat.orange-stat {

  background:
    rgba(240,85,44,.08);

}



/* =========================================================
   STAT NUMBERS
========================================================= */

.bi-fb-stat strong {

  font-size:
    23px;

  line-height:
    1.1;

  letter-spacing:
    -.03em;

  color:
    #FFFFFF;

}



/* NATIONAL REMAINS ORANGE */

.bi-fb-stat.orange-stat strong {

  color:
    var(--orange);

}



/* =========================================================
   STAT LABELS
   UPDATED — WHITE
========================================================= */

.bi-fb-stat span {

  margin-top:
    6px;

  color:
    #FFFFFF;

  opacity:
    .82;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

}



/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

@keyframes biFbReveal {

  from {

    opacity:0;

    transform:
      translateY(20px);

  }

  to {

    opacity:1;

    transform:
      translateY(0);

  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .bi-fb-wrap {

    width:
      calc(100% - 50px);

    grid-template-columns:
      1fr;

    gap:40px;

  }


  .bi-fb-visual {

    max-width:
      720px;

  }


  .bi-fb-stats {

    width:
      calc(100% - 50px);

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

  .bi-fb-wrap {

    width:
      calc(100% - 30px);

    min-height:auto;

    padding:
      70px 0 42px;

  }


  .bi-fb-agency {

    font-size:
      clamp(41px,10.5vw,52px);

  }


  .bi-fb-main {

    font-size:
      clamp(35px,9vw,45px);

  }


  .bi-fb-muted {

    font-size:
      clamp(31px,8vw,39px);

    color:
      #FFFFFF;

  }


  /* MOBILE DESCRIPTION */

  .bi-fb-copy p {

    margin-top:
      22px;

    font-size:
      15px;

    line-height:
      1.65;

    color:
      #FFFFFF;

    opacity:
      .92;

  }


  .bi-fb-actions {

    flex-direction:
      column;

  }


  .bi-fb-btn {

    width:
      100%;

    justify-content:
      center;

  }


  .bi-fb-image-card {

    min-height:
      350px;

  }


  /* MOBILE STATS */

  .bi-fb-stats {

    width:
      calc(100% - 30px);

    grid-template-columns:
      repeat(2,1fr);

  }


  .bi-fb-stat {

    min-height:
      82px;

    padding:
      15px;

  }


  .bi-fb-stat strong {

    font-size:
      21px;

  }


  .bi-fb-stat span {

    font-size:
      8px;

    color:
      #FFFFFF;

    opacity:
      .85;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-05c18de *//* =========================================================
   BRAND IMPRINT — HOME HERO
========================================================= */

.bi-funky-balanced {

  --orange:#F0552C;
  --black:#080808;
  --cream:#EFE8DF;
  --yellow:#E5FF3C;

  position:relative;

  overflow:hidden;

  background:#080808;

  color:white;

}



/* =========================================================
   SUBTLE BACKGROUND
========================================================= */

.bi-fb-bg {

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),

    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

  opacity:.13;

  pointer-events:none;

}



/* =========================================================
   DECORATIVE SHAPES
========================================================= */

.bi-fb-shape {

  position:absolute;

  pointer-events:none;

  transition:
    transform .8s ease;

}


.shape-a {

  width:130px;

  height:130px;

  right:10%;

  top:9%;

  border-radius:
    46% 54% 62% 38% /
    56% 39% 61% 44%;

  background:
    rgba(240,85,44,.13);

  animation:
    biFbMorph 7s ease-in-out infinite;

}


.shape-b {

  width:85px;

  height:85px;

  left:42%;

  bottom:15%;

  border:
    16px solid
    rgba(229,255,60,.08);

  border-radius:50%;

}


@keyframes biFbMorph {

  50% {

    border-radius:
      63% 37% 42% 58% /
      38% 57% 43% 62%;

    transform:
      rotate(12deg);

  }

}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.bi-fb-wrap {

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:auto;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  gap:70px;

  align-items:center;

  min-height:570px;

  padding:
    68px 0 58px;

  position:relative;

  z-index:3;

}



/* =========================================================
   HEADLINE
========================================================= */

.bi-fb-copy h1 {

  margin:0;

  max-width:790px;

  letter-spacing:-.05em;

}



/* =========================================================
   DIGITAL MARKETING AGENCY
========================================================= */

.bi-fb-agency {

  display:inline-block;

  position:relative;

  font-size:
    clamp(48px,5.1vw,77px);

  line-height:.93;

  font-weight:750;

  color:#FFFFFF;

  animation:
    biFbReveal .8s ease .10s both;

}



/* ORANGE SWEEP */

.bi-fb-agency::before {

  content:
    "Digital Marketing Agency";

  position:absolute;

  inset:0;

  color:var(--orange);

  clip-path:
    inset(0 100% 0 0);

  animation:
    biFbSweep 4.2s ease-in-out infinite;

}


@keyframes biFbSweep {

  0%,
  15% {

    clip-path:
      inset(0 100% 0 0);

  }

  48% {

    clip-path:
      inset(0 0 0 0);

  }

  72%,
  100% {

    clip-path:
      inset(0 0 0 100%);

  }

}



/* =========================================================
   SCRIBBLE
========================================================= */

.bi-fb-scribble {

  position:absolute;

  left:4%;

  bottom:-8px;

  width:78%;

  height:7px;

  border-bottom:
    3px solid var(--orange);

  border-radius:50%;

  transform:
    rotate(-1deg)
    scaleX(0);

  transform-origin:left;

  animation:
    biFbScribble 1s ease .9s forwards;

}


@keyframes biFbScribble {

  to {

    transform:
      rotate(-1deg)
      scaleX(1);

  }

}



/* =========================================================
   SECOND HEADLINE LINE
========================================================= */

.bi-fb-main {

  display:block;

  margin-top:11px;

  font-size:
    clamp(39px,4vw,60px);

  line-height:.98;

  font-weight:650;

  color:
    rgba(255,255,255,.92);

  animation:
    biFbReveal .8s ease .17s both;

}


.bi-fb-main em {

  color:
    var(--orange);

  font-style:normal;

  display:inline-block;

  animation:
    biGrowBounce 3.5s ease-in-out infinite;

}


@keyframes biGrowBounce {

  50% {

    transform:
      rotate(-2deg)
      translateY(-2px);

  }

}



/* =========================================================
   NOT JUST LOOK GOOD
========================================================= */

.bi-fb-muted {

  display:block;

  margin-top:3px;

  font-size:
    clamp(34px,3.6vw,54px);

  line-height:1;

  font-weight:600;

  color:#FFFFFF;

  animation:
    biFbReveal .8s ease .22s both;

}



/* =========================================================
   DESCRIPTION
   UPDATED — BIGGER + WHITE
========================================================= */

.bi-fb-copy p {

  margin:
    27px 0 0;

  max-width:
    720px;

  font-size:
    16px;

  line-height:
    1.7;

  font-weight:
    450;

  color:
    #FFFFFF;

  opacity:
    .92;

  animation:
    biFbReveal .8s ease .28s both;

}



/* =========================================================
   BUTTONS
========================================================= */

.bi-fb-actions {

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:27px;

  animation:
    biFbReveal .8s ease .34s both;

}


.bi-fb-btn {

  min-height:49px;

  padding:
    0 20px;

  display:inline-flex;

  align-items:center;

  gap:14px;

  border-radius:3px;

  text-decoration:none;

  font-size:12.5px;

  font-weight:700;

  transition:
    all .3s ease;

}


.bi-fb-btn.primary {

  color:white;

  background:
    var(--orange);

}


.bi-fb-btn.primary:hover {

  transform:
    translateY(-4px)
    rotate(-1deg);

}


.bi-fb-btn.secondary {

  color:white;

  background:
    rgba(255,255,255,.02);

  border:
    1px solid
    rgba(255,255,255,.14);

}


.bi-fb-btn.secondary:hover {

  color:
    var(--orange);

  border-color:
    var(--orange);

  transform:
    translateY(-4px)
    rotate(1deg);

}



/* =========================================================
   RIGHT VISUAL
========================================================= */

.bi-fb-visual {

  position:relative;

}


.bi-fb-image-card {

  position:relative;

  width:100%;

  min-height:430px;

  border-radius:
    18px 18px 65px 18px;

  padding:13px;

  background:
    var(--cream);

  overflow:hidden;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.32);

  transition:
    transform .25s ease;

}



/* =========================================================
   IMAGE
========================================================= */

.bi-fb-image {

  position:absolute;

  inset:13px;

  border-radius:
    13px 13px 53px 13px;

  background-image:
    url("http://brandimprint.in/assets/uploads/2026/09/brand-imprint-hero-section.webp");

  background-size:
    cover;

  background-position:
    center;

}



/* =========================================================
   IMAGE LABEL
========================================================= */

.bi-fb-label {

  position:absolute;

  z-index:5;

  padding:
    8px 11px;

  font-size:8px;

  font-weight:800;

  letter-spacing:.13em;

}


.label-one {

  right:20px;

  bottom:29px;

  background:
    var(--orange);

  color:white;

  transform:
    rotate(-2.5deg);

}



/* =========================================================
   CIRCULAR BADGE
========================================================= */

.bi-fb-circle {

  position:absolute;

  z-index:6;

  right:25px;

  top:25px;

  width:92px;

  height:92px;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:
    var(--yellow);

  color:#111;

  font-size:9px;

  line-height:1.08;

  font-weight:900;

  transform:
    rotate(7deg);

  animation:
    biFbBadge 4.2s ease-in-out infinite;

}


.bi-fb-circle span {

  display:block;

  margin-right:3px;

}


@keyframes biFbBadge {

  50% {

    transform:
      translateY(-7px)
      rotate(11deg);

  }

}



/* =========================================================
   FLOATING TAG
========================================================= */

.bi-fb-tag {

  position:absolute;

  left:-24px;

  bottom:42px;

  z-index:7;

  padding:
    9px 12px;

  background:#fff;

  color:#111;

  font-size:8px;

  font-weight:900;

  letter-spacing:.11em;

  transform:
    rotate(-5deg);

  box-shadow:
    0 10px 24px
    rgba(0,0,0,.18);

}



/* =========================================================
   STATS
========================================================= */

.bi-fb-stats {

  width:
    min(
      1180px,
      calc(100% - 80px)
    );

  margin:
    0 auto 18px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:10px;

  position:relative;

  z-index:4;

}



/* =========================================================
   STAT CARD
========================================================= */

.bi-fb-stat {

  min-height:74px;

  padding:
    15px 18px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius:8px;

  background:
    rgba(255,255,255,.025);

  display:flex;

  flex-direction:column;

  justify-content:center;

  transition:
    transform .3s ease,
    border-color .3s ease;

}


.bi-fb-stat:hover {

  transform:
    translateY(-4px);

  border-color:
    rgba(240,85,44,.45);

}



/* =========================================================
   TILTED STAT
========================================================= */

.bi-fb-stat.tilted {

  transform:
    rotate(-1.3deg);

}


.bi-fb-stat.tilted:hover {

  transform:
    rotate(0deg)
    translateY(-4px);

}



/* =========================================================
   ORANGE STAT
========================================================= */

.bi-fb-stat.orange-stat {

  background:
    rgba(240,85,44,.08);

}



/* =========================================================
   STAT NUMBERS
========================================================= */

.bi-fb-stat strong {

  font-size:
    23px;

  line-height:
    1.1;

  letter-spacing:
    -.03em;

  color:
    #FFFFFF;

}



/* NATIONAL REMAINS ORANGE */

.bi-fb-stat.orange-stat strong {

  color:
    var(--orange);

}



/* =========================================================
   STAT LABELS
   UPDATED — WHITE
========================================================= */

.bi-fb-stat span {

  margin-top:
    6px;

  color:
    #FFFFFF;

  opacity:
    .82;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.3;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;

}



/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

@keyframes biFbReveal {

  from {

    opacity:0;

    transform:
      translateY(20px);

  }

  to {

    opacity:1;

    transform:
      translateY(0);

  }

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .bi-fb-wrap {

    width:
      calc(100% - 50px);

    grid-template-columns:
      1fr;

    gap:40px;

  }


  .bi-fb-visual {

    max-width:
      720px;

  }


  .bi-fb-stats {

    width:
      calc(100% - 50px);

  }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width:767px) {

  .bi-fb-wrap {

    width:
      calc(100% - 30px);

    min-height:auto;

    padding:
      70px 0 42px;

  }


  .bi-fb-agency {

    font-size:
      clamp(41px,10.5vw,52px);

  }


  .bi-fb-main {

    font-size:
      clamp(35px,9vw,45px);

  }


  .bi-fb-muted {

    font-size:
      clamp(31px,8vw,39px);

    color:
      #FFFFFF;

  }


  /* MOBILE DESCRIPTION */

  .bi-fb-copy p {

    margin-top:
      22px;

    font-size:
      15px;

    line-height:
      1.65;

    color:
      #FFFFFF;

    opacity:
      .92;

  }


  .bi-fb-actions {

    flex-direction:
      column;

  }


  .bi-fb-btn {

    width:
      100%;

    justify-content:
      center;

  }


  .bi-fb-image-card {

    min-height:
      350px;

  }


  /* MOBILE STATS */

  .bi-fb-stats {

    width:
      calc(100% - 30px);

    grid-template-columns:
      repeat(2,1fr);

  }


  .bi-fb-stat {

    min-height:
      82px;

    padding:
      15px;

  }


  .bi-fb-stat strong {

    font-size:
      21px;

  }


  .bi-fb-stat span {

    font-size:
      8px;

    color:
      #FFFFFF;

    opacity:
      .85;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-17ad85c *//* =========================================================
   BRAND IMPRINT — ABOUT SECTION
   ========================================================= */

.bi-about{

  --orange:#F0552C;
  --lime:#DFFF46;
  --cream:#F3EEE6;
  --black:#090909;
  --white:#FFFFFF;

  position:relative;
  overflow:hidden;

  background:var(--cream);
  color:#111;

  padding:110px 0 0;

}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.bi-about-grid{

  position:absolute;
  inset:0;

  background-image:
    linear-gradient(
      rgba(0,0,0,.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,0,0,.045) 1px,
      transparent 1px
    );

  background-size:90px 90px;

  pointer-events:none;

}


/* =========================================================
   BACKGROUND ORB
   ========================================================= */

.bi-about-orb{

  position:absolute;

  width:420px;
  height:420px;

  right:-100px;
  top:120px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(240,85,44,.18),
      rgba(240,85,44,.06) 45%,
      transparent 70%
    );

  pointer-events:none;

  transition:
    transform .5s cubic-bezier(.16,1,.3,1);

}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.bi-about-container{

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:auto;

  position:relative;

  z-index:2;

}


/* =========================================================
   TOP INTRO
   ========================================================= */

.bi-about-top{

  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .8s ease,
    transform .9s cubic-bezier(.16,1,.3,1);

}


.bi-about-top.bi-visible{

  opacity:1;

  transform:translateY(0);

}


/* =========================================================
   WHO WE ARE
   ========================================================= */

.bi-about-eyebrow{

  display:flex;

  align-items:center;

  gap:16px;

  margin-bottom:35px;

  font-size:15px;

  font-weight:900;

  letter-spacing:.18em;

  color:#111 !important;

}


.bi-about-eyebrow strong{

  display:block;

  color:#111 !important;

  font-size:15px;

  font-weight:900;

  letter-spacing:.18em;

}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.bi-about-heading-wrap{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:50px;

}


.bi-about-heading-wrap h2{

  margin:0;

  max-width:1000px;

  font-size:
    clamp(
      65px,
      7.5vw,
      115px
    );

  line-height:.86;

  letter-spacing:-.07em;

  font-weight:900;

  color:#111 !important;

}


.bi-about-location{

  display:block;

  position:relative;

  color:var(--orange) !important;

}


.bi-about-location i{

  position:absolute;

  width:110px;
  height:8px;

  left:4px;
  bottom:-15px;

  background:var(--lime);

  transform:rotate(-2deg);

}


/* =========================================================
   STORY
   ========================================================= */

.bi-about-story{

  display:grid;

  grid-template-columns:
    minmax(300px,.9fr)
    minmax(350px,1fr);

  gap:90px;

  margin-top:95px;

  padding-bottom:90px;

}


/* =========================================================
   BIG STATEMENT
   ========================================================= */

.bi-about-statement{

  position:relative;

  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .8s ease,
    transform .9s cubic-bezier(.16,1,.3,1);

}


.bi-about-statement.bi-visible{

  opacity:1;

  transform:translateY(0);

}


.bi-about-quote{

  position:absolute;

  top:-45px;
  left:-10px;

  font-size:110px;

  line-height:1;

  font-weight:900;

  color:var(--orange) !important;

  opacity:.9;

}


.bi-about-statement p{

  position:relative;

  margin:0;

  max-width:650px;

  font-size:
    clamp(
      38px,
      4vw,
      62px
    );

  line-height:.98;

  letter-spacing:-.055em;

  font-weight:900;

  color:#111 !important;

}


.bi-about-statement em{

  color:var(--orange) !important;

  font-style:normal;

}


.bi-about-arrow{

  margin-top:35px;

  width:55px;
  height:55px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#111;

  color:#fff !important;

  font-size:25px;

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.bi-about-description{

  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .8s ease,
    transform .9s cubic-bezier(.16,1,.3,1);

}


.bi-about-description.bi-visible{

  opacity:1;

  transform:translateY(0);

}


.bi-about-description p{

  margin:0 0 30px;

  max-width:650px;

  font-size:17px;

  line-height:1.8;

  color:#222 !important;

}


.bi-about-description strong{

  color:#111 !important;

  font-weight:900;

}


/* =========================================================
   LOCATION MARQUEE
   ========================================================= */

.bi-about-marquee{

  width:100%;

  overflow:hidden;

  background:#111;

  color:#fff;

  padding:19px 0;

  transform:rotate(-1deg) scale(1.02);

}


.bi-about-marquee-track{

  display:flex;

  align-items:center;

  width:max-content;

  gap:30px;

  animation:
    biAboutMarquee 28s linear infinite;

}


.bi-about-marquee span{

  font-size:12px;

  font-weight:900;

  letter-spacing:.16em;

  white-space:nowrap;

  color:#fff !important;

}


.bi-about-marquee i{

  color:var(--orange) !important;

  font-size:12px;

  font-style:normal;

}


@keyframes biAboutMarquee{

  from{

    transform:translateX(0);

  }

  to{

    transform:translateX(-50%);

  }

}


/* =========================================================
   WHY BRANDS STICK
   ========================================================= */

.bi-stick-section{

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:
    100px auto 0;

  padding-bottom:110px;

}


/* =========================================================
   NEW WHY BRANDS HEADER
   ========================================================= */

.bi-stick-header{

  display:flex;

  justify-content:space-between;

  align-items:flex-end;

  margin-bottom:45px;

  opacity:0;

  transform:translateY(30px);

  transition:
    opacity .8s ease,
    transform .9s cubic-bezier(.16,1,.3,1);

}


.bi-stick-header.bi-visible{

  opacity:1;

  transform:translateY(0);

}


/* heading block */

.bi-stick-heading-block{

  display:block;

}


/* =========================================================
   05 REASONS — NOW LARGE
   ========================================================= */

.bi-stick-number{

  display:block;

  margin:0 0 8px;

  font-size:
    clamp(
      28px,
      3vw,
      48px
    );

  line-height:.9;

  font-weight:900;

  letter-spacing:-.045em;

  color:#111 !important;

}


/* =========================================================
   MAIN WHY BRANDS HEADING
   ========================================================= */

.bi-stick-header h3{

  margin:0;

  font-size:
    clamp(
      58px,
      7vw,
      108px
    );

  line-height:.82;

  letter-spacing:-.075em;

  font-weight:900;

  color:#111 !important;

}


.bi-stick-header h3 span{

  display:block;

  color:var(--orange) !important;

}


/* =========================================================
   DOODLE
   ========================================================= */

.bi-stick-doodle{

  width:60px;
  height:60px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:2px solid #111;

  border-radius:50%;

  font-size:25px;

  color:#111 !important;

  flex-shrink:0;

}


/* =========================================================
   CARD GRID
   ========================================================= */

.bi-stick-grid{

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:15px;

}


.bi-stick-card{

  position:relative;

  min-height:390px;

  padding:25px;

  border-radius:
    10px 10px 45px 10px;

  overflow:hidden;

  opacity:0;

  transform:translateY(35px);

  transition:
    opacity .7s ease,
    transform .8s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease;

}


.bi-stick-card.bi-visible{

  opacity:1;

  transform:translateY(0);

}


.bi-stick-card:hover{

  transform:
    translateY(-10px)
    rotate(-1deg);

  box-shadow:
    12px 18px 35px rgba(0,0,0,.15);

}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.bi-card-no{

  font-size:10px;

  font-weight:900;

  letter-spacing:.08em;

  opacity:.65;

}


/* =========================================================
   CARD ICON
   ========================================================= */

.bi-card-icon{

  margin-top:35px;

  width:50px;
  height:50px;

  display:flex;

  align-items:center;
  justify-content:center;

  border:2px solid currentColor;

  border-radius:50%;

  font-size:22px;

}


/* =========================================================
   CARD HEADINGS
   ========================================================= */

.bi-stick-card h4{

  margin:
    30px 0 0;

  font-size:
    clamp(
      28px,
      2.3vw,
      38px
    );

  line-height:.92;

  letter-spacing:-.055em;

  font-weight:900;

}


/* CARD 1 */

.bi-stick-card.card-dark h4{

  color:#FFFFFF !important;

}


/* CARD 2 */

.bi-stick-card.card-orange h4{

  color:#FFFFFF !important;

}


/* CARD 3 */

.bi-stick-card.card-outline h4{

  color:#111111 !important;

}


/* CARD 4 */

.bi-stick-card.card-yellow h4{

  color:#111111 !important;

}


/* =========================================================
   CARD BODY TEXT
   ========================================================= */

.bi-stick-card p{

  margin-top:22px;

  max-width:300px;

  font-size:13px;

  line-height:1.65;

}


/* DARK CARD */

.bi-stick-card.card-dark p{

  color:#FFFFFF !important;

}


/* ORANGE CARD */

.bi-stick-card.card-orange p{

  color:#FFFFFF !important;

}


/* WHITE CARD */

.bi-stick-card.card-outline p{

  color:#111111 !important;

}


/* LIME CARD */

.bi-stick-card.card-yellow p{

  color:#111111 !important;

}


/* =========================================================
   CARD TAG
   ========================================================= */

.bi-card-tag{

  position:absolute;

  left:25px;
  bottom:25px;

  font-size:8px;

  font-weight:900;

  letter-spacing:.12em;

}


/* =========================================================
   CARD COLOURS
   ========================================================= */

.card-dark{

  background:#111 !important;

  color:#fff !important;

}


.card-dark .bi-card-tag{

  color:var(--lime) !important;

}


.card-orange{

  background:var(--orange) !important;

  color:#fff !important;

}


.card-orange .bi-card-tag{

  color:#111 !important;

}


.card-outline{

  background:#fff !important;

  color:#111 !important;

  border:1px solid rgba(0,0,0,.15);

}


.card-outline .bi-card-tag{

  color:var(--orange) !important;

}


.card-yellow{

  background:var(--lime) !important;

  color:#111 !important;

}


.card-yellow .bi-card-tag{

  color:var(--orange) !important;

}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1050px){

  .bi-about-container{

    width:calc(100% - 50px);

  }


  .bi-about-story{

    gap:50px;

  }


  .bi-stick-section{

    width:calc(100% - 50px);

  }


  .bi-stick-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .bi-stick-number{

    font-size:38px;

  }


  .bi-stick-header h3{

    font-size:70px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:767px){

  .bi-about{

    padding-top:75px;

  }


  .bi-about-container{

    width:calc(100% - 30px);

  }


  /* WHO WE ARE */

  .bi-about-eyebrow{

    gap:12px;

    margin-bottom:28px;

    font-size:11px;

  }


  .bi-about-eyebrow strong{

    font-size:15px;

    letter-spacing:.16em;

  }


  .bi-about-heading-wrap{

    display:block;

  }


  .bi-about-heading-wrap h2{

    font-size:
      clamp(
        48px,
        14vw,
        70px
      );

    line-height:.9;

  }


  .bi-about-location i{

    width:80px;

    height:6px;

    bottom:-10px;

  }


  /* STORY */

  .bi-about-story{

    grid-template-columns:1fr;

    gap:55px;

    margin-top:70px;

    padding-bottom:65px;

  }


  .bi-about-statement p{

    font-size:
      clamp(
        36px,
        10vw,
        50px
      );

  }


  .bi-about-description p{

    font-size:15px;

    line-height:1.7;

  }


  .bi-about-orb{

    width:280px;
    height:280px;

    right:-140px;

    top:100px;

  }


  /* MARQUEE */

  .bi-about-marquee{

    padding:16px 0;

  }


  .bi-about-marquee-track{

    gap:22px;

    animation-duration:22s;

  }


  .bi-about-marquee span{

    font-size:9px;

  }


  /* =====================================================
     STICK SECTION MOBILE
     ===================================================== */

  .bi-stick-section{

    width:calc(100% - 30px);

    margin-top:75px;

    padding-bottom:75px;

  }


  .bi-stick-header{

    align-items:flex-start;

    margin-bottom:35px;

  }


  .bi-stick-heading-block{

    width:calc(100% - 55px);

  }


  /* BIG 05 REASONS */

  .bi-stick-number{

    margin-bottom:10px;

    font-size:
      clamp(
        26px,
        8vw,
        38px
      );

    line-height:.9;

    letter-spacing:-.04em;

  }


  /* BIG MAIN HEADING */

  .bi-stick-header h3{

    font-size:
      clamp(
        50px,
        14vw,
        68px
      );

    line-height:.84;

    letter-spacing:-.065em;

  }


  .bi-stick-doodle{

    width:45px;
    height:45px;

    font-size:20px;

    flex-shrink:0;

  }


  /* CARDS */

  .bi-stick-grid{

    grid-template-columns:1fr;

    gap:12px;

  }


  .bi-stick-card{

    min-height:330px;

  }


  .bi-stick-card h4{

    font-size:34px;

  }


  /* FORCE HEADING COLOURS */

  .bi-stick-card.card-dark h4{

    color:#FFFFFF !important;

  }


  .bi-stick-card.card-orange h4{

    color:#FFFFFF !important;

  }


  .bi-stick-card.card-outline h4{

    color:#111111 !important;

  }


  .bi-stick-card.card-yellow h4{

    color:#111111 !important;

  }


  /* FORCE BODY COLOURS */

  .bi-stick-card.card-dark p{

    color:#FFFFFF !important;

  }


  .bi-stick-card.card-orange p{

    color:#FFFFFF !important;

  }


  .bi-stick-card.card-outline p{

    color:#111111 !important;

  }


  .bi-stick-card.card-yellow p{

    color:#111111 !important;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

  .bi-about-marquee-track{

    animation:none;

  }


  .bi-about *,
  .bi-stick-card{

    transition:none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6aa2cde *//* =====================================================
   BRAND IMPRINT — SERVICES SECTION
===================================================== */

.bi-funky-services{

  --orange:#F0552C;
  --yellow:#DFFF46;
  --cream:#F1EBE2;
  --lavender:#BCA5FF;
  --black:#080808;
  --white:#FFFFFF;

  position:relative;
  overflow:hidden;

  padding:110px 0 100px;

  background:#080808;

  color:#FFFFFF;

}


/* =====================================================
   BACKGROUND
===================================================== */

.bi-funky-bgword{

  position:absolute;

  pointer-events:none;
  user-select:none;

  font-size:
    clamp(140px,19vw,300px);

  font-weight:900;

  line-height:.75;

  letter-spacing:-.09em;

}


.bgword-one{

  top:40px;
  right:-80px;

  color:rgba(255,255,255,.035);

  transform:rotate(-5deg);

}


.bgword-two{

  bottom:-50px;
  left:-80px;

  color:rgba(240,85,44,.035);

  transform:rotate(5deg);

}


/* =====================================================
   MAIN WRAPPER
===================================================== */

.bi-funky-wrap{

  width:
    min(
      1360px,
      calc(100% - 70px)
    );

  margin:0 auto;

  position:relative;

  z-index:2;

}


/* =====================================================
   KICKER
===================================================== */

.bi-funky-kicker{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:20px;

  color:#FFFFFF !important;

  font-size:11px;

  font-weight:900;

  letter-spacing:.18em;

  opacity:0;

  transform:translateY(15px);

}


.bi-funky-kicker span{

  width:32px;
  height:3px;

  background:var(--orange);

}


/* =====================================================
   HEADER
===================================================== */

.bi-funky-heading-row{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    400px;

  align-items:end;

  gap:60px;

  margin-bottom:42px;

}


.bi-funky-heading-row h2{

  margin:0;

  color:#FFFFFF !important;

  font-size:
    clamp(52px,5.3vw,82px);

  line-height:.91;

  letter-spacing:-.055em;

  font-weight:900;

  opacity:0;

  transform:translateY(25px);

}


.bi-funky-heading-row h2 span{

  display:block;

  color:var(--orange) !important;

}


.bi-funky-heading-row p{

  margin:0;

  color:#FFFFFF !important;

  font-size:16px;

  line-height:1.65;

  font-weight:500;

  opacity:0;

  transform:translateY(20px);

}


/* =====================================================
   MARQUEE
===================================================== */

.bi-service-marquee{

  overflow:hidden;

  padding:14px 0;

  margin-bottom:28px;

  border-top:
    1px solid
    rgba(255,255,255,.20);

  border-bottom:
    1px solid
    rgba(255,255,255,.20);

  transform:rotate(-1deg);

}


.bi-service-marquee-track{

  display:flex;

  align-items:center;

  gap:30px;

  width:max-content;

  animation:
    biServiceMove
    28s linear infinite;

}


.bi-service-marquee-track span{

  color:#FFFFFF !important;

  font-size:13px;

  font-weight:900;

  letter-spacing:.11em;

  white-space:nowrap;

}


.bi-service-marquee-track i{

  color:var(--orange) !important;

  font-style:normal;

}


@keyframes biServiceMove{

  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }

}


/* =====================================================
   SERVICE GRID
===================================================== */

.bi-service-collage{

  display:grid;

  grid-template-columns:
    1.1fr
    .9fr
    1fr;

  gap:18px;

}


/* =====================================================
   CARD
===================================================== */

.bi-funky-card{

  --rotateX:0deg;
  --rotateY:0deg;

  position:relative;

  min-height:430px;

  overflow:hidden;

  display:flex;

  flex-direction:column;

  padding:25px;

  border-radius:
    13px 13px 45px 13px;

  transform:
    perspective(1200px)
    rotateX(var(--rotateX))
    rotateY(var(--rotateY));

  transition:
    transform .2s ease,
    box-shadow .35s ease;

  opacity:0;

}


.bi-funky-card:hover{

  box-shadow:
    0 25px 65px
    rgba(0,0,0,.40);

}


/* =====================================================
   CARD BACKGROUNDS
===================================================== */

.card-social{

  background:var(--orange);
  color:#FFFFFF;

}


.card-seo{

  background:var(--cream);
  color:#111111;

}


.card-performance{

  background:var(--yellow);
  color:#111111;

}


.card-web{

  background:#151515;
  color:#FFFFFF;

  border:
    1px solid
    rgba(255,255,255,.17);

}


.card-creative{

  background:var(--lavender);
  color:#111111;

}


.card-app{

  background:var(--cream);
  color:#111111;

}


/* =====================================================
   CARD TOP
===================================================== */

.bi-card-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  position:relative;

  z-index:10;

  flex-shrink:0;

}


.bi-card-no{

  color:currentColor !important;

  font-size:11px;

  font-weight:900;

  letter-spacing:.15em;

}


.bi-card-chip{

  padding:8px 12px;

  border:
    1px solid
    currentColor;

  border-radius:100px;

  color:currentColor !important;

  font-size:8px;

  font-weight:900;

  letter-spacing:.09em;

  white-space:nowrap;

}


/* =====================================================
   VISUAL AREA
===================================================== */

.bi-card-visual{

  position:relative;

  min-height:205px;

  flex:1 1 auto;

  margin:
    15px 0 18px;

  overflow:hidden;

}


/* =====================================================
   CARD COPY
===================================================== */

.bi-card-copy{

  position:relative;

  z-index:15;

  flex-shrink:0;

  padding-right:22px;

}


.bi-card-copy h3{

  margin:0;

  color:currentColor !important;

  font-size:
    clamp(26px,2vw,34px);

  line-height:1.02;

  letter-spacing:-.045em;

  font-weight:900;

}


.bi-card-copy p{

  margin:11px 0 0;

  color:currentColor !important;

  font-size:16px;

  line-height:1.55;

  font-weight:500;

}


/* explicit card colours */

.card-social .bi-card-copy h3,
.card-social .bi-card-copy p,
.card-web .bi-card-copy h3,
.card-web .bi-card-copy p{

  color:#FFFFFF !important;

}


.card-seo .bi-card-copy h3,
.card-seo .bi-card-copy p,
.card-performance .bi-card-copy h3,
.card-performance .bi-card-copy p,
.card-creative .bi-card-copy h3,
.card-creative .bi-card-copy p,
.card-app .bi-card-copy h3,
.card-app .bi-card-copy p{

  color:#111111 !important;

}


/* =====================================================
   ARROW
===================================================== */

.bi-card-arrow{

  position:absolute;

  right:23px;
  bottom:22px;

  z-index:30;

  color:currentColor !important;

  font-size:23px;

  font-weight:900;

  transition:
    transform .3s ease;

}


.bi-funky-card:hover
.bi-card-arrow{

  transform:
    translate(5px,-5px);

}


/* =====================================================
   SOCIAL VISUAL
===================================================== */

.social-visual{

  display:flex;

  align-items:center;

}


.bi-social-word{

  position:absolute;

  left:-5px;
  top:50%;

  transform:
    translateY(-50%);

  color:#FFFFFF !important;

  font-size:
    clamp(70px,8vw,115px);

  line-height:.8;

  letter-spacing:-.09em;

  font-weight:900;

}


.bi-social-ring{

  position:absolute;

  right:-35px;
  top:-15px;

  width:210px;
  height:210px;

  border:
    25px solid
    rgba(255,255,255,.20);

  border-radius:50%;

  animation:
    socialRotate
    9s linear infinite;

}


@keyframes socialRotate{

  to{
    transform:rotate(360deg);
  }

}


/* =====================================================
   SEO VISUAL
===================================================== */

.seo-visual{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:
    0 4px;

}


.seo-lines{

  display:flex;

  flex-direction:column;

  gap:12px;

  width:55%;

}


.seo-lines span{

  display:block;

  height:10px;

  border-radius:100px;

  background:
    rgba(0,0,0,.15);

}


.seo-lines span:nth-child(1){

  width:100%;

  background:
    var(--orange);

}


.seo-lines span:nth-child(2){
  width:82%;
}


.seo-lines span:nth-child(3){
  width:65%;
}


.seo-lines span:nth-child(4){
  width:48%;
}


.seo-search-circle{

  width:125px;
  height:125px;

  flex-shrink:0;

  display:flex;

  align-items:center;
  justify-content:center;

  border:
    7px solid
    var(--orange);

  border-radius:50%;

  transform:rotate(-12deg);

}


.seo-search-circle span{

  color:
    var(--orange) !important;

  font-size:70px;

  line-height:1;

}


/* =====================================================
   PERFORMANCE
===================================================== */

.performance-visual{

  display:flex;

  align-items:center;
  justify-content:center;

}


.performance-symbol{

  position:relative;

  z-index:5;

  color:#111111 !important;

  font-size:125px;

  line-height:1;

  font-weight:900;

}


.performance-ring{

  position:absolute;

  left:50%;
  top:50%;

  border:
    2px solid
    rgba(0,0,0,.25);

  border-radius:50%;

}


.ring-one{

  width:190px;
  height:190px;

  margin:
    -95px 0 0 -95px;

  animation:
    performanceSpin
    8s linear infinite;

}


.ring-two{

  width:245px;
  height:105px;

  margin:
    -52px 0 0 -122px;

  transform:rotate(30deg);

  animation:
    performanceSpinTwo
    10s linear infinite;

}


@keyframes performanceSpin{

  to{
    transform:rotate(360deg);
  }

}


@keyframes performanceSpinTwo{

  to{
    transform:rotate(390deg);
  }

}


/* =====================================================
   WEBSITE VISUAL
===================================================== */

.web-visual{

  min-height:205px;

}


.bi-web-browser{

  position:absolute;

  inset:
    5px 0 auto;

  height:180px;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius:13px;

  background:#0B0B0B;

  transform:rotate(-1deg);

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.35);

}


.bi-browser-top{

  height:35px;

  display:flex;

  align-items:center;

  gap:12px;

  padding:0 12px;

  border-bottom:
    1px solid
    rgba(255,255,255,.12);

}


.bi-browser-dots{

  display:flex;
  gap:5px;

}


.bi-browser-dots span{

  width:7px;
  height:7px;

  border-radius:50%;

  background:
    var(--orange);

}


.bi-browser-address{

  flex:1;

  height:21px;

  display:flex;

  align-items:center;

  padding:0 10px;

  border-radius:100px;

  background:#202020;

  color:#FFFFFF !important;

  font-size:8px;

}


.bi-browser-content{

  display:grid;

  grid-template-columns:50px 1fr;

  height:
    calc(100% - 35px);

}


.bi-browser-sidebar{

  display:flex;

  flex-direction:column;

  gap:11px;

  padding:16px 10px;

  border-right:
    1px solid
    rgba(255,255,255,.10);

}


.bi-browser-sidebar span{

  width:25px;
  height:5px;

  border-radius:100px;

  background:
    rgba(255,255,255,.25);

}


.bi-browser-sidebar span:first-child{

  background:
    var(--orange);

}


.bi-browser-main{

  padding:17px;

}


.bi-browser-heading{

  color:#FFFFFF !important;

  font-size:28px;

  line-height:.82;

  font-weight:900;

  letter-spacing:-.05em;

}


.bi-browser-heading strong{

  display:block;

  color:var(--orange) !important;

}


.bi-browser-line{

  width:75%;

  height:6px;

  margin-top:12px;

  border-radius:100px;

  background:
    rgba(255,255,255,.17);

}


.bi-browser-line.short{

  width:50%;

  margin-top:8px;

}


.bi-browser-button{

  display:inline-flex;

  margin-top:13px;

  padding:7px 11px;

  background:
    var(--orange);

  color:#FFFFFF !important;

  font-size:8px;

  font-weight:900;

}


/* =====================================================
   CREATIVE — ANIMATED DRAWING
===================================================== */

.creative-visual{

  min-height:205px;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    0 4px;

  overflow:hidden;

}


/* DRAWING BOARD */

.creative-drawing-board{

  position:relative;

  width:100%;

  height:205px;

  overflow:hidden;

}


/* =====================================================
   SVG DRAWING
===================================================== */

.creative-drawing-svg{

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:100%;

  overflow:visible;

}


/* COMMON DRAWING STROKE */

.creative-path{

  fill:none;

  stroke:#111111;

  stroke-width:3;

  stroke-linecap:round;

  stroke-linejoin:round;

  stroke-dasharray:900;

  stroke-dashoffset:900;

  animation:
    creativeDraw
    3.2s
    cubic-bezier(.65,0,.35,1)
    forwards;

}


/* ROUGH CIRCLE */

.creative-circle{

  stroke-width:4;

  animation-delay:
    .15s;

}


/* GUIDE LINE */

.creative-guide{

  stroke:
    rgba(17,17,17,.38);

  stroke-width:2;

  stroke-dasharray:500;

  stroke-dashoffset:500;

  animation-delay:
    .8s;

}


/* DIAGONAL */

.creative-diagonal{

  stroke:
    var(--orange);

  stroke-width:4;

  stroke-dasharray:500;

  stroke-dashoffset:500;

  animation-delay:
    1.25s;

}


/* SWOOSH */

.creative-swoosh{

  stroke:
    #111111;

  stroke-width:3;

  stroke-dasharray:400;

  stroke-dashoffset:400;

  animation-delay:
    1.7s;

}


@keyframes creativeDraw{

  to{

    stroke-dashoffset:0;

  }

}


/* =====================================================
   CREATIVE SPARKS
===================================================== */

.creative-spark{

  position:absolute;

  z-index:5;

  color:#111111;

  font-weight:900;

  opacity:0;

}


.spark-one{

  right:17%;

  top:16%;

  color:var(--orange);

  font-size:28px;

  animation:
    creativeSpark
    3.5s
    ease-in-out
    1.8s
    infinite;

}


.spark-two{

  left:17%;

  bottom:17%;

  font-size:22px;

  animation:
    creativeSpark
    3.5s
    ease-in-out
    2.1s
    infinite;

}


@keyframes creativeSpark{

  0%{

    opacity:0;

    transform:
      scale(.3)
      rotate(-30deg);

  }

  35%{

    opacity:1;

    transform:
      scale(1)
      rotate(0deg);

  }

  65%{

    opacity:1;

    transform:
      scale(1.08)
      rotate(8deg);

  }

  100%{

    opacity:0;

    transform:
      scale(.5)
      rotate(20deg);

  }

}


/* =====================================================
   FLOATING DOTS
===================================================== */

.creative-dot{

  position:absolute;

  width:7px;
  height:7px;

  border-radius:50%;

  background:#111111;

  opacity:.3;

  animation:
    creativeFloat
    3s
    ease-in-out
    infinite;

}


.dot-one{

  left:10%;

  top:25%;

}


.dot-two{

  right:10%;

  top:65%;

  width:5px;
  height:5px;

  animation-delay:
    .7s;

}


.dot-three{

  left:31%;

  bottom:12%;

  width:4px;
  height:4px;

  animation-delay:
    1.2s;

}


@keyframes creativeFloat{

  0%,
  100%{

    transform:
      translateY(0);

  }

  50%{

    transform:
      translateY(-7px);

  }

}


/* =====================================================
   ANIMATED PENCIL
===================================================== */

.creative-pencil{

  position:absolute;

  z-index:8;

  width:92px;

  height:16px;

  right:3%;

  top:35%;

  transform:
    rotate(-32deg)
    translateX(80px);

  transform-origin:
    center center;

  animation:
    creativePencil
    4.8s
    cubic-bezier(.65,0,.35,1)
    infinite;

}


/* pencil body */

.pencil-body{

  position:absolute;

  left:16px;

  top:0;

  width:58px;

  height:16px;

  background:#111111;

  border-radius:
    2px 0 0 2px;

}


/* orange pencil section */

.pencil-band{

  position:absolute;

  left:16px;

  top:0;

  width:11px;

  height:16px;

  background:
    var(--orange);

}


/* eraser */

.pencil-eraser{

  position:absolute;

  right:0;

  top:0;

  width:18px;

  height:16px;

  background:
    #E8A5B4;

  border-radius:
    0 3px 3px 0;

}


/* pencil tip */

.pencil-tip{

  position:absolute;

  left:0;

  top:0;

  width:0;

  height:0;

  border-top:
    8px solid transparent;

  border-bottom:
    8px solid transparent;

  border-right:
    18px solid #111111;

}


.pencil-tip::after{

  content:"";

  position:absolute;

  left:14px;

  top:-2px;

  width:0;
  height:0;

  border-top:
    2px solid transparent;

  border-bottom:
    2px solid transparent;

  border-right:
    5px solid #F1EBE2;

}


@keyframes creativePencil{

  0%{

    opacity:0;

    transform:
      rotate(-32deg)
      translateX(100px);

  }

  12%{

    opacity:1;

  }

  30%{

    transform:
      rotate(-32deg)
      translateX(0);

  }

  55%{

    transform:
      rotate(-25deg)
      translateX(-10px);

  }

  72%{

    transform:
      rotate(-32deg)
      translateX(5px);

  }

  85%{

    opacity:1;

  }

  100%{

    opacity:0;

    transform:
      rotate(-32deg)
      translateX(100px);

  }

}


/* =====================================================
   DESIGN LABEL
===================================================== */

.creative-label{

  position:absolute;

  left:7%;

  top:12%;

  z-index:7;

  display:flex;

  align-items:center;

  gap:7px;

  padding:
    7px 10px;

  background:
    rgba(255,255,255,.42);

  border:
    1px solid
    rgba(0,0,0,.18);

  backdrop-filter:
    blur(5px);

  transform:
    rotate(-4deg);

  opacity:0;

  animation:
    creativeLabel
    4.8s
    ease
    2s
    infinite;

}


.creative-label span{

  color:
    rgba(17,17,17,.45);

  font-size:7px;

  font-weight:900;

  letter-spacing:.1em;

}


.creative-label b{

  color:#111111;

  font-size:8px;

  font-weight:900;

}


@keyframes creativeLabel{

  0%,
  20%{

    opacity:0;

    transform:
      rotate(-4deg)
      translateY(5px);

  }

  35%,
  75%{

    opacity:1;

    transform:
      rotate(-4deg)
      translateY(0);

  }

  90%,
  100%{

    opacity:0;

    transform:
      rotate(-4deg)
      translateY(-4px);

  }

}


/* =====================================================
   CREATIVE HOVER
===================================================== */

.card-creative:hover
.creative-drawing-board{

  transform:
    scale(1.025);

}


.card-creative:hover
.creative-pencil{

  animation-play-state:
    running;

}


.card-creative:hover
.creative-spark{

  animation-duration:
    2.5s;

}


/* =====================================================
   APP / SOFTWARE
===================================================== */

.app-visual{

  display:flex;

  align-items:center;

  justify-content:flex-start;

  gap:30px;

  padding:
    12px 10px 12px 14px;

  overflow:visible;

}


.bi-phone{

  position:relative;

  flex:0 0 auto;

  width:105px;
  height:175px;

  padding:8px;

  border:
    3px solid
    #111111;

  border-radius:22px;

  transform:
    rotate(6deg);

  transform-origin:
    center center;

  margin:
    0 5px 0 4px;

  box-sizing:border-box;

}


.bi-phone-screen{

  width:100%;
  height:100%;

  position:relative;

  overflow:hidden;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:15px;

  background:
    var(--orange);

}


.bi-phone-notch{

  position:absolute;

  top:6px;
  left:50%;

  width:35px;
  height:5px;

  transform:
    translateX(-50%);

  border-radius:100px;

  background:#111111;

}


.bi-phone-content{

  display:flex;

  flex-direction:column;

  gap:10px;

  width:65%;

}


.bi-phone-content span{

  display:block;

  height:8px;

  border-radius:100px;

  background:#FFFFFF;

}


.bi-phone-content span:nth-child(2){

  width:75%;

}


.bi-phone-content span:nth-child(3){

  width:50%;

}


.bi-app-tags{

  display:flex;

  flex-direction:column;

  align-items:flex-start;

  gap:10px;

  flex:0 0 auto;

}


.bi-app-tags span{

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:74px;

  min-height:42px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(0,0,0,.30);

  border-radius:100px;

  color:#111111 !important;

  font-size:9px;

  font-weight:900;

  box-sizing:border-box;

}


/* =====================================================
   CTA
===================================================== */

.bi-funky-cta-row{

  display:flex;

  justify-content:center;

  margin-top:45px;

}


.bi-funky-cta{

  display:flex;

  align-items:center;

  gap:18px;

  text-decoration:none;

  color:#FFFFFF !important;

  font-size:16px;

  font-weight:900;

}


.bi-funky-cta b{

  width:48px;
  height:48px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
    var(--orange);

  color:#FFFFFF !important;

  font-size:20px;

  transition:
    transform .3s ease;

}


.bi-funky-cta:hover b{

  transform:
    rotate(45deg);

}


/* =====================================================
   REVEAL
===================================================== */

.bi-funky-visible
.bi-funky-kicker{

  animation:
    serviceReveal
    .6s ease forwards;

}


.bi-funky-visible
.bi-funky-heading-row h2{

  animation:
    serviceReveal
    .8s ease .08s forwards;

}


.bi-funky-visible
.bi-funky-heading-row p{

  animation:
    serviceReveal
    .8s ease .15s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(1){

  animation:
    cardReveal
    .65s ease .15s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(2){

  animation:
    cardReveal
    .65s ease .21s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(3){

  animation:
    cardReveal
    .65s ease .27s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(4){

  animation:
    cardReveal
    .65s ease .33s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(5){

  animation:
    cardReveal
    .65s ease .39s forwards;

}


.bi-funky-visible
.bi-funky-card:nth-child(6){

  animation:
    cardReveal
    .65s ease .45s forwards;

}


@keyframes serviceReveal{

  from{

    opacity:0;

    transform:
      translateY(22px);

  }

  to{

    opacity:1;

    transform:
      translateY(0);

  }

}


@keyframes cardReveal{

  from{

    opacity:0;

    transform:
      translateY(28px)
      scale(.98);

  }

  to{

    opacity:1;

    transform:
      translateY(0)
      scale(1);

  }

}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1050px){

  .bi-funky-wrap{

    width:
      calc(100% - 45px);

  }


  .bi-funky-heading-row{

    grid-template-columns:
      1fr;

    gap:20px;

  }


  .bi-service-collage{

    grid-template-columns:
      repeat(2,1fr);

  }


  .bi-funky-card{

    min-height:420px;

  }


  .bi-card-copy h3{

    font-size:28px;

  }


  .bi-card-copy p{

    font-size:15px;

  }


  /* APP TABLET */

  .app-visual{

    gap:22px;

    padding-left:12px;

  }


  .bi-phone{

    width:100px;

    height:170px;

    margin-left:3px;

  }


  .bi-app-tags span{

    min-width:70px;

    min-height:40px;

  }


  /* CREATIVE TABLET */

  .creative-drawing-board{

    height:200px;

  }


  .creative-pencil{

    right:1%;

  }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:767px){

  .bi-funky-services{

    padding:
      70px 0 75px;

  }


  .bi-funky-wrap{

    width:
      calc(100% - 30px);

  }


  .bi-funky-heading-row{

    gap:20px;

    margin-bottom:30px;

  }


  .bi-funky-heading-row h2{

    font-size:
      clamp(
        43px,
        11vw,
        57px
      );

    line-height:.92;

  }


  .bi-funky-heading-row p{

    font-size:15px;

    line-height:1.6;

  }


  .bi-service-marquee{

    margin-left:-15px;
    margin-right:-15px;

  }


  .bi-service-collage{

    grid-template-columns:
      1fr;

    gap:15px;

  }


  .bi-funky-card{

    min-height:430px;

    padding:21px;

    border-radius:
      12px 12px 40px 12px;

  }


  /* VISUAL */

  .bi-card-visual{

    min-height:200px;

    margin:
      16px 0 18px;

  }


  /* HEADINGS */

  .bi-card-copy h3{

    font-size:27px;

    line-height:1.02;

  }


  .bi-card-copy p{

    margin-top:10px;

    font-size:15px;

    line-height:1.55;

  }


  /* SOCIAL */

  .bi-social-word{

    font-size:76px;

  }


  .bi-social-ring{

    width:160px;
    height:160px;

    border-width:20px;

  }


  /* SEO */

  .seo-visual{

    padding:
      0 2px;

  }


  .seo-lines{

    width:56%;

  }


  .seo-search-circle{

    width:100px;
    height:100px;

    border-width:6px;

  }


  .seo-search-circle span{

    font-size:56px;

  }


  /* PERFORMANCE */

  .performance-symbol{

    font-size:110px;

  }


  .ring-one{

    width:170px;
    height:170px;

    margin:
      -85px 0 0 -85px;

  }


  .ring-two{

    width:215px;

    margin:
      -47px 0 0 -107px;

  }


  /* WEBSITE */

  .web-visual{

    min-height:200px;

  }


  .bi-web-browser{

    height:175px;

    left:0;

    right:0;

  }


  .bi-browser-main{

    padding:15px;

  }


  .bi-browser-heading{

    font-size:25px;

  }


  /* =================================================
     CREATIVE — MOBILE
  ================================================= */

  .creative-visual{

    min-height:200px;

  }


  .creative-drawing-board{

    height:200px;

  }


  .creative-path{

    stroke-width:3;

  }


  .creative-circle{

    stroke-width:4;

  }


  .creative-diagonal{

    stroke-width:3.5;

  }


  .creative-label{

    left:4%;

    top:9%;

    padding:
      6px 8px;

  }


  .creative-label span{

    font-size:6px;

  }


  .creative-label b{

    font-size:7px;

  }


  .creative-pencil{

    width:76px;

    height:13px;

    right:0;

    top:38%;

  }


  .pencil-body{

    left:14px;

    width:48px;

    height:13px;

  }


  .pencil-band{

    left:14px;

    width:9px;

    height:13px;

  }


  .pencil-eraser{

    width:15px;

    height:13px;

  }


  .pencil-tip{

    border-top-width:6.5px;

    border-bottom-width:6.5px;

    border-right-width:14px;

  }


  .spark-one{

    right:10%;

    font-size:22px;

  }


  .spark-two{

    left:12%;

    font-size:18px;

  }


  /* =================================================
     APP — MOBILE FIX
  ================================================= */

  .app-visual{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    gap:20px;

    padding:
      12px 8px 12px 16px;

    min-height:210px;

    overflow:visible;

  }


  .bi-phone{

    width:96px;

    height:166px;

    padding:7px;

    margin:
      0 3px 0 2px;

    border-width:3px;

    border-radius:21px;

    transform:
      rotate(6deg);

    flex-shrink:0;

  }


  .bi-phone-screen{

    border-radius:14px;

  }


  .bi-phone-notch{

    width:32px;

    height:5px;

    top:6px;

  }


  .bi-phone-content{

    gap:9px;

  }


  .bi-phone-content span{

    height:7px;

  }


  .bi-app-tags{

    gap:10px;

    flex-shrink:0;

  }


  .bi-app-tags span{

    min-width:70px;

    min-height:41px;

    padding:
      8px 12px;

    font-size:9px;

  }


  .bi-card-arrow{

    right:19px;

    bottom:19px;

  }


  .bi-funky-cta{

    font-size:14px;

  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .bi-funky-card{

    min-height:440px;

  }


  .bi-card-copy h3{

    font-size:25px;

  }


  .bi-card-copy p{

    font-size:14px;

  }


  .seo-search-circle{

    width:90px;
    height:90px;

  }


  .seo-search-circle span{

    font-size:50px;

  }


  /* CREATIVE */

  .creative-drawing-board{

    height:195px;

  }


  .creative-label{

    left:2%;

  }


  .creative-pencil{

    width:68px;

    right:-2%;

  }


  /* APP */

  .app-visual{

    gap:15px;

    padding-left:14px;

  }


  .bi-phone{

    width:88px;

    height:158px;

    padding:6px;

    margin-left:2px;

  }


  .bi-phone-screen{

    border-radius:13px;

  }


  .bi-app-tags span{

    min-width:64px;

    min-height:38px;

    padding:
      7px 10px;

    font-size:8px;

  }

}


/* =====================================================
   VERY SMALL DEVICES
===================================================== */

@media(max-width:350px){

  .app-visual{

    gap:11px;

    padding-left:11px;

  }


  .bi-phone{

    width:82px;

    height:150px;

  }


  .bi-app-tags span{

    min-width:60px;

    min-height:36px;

    font-size:8px;

  }


  .creative-drawing-board{

    transform:
      scale(.95);

    transform-origin:
      center center;

  }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media(prefers-reduced-motion:reduce){

  .bi-funky-services *,
  .bi-funky-services *::before,
  .bi-funky-services *::after{

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* =====================================================
   CLICKABLE SERVICE CARDS
===================================================== */

.bi-funky-card{

  text-decoration:none;

  color:inherit;

  cursor:pointer;

}


.bi-funky-card:visited{

  color:inherit;

}


.bi-funky-card:focus-visible{

  outline:
    3px solid
    var(--orange);

  outline-offset:
    5px;

}


/* =====================================================
   APP / SOFTWARE CARD
===================================================== */

.bi-app-service-card{

  cursor:default;

}


/* =====================================================
   APP / SOFTWARE TAG LINKS
===================================================== */

.bi-app-tag-link{

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:74px;

  min-height:42px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(0,0,0,.30);

  border-radius:100px;

  color:#111111 !important;

  text-decoration:none;

  font-size:9px;

  font-weight:900;

  box-sizing:border-box;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.bi-app-tag-link span{

  color:#111111 !important;

}


.bi-app-tag-link:hover{

  background:#111111;

  color:#FFFFFF !important;

  transform:
    translateY(-3px);

}


.bi-app-tag-link:hover span{

  color:#FFFFFF !important;

}


/* =====================================================
   APP / SOFTWARE CARD LINKS
===================================================== */

.bi-app-card-links{

  position:absolute;

  left:25px;

  right:25px;

  bottom:22px;

  z-index:35;

  display:flex;

  gap:8px;

}


.bi-app-card-links a{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  flex:1;

  min-width:0;

  padding:
    9px 11px;

  border:
    1px solid
    rgba(0,0,0,.25);

  border-radius:100px;

  color:#111111 !important;

  background:
    rgba(255,255,255,.25);

  text-decoration:none;

  font-size:9px;

  font-weight:900;

  white-space:nowrap;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease;

}


.bi-app-card-links a span{

  font-size:13px;

  transition:
    transform .25s ease;

}


.bi-app-card-links a:hover{

  background:#111111;

  color:#FFFFFF !important;

  transform:
    translateY(-3px);

}


.bi-app-card-links a:hover span{

  color:#FFFFFF;

  transform:
    translate(2px,-2px);

}


/* =====================================================
   MAKE ROOM FOR TWO APP LINKS
===================================================== */

.bi-app-service-card
.bi-card-copy{

  padding-bottom:
    48px;

}


/* =====================================================
   MOBILE APP LINKS
===================================================== */

@media(max-width:767px){

  .bi-app-card-links{

    left:21px;

    right:21px;

    bottom:19px;

    gap:7px;

  }


  .bi-app-card-links a{

    padding:
      8px 10px;

    font-size:8px;

  }


  .bi-app-card-links a span{

    font-size:11px;

  }


  .bi-app-service-card
  .bi-card-copy{

    padding-bottom:
      45px;

  }


  .bi-app-tag-link{

    min-width:64px;

    min-height:38px;

    padding:
      7px 10px;

    font-size:8px;

  }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .bi-app-card-links{

    left:19px;

    right:19px;

    gap:6px;

  }


  .bi-app-card-links a{

    padding:
      8px 9px;

    font-size:7.5px;

  }


  .bi-app-card-links a span{

    font-size:10px;

  }

}


/* =====================================================
   HOVER FEEL FOR CLICKABLE CARDS
===================================================== */

.bi-funky-card{

  -webkit-tap-highlight-color:
    transparent;

}


.bi-funky-card:not(.bi-app-service-card):active{

  transform:
    perspective(1200px)
    scale(.995);

}


.bi-app-card-links a:active,
.bi-app-tag-link:active{

  transform:
    scale(.97);

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f18419c *//* ==========================================================
   BRAND IMPRINT — WHY US
========================================================== */

.bi-why{

  --orange:#F0552C;
  --cream:#F1EBE2;
  --yellow:#DEFF42;
  --black:#080808;
  --white:#FFFFFF;

  position:relative;

  overflow:hidden;

  padding:
    115px 0 105px;

  background:
    var(--black);

  color:
    var(--white);

}


/* ==========================================================
   BACKGROUND GRID
========================================================== */

.bi-why-grid{

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    92px 92px;

}


.bi-why-glow{

  position:absolute;

  width:600px;
  height:600px;

  left:35%;
  top:25%;

  border-radius:50%;

  background:
    rgba(240,85,44,.10);

  filter:
    blur(140px);

  pointer-events:none;

}


/* ==========================================================
   CONTAINER
========================================================== */

.bi-why-wrap{

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:
    0 auto;

  position:relative;

  z-index:3;

}


/* ==========================================================
   HEADER
========================================================== */

.bi-why-head{

  opacity:0;

  transform:
    translateY(35px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.16,1,.3,1);

}


.bi-why-head.bi-show{

  opacity:1;

  transform:
    translateY(0);

}


.bi-why-kicker{

  display:flex;

  align-items:center;

  gap:12px;

  margin-bottom:25px;

  color:
    #FFFFFF !important;

  font-size:11px;

  font-weight:900;

  letter-spacing:.16em;

}


.bi-why-num{

  width:34px;
  height:34px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:50%;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  font-size:10px;

  font-weight:900;

}


.bi-why-title-row{

  display:block;

}


.bi-why-title-row h2{

  margin:0;

  max-width:1000px;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      62px,
      7vw,
      105px
    );

  line-height:.88;

  letter-spacing:-.065em;

  font-weight:900;

}


.bi-why-title-row h2 span{

  display:block;

  color:
    var(--orange) !important;

}


/* ==========================================================
   MAIN STAGE
========================================================== */

.bi-why-stage{

  margin-top:
    75px;

  display:grid;

  grid-template-columns:
    1fr
    .95fr
    1fr;

  gap:20px;

  align-items:center;

}


/* ==========================================================
   SIDE COLUMNS
========================================================== */

.bi-why-column{

  display:flex;

  flex-direction:column;

  gap:20px;

}


.bi-why-right{

  transform:
    translateY(45px);

}


/* ==========================================================
   CARDS
========================================================== */

.bi-why-card{

  min-height:
    300px;

  padding:
    28px;

  display:flex;

  flex-direction:column;

  position:relative;

  overflow:hidden;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    12px 12px 42px 12px;

  background:
    #141414;

  color:
    #FFFFFF;

  opacity:0;

  transform:
    translateY(35px);

  transition:
    opacity .75s ease,
    transform .75s cubic-bezier(.16,1,.3,1),
    border-color .3s ease,
    box-shadow .3s ease;

}


.bi-why-card.bi-show{

  opacity:1;

  transform:
    translateY(0);

}


.bi-why-card.bi-show:hover{

  transform:
    translateY(-7px);

  border-color:
    rgba(240,85,44,.65);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.35);

}


/* ==========================================================
   CARD TOP
========================================================== */

.bi-why-card-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

}


.bi-why-card-top span{

  color:
    #FFFFFF !important;

  font-size:11px;

  font-weight:900;

  letter-spacing:.16em;

}


.bi-why-card-top i{

  width:42px;
  height:42px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:50%;

  color:
    var(--orange) !important;

  font-size:19px;

  font-style:normal;

}


/* ==========================================================
   CARD HEADINGS
========================================================== */

.bi-why-card h3{

  margin:
    32px 0 0;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      29px,
      2.35vw,
      38px
    );

  line-height:
    1.02;

  letter-spacing:
    -.045em;

  font-weight:
    900;

}


.bi-why-card h3 em{

  color:
    var(--orange) !important;

  font-style:
    normal;

}


/* ==========================================================
   CARD DESCRIPTION
========================================================== */

.bi-why-card p{

  margin:
    18px 0 0;

  max-width:
    460px;

  color:
    #FFFFFF !important;

  font-size:
    16px;

  line-height:
    1.6;

  font-weight:
    500;

}


/* ==========================================================
   LIGHT CARD
========================================================== */

.bi-why-card-light{

  background:
    var(--cream);

  color:
    #080808;

  border-color:
    transparent;

}


.bi-why-card-light
.bi-why-card-top span{

  color:
    #111111 !important;

}


.bi-why-card-light
.bi-why-card-top i{

  color:
    var(--orange) !important;

  border-color:
    rgba(0,0,0,.22);

}


.bi-why-card-light h3{

  color:
    #080808 !important;

}


.bi-why-card-light h3 em{

  color:
    var(--orange) !important;

}


.bi-why-card-light p{

  color:
    #111111 !important;

}


/* ==========================================================
   ORANGE CARD
========================================================== */

.bi-why-card-orange{

  background:
    var(--orange);

  border-color:
    var(--orange);

  color:
    #FFFFFF;

}


.bi-why-card-orange
.bi-why-card-top span{

  color:
    #FFFFFF !important;

}


.bi-why-card-orange
.bi-why-card-top i{

  color:
    #FFFFFF !important;

  border-color:
    rgba(255,255,255,.40);

}


.bi-why-card-orange h3{

  color:
    #FFFFFF !important;

}


.bi-why-card-orange h3 em{

  color:
    #FFFFFF !important;

}


.bi-why-card-orange p{

  color:
    #FFFFFF !important;

}


/* ==========================================================
   CENTER VISUAL
========================================================== */

.bi-why-center{

  min-height:
    600px;

  position:relative;

  display:flex;

  align-items:center;

  justify-content:center;

  opacity:0;

  transform:
    scale(.94);

  transition:
    opacity .9s ease,
    transform .9s cubic-bezier(.16,1,.3,1);

}


.bi-why-center.bi-show{

  opacity:1;

  transform:
    scale(1);

}


/* ==========================================================
   ORANGE ABSTRACT SHAPE
========================================================== */

.bi-why-orange-shape{

  position:absolute;

  width:
    94%;

  height:
    80%;

  background:
    var(--orange);

  border-radius:
    46% 54% 62% 38% /
    55% 39% 61% 45%;

  transform:
    rotate(-4deg);

  animation:
    biWhyMorph
    8s ease-in-out infinite;

}


@keyframes biWhyMorph{

  50%{

    border-radius:
      62% 38% 43% 57% /
      37% 59% 41% 63%;

    transform:
      rotate(3deg)
      scale(1.025);

  }

}


/* ==========================================================
   IMAGE
========================================================== */

.bi-why-image-frame{

  position:relative;

  z-index:3;

  width:
    90%;

  height:
    465px;

  overflow:hidden;

  border:
    9px solid
    var(--cream);

  border-radius:
    10px 10px 55px 10px;

  transform:
    rotate(2deg);

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.42);

  transition:
    transform .3s ease;

}


.bi-why-image-frame img{

  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

}


/* ==========================================================
   STICKER
========================================================== */

.bi-why-sticker{

  position:absolute;

  z-index:7;

  right:-5px;

  top:65px;

  width:105px;
  height:105px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  border-radius:50%;

  background:
    var(--yellow);

  color:
    #080808;

  font-size:11px;

  font-weight:900;

  line-height:1;

  transform:
    rotate(8deg);

  box-shadow:
    0 15px 30px
    rgba(0,0,0,.25);

  transition:
    transform .3s ease;

}


.bi-why-sticker strong{

  color:
    var(--orange) !important;

  font-size:15px;

}


.bi-why-sticker span{

  color:
    #080808 !important;

}


/* ==========================================================
   MINI LABEL
========================================================== */

.bi-why-mini-label{

  position:absolute;

  z-index:8;

  left:-10px;

  bottom:75px;

  padding:
    10px 14px;

  background:
    #FFFFFF;

  color:
    #080808 !important;

  font-size:9px;

  font-weight:900;

  letter-spacing:.12em;

  transform:
    rotate(-5deg);

}


/* ==========================================================
   DOODLE
========================================================== */

.bi-why-doodle{

  position:absolute;

  z-index:9;

  width:130px;

  left:-70px;

  top:100px;

  transform:
    rotate(-12deg);

}


/* ==========================================================
   BOTTOM STATEMENT
========================================================== */

.bi-why-bottom{

  margin-top:
    115px;

  padding:
    25px 0 0;

  border-top:
    1px solid
    rgba(255,255,255,.22);

  opacity:0;

  transform:
    translateY(30px);

  transition:
    opacity .8s ease,
    transform .8s ease;

}


.bi-why-bottom.bi-show{

  opacity:1;

  transform:
    translateY(0);

}


.bi-why-bottom-label{

  margin-bottom:
    28px;

  color:
    var(--orange) !important;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .18em;

}


/* ==========================================================
   BOTTOM CONTENT
========================================================== */

.bi-why-bottom-content{

  display:grid;

  grid-template-columns:
    .85fr
    1.4fr
    auto;

  gap:
    50px;

  align-items:
    center;

}


.bi-why-bottom-content p{

  margin:0;

  max-width:
    430px;

  color:
    #FFFFFF !important;

  font-size:
    16px;

  line-height:
    1.6;

  font-weight:
    500;

}


.bi-cross{

  position:relative;

  color:
    #FFFFFF !important;

  font-weight:
    900;

}


.bi-cross::after{

  content:"";

  position:absolute;

  left:-4px;

  right:-4px;

  top:52%;

  height:3px;

  background:
    var(--orange);

  transform:
    rotate(-8deg);

}


/* ==========================================================
   BOTTOM BIG TEXT
========================================================== */

.bi-why-bottom-content h3{

  margin:0;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      36px,
      4vw,
      62px
    );

  line-height:
    .94;

  letter-spacing:
    -.055em;

  font-weight:
    900;

}


.bi-why-bottom-content h3 span{

  display:block;

  color:
    var(--orange) !important;

}


.bi-why-bottom-content h3
span:nth-child(2){

  color:
    #FFFFFF !important;

}


.bi-why-bottom-content h3
span:nth-child(3){

  color:
    var(--yellow) !important;

}


/* ==========================================================
   CTA
========================================================== */

.bi-why-cta{

  width:
    125px;

  height:
    125px;

  flex-shrink:0;

  border-radius:50%;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:6px;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  text-decoration:none;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .08em;

  transform:
    rotate(5deg);

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;

}


.bi-why-cta i{

  color:
    #FFFFFF !important;

  font-size:
    22px;

  font-style:
    normal;

}


.bi-why-cta:hover{

  background:
    var(--yellow);

  color:
    #080808 !important;

  transform:
    rotate(-4deg)
    scale(1.08);

}


.bi-why-cta:hover i{

  color:
    #080808 !important;

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1100px){

  .bi-why-wrap{

    width:
      calc(100% - 50px);

  }


  .bi-why-title-row h2{

    font-size:
      clamp(
        55px,
        7vw,
        85px
      );

  }


  .bi-why-stage{

    grid-template-columns:
      1fr 1fr;

  }


  .bi-why-center{

    grid-column:
      1 / -1;

    grid-row:
      1;

    max-width:
      680px;

    width:
      100%;

    margin:
      0 auto 20px;

  }


  .bi-why-column{

    grid-row:
      2;

  }


  .bi-why-right{

    transform:
      none;

  }


  .bi-why-card h3{

    font-size:
      30px;

  }


  .bi-why-card p{

    font-size:
      15px;

  }


  .bi-why-bottom-content{

    grid-template-columns:
      1fr 1fr;

  }


  .bi-why-cta{

    grid-column:
      1 / -1;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .bi-why{

    padding:
      75px 0 75px;

  }


  .bi-why-wrap{

    width:
      calc(100% - 30px);

  }


  .bi-why-kicker{

    font-size:
      10px;

  }


  .bi-why-num{

    width:31px;
    height:31px;

  }


  .bi-why-title-row h2{

    font-size:
      clamp(
        48px,
        13.5vw,
        67px
      );

    line-height:
      .9;

  }


  .bi-why-stage{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-top:
      48px;

  }


  /* CENTER */

  .bi-why-center{

    order:1;

    width:100%;

    min-height:
      370px;

    margin:
      0 0 10px;

  }


  .bi-why-column{

    width:100%;

    gap:16px;

  }


  .bi-why-column:first-child{

    order:2;

  }


  .bi-why-right{

    order:3;

  }


  /* CARDS */

  .bi-why-card{

    width:100%;

    min-height:
      280px;

    padding:
      23px;

    border-radius:
      11px 11px 38px 11px;

  }


  .bi-why-card-top span{

    font-size:
      10px;

  }


  .bi-why-card-top i{

    width:38px;
    height:38px;

    font-size:
      17px;

  }


  .bi-why-card h3{

    margin-top:
      26px;

    font-size:
      29px;

    line-height:
      1.03;

  }


  .bi-why-card p{

    margin-top:
      14px;

    font-size:
      15px;

    line-height:
      1.58;

  }


  /* IMAGE */

  .bi-why-image-frame{

    width:
      91%;

    height:
      310px;

    border-width:
      7px;

    border-radius:
      8px 8px 42px 8px;

  }


  .bi-why-orange-shape{

    width:
      95%;

    height:
      78%;

  }


  /* STICKER */

  .bi-why-sticker{

    width:
      78px;

    height:
      78px;

    right:
      0;

    top:
      38px;

    font-size:
      9px;

  }


  .bi-why-sticker strong{

    font-size:
      12px;

  }


  /* LABEL */

  .bi-why-mini-label{

    left:
      0;

    bottom:
      40px;

    padding:
      8px 10px;

    font-size:
      7px;

  }


  .bi-why-doodle{

    display:
      none;

  }


  /* BOTTOM */

  .bi-why-bottom{

    margin-top:
      75px;

  }


  .bi-why-bottom-content{

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      28px;

  }


  .bi-why-bottom-content p{

    font-size:
      15px;

  }


  .bi-why-bottom-content h3{

    font-size:
      clamp(
        38px,
        10vw,
        52px
      );

  }


  .bi-why-cta{

    width:
      105px;

    height:
      105px;

    font-size:
      10px;

    align-self:
      flex-end;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:390px){

  .bi-why{

    padding:
      65px 0;

  }


  .bi-why-title-row h2{

    font-size:
      46px;

  }


  .bi-why-card{

    min-height:
      290px;

    padding:
      21px;

  }


  .bi-why-card h3{

    font-size:
      27px;

  }


  .bi-why-card p{

    font-size:
      14px;

  }


  .bi-why-image-frame{

    height:
      285px;

  }


  .bi-why-bottom-content h3{

    font-size:
      37px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .bi-why *,
  .bi-why *::before,
  .bi-why *::after{

    animation:
      none !important;

    transition:
      none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2bca79a *//* ==========================================================
   BRAND IMPRINT — INDUSTRIES
========================================================== */

.bi-industries{

  --orange:#F0552C;
  --black:#080808;
  --cream:#F1ECE4;
  --yellow:#DFFF46;
  --lavender:#CDBBFF;
  --white:#FFFFFF;

  position:relative;

  overflow:hidden;

  padding:
    110px 0 115px;

  background:
    var(--cream);

  color:
    var(--black);

}


/* ==========================================================
   BACKGROUND
========================================================== */

.bi-industries-bg{

  position:absolute;

  inset:0;

  pointer-events:none;

  background:

    linear-gradient(
      rgba(0,0,0,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.035) 1px,
      transparent 1px
    );

  background-size:
    92px 92px;

}


/* ==========================================================
   WRAPPER
========================================================== */

.bi-industries-wrap{

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:
    0 auto;

  position:
    relative;

  z-index:
    2;

}


/* ==========================================================
   HEADER
========================================================== */

.bi-industries-head{

  position:
    relative;

}


.bi-industries-kicker{

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-bottom:
    25px;

  color:
    #080808 !important;

  font-size:
    11px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .16em;

}


.bi-industries-kicker span{

  width:
    34px;

  height:
    34px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  font-size:
    10px;

  font-weight:
    900;

}


/* ==========================================================
   TITLE ROW
========================================================== */

.bi-industries-title-row{

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    420px;

  gap:
    75px;

  align-items:
    end;

}


.bi-industries-title-row h2{

  margin:
    0;

  max-width:
    900px;

  color:
    #080808 !important;

  font-size:
    clamp(
      58px,
      6.2vw,
      100px
    );

  line-height:
    .88;

  letter-spacing:
    -.065em;

  font-weight:
    700;

}


.bi-industries-title-row h2 span{

  display:
    block;

  color:
    var(--orange) !important;

}


.bi-industries-title-row p{

  margin:
    0;

  max-width:
    430px;

  color:
    #080808 !important;

  font-size:
    17px;

  line-height:
    1.55;

  font-weight:
    500;

}


/* ==========================================================
   MARQUEE
========================================================== */

.bi-industries-marquee{

  position:
    relative;

  margin:
    65px -2vw 35px;

  padding:
    17px 0;

  overflow:
    hidden;

  background:
    var(--black);

  color:
    #FFFFFF;

  transform:
    rotate(-1deg)
    scale(1.03);

}


.bi-industries-track{

  display:
    flex;

  align-items:
    center;

  gap:
    30px;

  width:
    max-content;

  animation:
    biIndustryMarquee
    25s linear infinite;

}


.bi-industries-track span{

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      17px,
      1.5vw,
      23px
    );

  line-height:
    1;

  font-weight:
    600;

  letter-spacing:
    .02em;

  white-space:
    nowrap;

}


.bi-industries-track i{

  color:
    var(--yellow) !important;

  font-size:
    18px;

  font-style:
    normal;

}


@keyframes biIndustryMarquee{

  from{

    transform:
      translateX(0);

  }

  to{

    transform:
      translateX(-50%);

  }

}


/* ==========================================================
   INDUSTRY GRID
========================================================== */

.bi-industry-grid{

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    16px;

}


/* ==========================================================
   BASE CARD
========================================================== */

.bi-industry-card{

  position:
    relative;

  min-height:
    340px;

  padding:
    30px;

  overflow:
    hidden;

  border-radius:
    12px 12px 55px 12px;

  display:
    flex;

  align-items:
    flex-end;

  opacity:
    0;

  transform:
    translateY(35px);

  transition:
    opacity .75s ease,
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease;

}


.bi-industry-card.bi-show{

  opacity:
    1;

  transform:
    translateY(0);

}


.bi-industry-card:hover{

  box-shadow:
    0 25px 55px
    rgba(0,0,0,.16);

}


/* ==========================================================
   CARD COLOURS
========================================================== */

.industry-education{

  background:
    var(--black);

  color:
    #FFFFFF;

}


.industry-realestate{

  background:
    var(--orange);

  color:
    #FFFFFF;

}


.industry-hospitality{

  background:
    var(--yellow);

  color:
    #080808;

}


.industry-auto{

  background:
    var(--lavender);

  color:
    #080808;

}


.industry-manufacturing{

  background:
    #E3DDD4;

  color:
    #080808;

  border:
    1px solid
    rgba(0,0,0,.12);

}


.industry-retail{

  background:
    #111111;

  color:
    #FFFFFF;

}


/* ==========================================================
   CARD CONTENT
========================================================== */

.bi-industry-content{

  position:
    relative;

  z-index:
    5;

  width:
    100%;

}


.bi-industry-card h3{

  margin:
    0;

  color:
    inherit !important;

  font-size:
    clamp(
      34px,
      2.7vw,
      46px
    );

  line-height:
    .95;

  letter-spacing:
    -.05em;

  font-weight:
    600;

}


.bi-industry-card p{

  max-width:
    410px;

  margin:
    16px 0 0;

  color:
    inherit !important;

  font-size:
    17px;

  line-height:
    1.5;

  font-weight:
    500;

}


/* ==========================================================
   DECORATIVE SHAPES
========================================================== */

.bi-industry-shape{

  position:
    absolute;

  pointer-events:
    none;

}


/* ==========================================================
   EDUCATION CIRCLE
========================================================== */

.circle{

  width:
    210px;

  height:
    210px;

  right:
    -55px;

  top:
    25px;

  border:
    32px solid
    rgba(240,85,44,.72);

  border-radius:
    50%;

  animation:
    biIndustrySpin
    10s linear infinite;

}


/* ==========================================================
   REAL ESTATE BLOCK
========================================================== */

.block{

  width:
    180px;

  height:
    180px;

  right:
    25px;

  top:
    25px;

  background:
    rgba(255,255,255,.17);

  transform:
    rotate(13deg);

}


/* ==========================================================
   HOSPITALITY WAVE
========================================================== */

.wave{

  width:
    220px;

  height:
    100px;

  right:
    20px;

  top:
    40px;

  border-top:
    18px solid
    rgba(0,0,0,.15);

  border-bottom:
    18px solid
    rgba(0,0,0,.15);

  border-radius:
    50%;

  transform:
    rotate(-12deg);

}


/* ==========================================================
   AUTOMOBILE SPEED LINES
========================================================== */

.speed{

  width:
    220px;

  height:
    6px;

  right:
    -15px;

  top:
    65px;

  background:
    #111111;

  box-shadow:
    0 30px 0 rgba(17,17,17,.55),
    0 60px 0 rgba(17,17,17,.25);

  transform:
    skewX(-25deg);

}


/* ==========================================================
   MANUFACTURING GRID
========================================================== */

.grid{

  width:
    190px;

  height:
    150px;

  right:
    20px;

  top:
    25px;

  background:

    linear-gradient(
      rgba(0,0,0,.14) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.14) 1px,
      transparent 1px
    );

  background-size:
    25px 25px;

}


/* ==========================================================
   RETAIL STAR
========================================================== */

.star{

  right:
    25px;

  top:
    12px;

  color:
    var(--orange) !important;

  font-size:
    130px;

  line-height:
    1;

  animation:
    biStarRotate
    10s linear infinite;

}


@keyframes biIndustrySpin{

  to{

    transform:
      rotate(360deg);

  }

}


@keyframes biStarRotate{

  to{

    transform:
      rotate(360deg);

  }

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .bi-industries-wrap{

    width:
      calc(100% - 50px);

  }


  .bi-industries-title-row{

    grid-template-columns:
      1fr;

    gap:
      25px;

  }


  .bi-industries-title-row p{

    max-width:
      700px;

    font-size:
      17px;

  }


  .bi-industry-grid{

    grid-template-columns:
      repeat(2,1fr);

  }


  .bi-industry-card{

    min-height:
      330px;

  }


  .bi-industry-card h3{

    font-size:
      38px;

  }


  .bi-industry-card p{

    font-size:
      16px;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .bi-industries{

    padding:
      75px 0 80px;

  }


  .bi-industries-wrap{

    width:
      calc(100% - 30px);

  }


  .bi-industries-kicker{

    margin-bottom:
      20px;

    font-size:
      9px;

    letter-spacing:
      .13em;

  }


  .bi-industries-kicker span{

    width:
      31px;

    height:
      31px;

    font-size:
      9px;

  }


  .bi-industries-title-row{

    display:
      block;

  }


  .bi-industries-title-row h2{

    font-size:
      clamp(
        45px,
        12.5vw,
        62px
      );

    line-height:
      .91;

  }


  .bi-industries-title-row p{

    margin-top:
      25px;

    max-width:
      100%;

    font-size:
      16px;

    line-height:
      1.55;

  }


  /* MARQUEE */

  .bi-industries-marquee{

    margin:
      45px -15px 28px;

    padding:
      15px 0;

  }


  .bi-industries-track{

    gap:
      22px;

  }


  .bi-industries-track span{

    font-size:
      16px;

  }


  /* GRID */

  .bi-industry-grid{

    grid-template-columns:
      1fr;

    gap:
      14px;

  }


  /* CARDS */

  .bi-industry-card{

    min-height:
      285px;

    padding:
      24px;

    border-radius:
      10px 10px 42px 10px;

  }


  .bi-industry-card h3{

    font-size:
      clamp(
        32px,
        9vw,
        42px
      );

  }


  .bi-industry-card p{

    max-width:
      100%;

    margin-top:
      13px;

    font-size:
      16px;

    line-height:
      1.5;

  }


  /* DECORATIVE ELEMENTS */

  .circle{

    width:
      150px;

    height:
      150px;

    right:
      -45px;

    top:
      20px;

    border-width:
      24px;

  }


  .block{

    width:
      125px;

    height:
      125px;

    right:
      15px;

    top:
      25px;

  }


  .wave{

    width:
      155px;

    height:
      70px;

    right:
      15px;

    top:
      35px;

    border-top-width:
      13px;

    border-bottom-width:
      13px;

  }


  .speed{

    width:
      160px;

    right:
      -10px;

    top:
      55px;

  }


  .grid{

    width:
      145px;

    height:
      110px;

    right:
      15px;

    top:
      25px;

    background-size:
      20px 20px;

  }


  .star{

    right:
      15px;

    top:
      15px;

    font-size:
      95px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:390px){

  .bi-industries-title-row h2{

    font-size:
      43px;

  }


  .bi-industries-title-row p{

    font-size:
      15px;

  }


  .bi-industry-card{

    min-height:
      275px;

    padding:
      22px;

  }


  .bi-industry-card h3{

    font-size:
      31px;

  }


  .bi-industry-card p{

    font-size:
      15px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .bi-industries *,
  .bi-industries *::before,
  .bi-industries *::after{

    animation:
      none !important;

    transition:
      none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d212a69 *//* ==========================================================
   BRAND IMPRINT — TESTIMONIALS
   LARGE / HIGH CONTRAST VERSION
========================================================== */

.bi-testimonials{

  --orange:#F0552C;
  --black:#090909;
  --black2:#111111;
  --cream:#F2EDE5;
  --yellow:#DFFF46;
  --lavender:#C9BAFF;
  --white:#FFFFFF;

  position:relative;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(240,85,44,.10),
      transparent 26%
    ),
    #090909;

  color:
    #FFFFFF !important;

  padding:
    110px 0 95px;

}


/* ==========================================================
   BACKGROUND WORD
========================================================== */

.bi-test-bgword{

  position:absolute;

  right:-60px;
  top:60px;

  font-size:
    clamp(
      170px,
      22vw,
      360px
    );

  line-height:.7;

  font-weight:900;

  letter-spacing:-.08em;

  color:
    rgba(255,255,255,.035) !important;

  pointer-events:none;

}


/* ==========================================================
   ORANGE BLOB
========================================================== */

.bi-test-orange-blob{

  position:absolute;

  width:340px;
  height:340px;

  left:-180px;
  top:430px;

  border-radius:
    45% 55% 63% 37% /
    58% 40% 60% 42%;

  background:
    rgba(240,85,44,.11);

  animation:
    biTestMorph
    7s ease-in-out infinite;

}


@keyframes biTestMorph{

  50%{

    border-radius:
      62% 38% 40% 60% /
      35% 63% 37% 65%;

    transform:
      rotate(10deg);

  }

}


/* ==========================================================
   GRID
========================================================== */

.bi-test-grid{

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.15;

  background-image:

    linear-gradient(
      rgba(255,255,255,.04) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.04) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

}


/* ==========================================================
   WRAPPER
========================================================== */

.bi-test-wrap{

  width:
    min(
      1360px,
      calc(100% - 80px)
    );

  margin:
    0 auto;

  position:
    relative;

  z-index:
    4;

}


/* ==========================================================
   KICKER
========================================================== */

.bi-test-kicker{

  display:flex;

  align-items:center;

  gap:13px;

  margin-bottom:
    26px;

  color:
    #FFFFFF !important;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .17em;

}


.bi-test-kicker-no{

  width:
    35px;

  height:
    35px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  font-size:
    10px;

  font-weight:
    900;

}


/* ==========================================================
   MAIN TITLE
========================================================== */

.bi-test-title-row{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    430px;

  gap:
    75px;

  align-items:end;

}


.bi-test-title-row h2{

  margin:
    0;

  max-width:
    950px;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      62px,
      6.5vw,
      105px
    );

  line-height:
    .88;

  letter-spacing:
    -.065em;

  font-weight:
    600;

}


.bi-test-title-row h2 span{

  display:
    block;

  color:
    var(--orange) !important;

}


/* ==========================================================
   INTRO
========================================================== */

.bi-test-intro p{

  margin:
    0;

  color:
    #FFFFFF !important;

  font-size:
    18px;

  line-height:
    1.55;

  font-weight:
    500;

}


.bi-test-intro strong{

  color:
    #FFFFFF !important;

  font-weight:
    900;

}


/* ==========================================================
   PROOF CHIP
========================================================== */

.bi-test-proof-chip{

  display:flex;

  align-items:center;

  gap:9px;

  width:
    max-content;

  margin-top:
    20px;

  padding:
    9px 13px;

  border:
    1px solid
    rgba(255,255,255,.28);

  border-radius:
    100px;

  color:
    #FFFFFF !important;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


.bi-test-proof-chip i{

  width:
    8px;

  height:
    8px;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--orange);

  animation:
    biProofPulse
    1.6s ease-in-out infinite;

}


@keyframes biProofPulse{

  50%{

    transform:
      scale(.6);

    opacity:
      .5;

  }

}


/* ==========================================================
   VIDEO HEADER
========================================================== */

.bi-video-head{

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  margin-top:
    70px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(255,255,255,.20);

}


.bi-video-head > span{

  color:
    #FFFFFF !important;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .15em;

}


.bi-video-arrows{

  display:flex;

  gap:
    8px;

}


.bi-video-nav{

  width:
    46px;

  height:
    46px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.30);

  border-radius:
    50%;

  background:
    transparent;

  color:
    #FFFFFF !important;

  cursor:
    pointer;

  font-size:
    18px;

  transition:
    .3s ease;

}


.bi-video-nav:hover{

  background:
    var(--orange);

  border-color:
    var(--orange);

  color:
    #FFFFFF !important;

}


/* ==========================================================
   VIDEO RAIL
========================================================== */

.bi-video-rail{

  display:flex;

  gap:
    18px;

  overflow-x:auto;

  margin-top:
    28px;

  padding:
    0 max(
      40px,
      calc((100vw - 1360px) / 2)
    ) 38px;

  scrollbar-width:
    none;

  scroll-snap-type:
    x proximity;

  cursor:
    grab;

}


.bi-video-rail::-webkit-scrollbar{

  display:
    none;

}


.bi-video-card{

  position:
    relative;

  flex:
    0 0 clamp(
      330px,
      32vw,
      480px
    );

  scroll-snap-align:
    start;

  padding:
    11px;

  background:
    #121212;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius:
    12px 12px 50px 12px;

  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s ease,
    border-color .3s ease;

}


.bi-video-card:nth-child(even){

  transform:
    translateY(18px)
    rotate(1deg);

}


.bi-video-card:nth-child(odd){

  transform:
    rotate(-.7deg);

}


.bi-video-card:hover{

  transform:
    translateY(-7px)
    rotate(0);

  border-color:
    rgba(240,85,44,.55);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.48);

}


.bi-video-number{

  position:
    absolute;

  z-index:
    6;

  top:
    20px;

  left:
    20px;

  padding:
    7px 9px;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .12em;

}


/* ==========================================================
   VIDEO IMAGE
========================================================== */

.bi-video-thumb{

  position:
    relative;

  aspect-ratio:
    16 / 9;

  overflow:
    hidden;

  border-radius:
    8px 8px 38px 8px;

  background:
    #111;

}


.bi-video-thumb img{

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .6s
    cubic-bezier(.16,1,.3,1);

}


.bi-video-card:hover
.bi-video-thumb img{

  transform:
    scale(1.055);

}


.bi-video-overlay{

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(0,0,0,.65)
    );

}


/* ==========================================================
   PLAY BUTTON
========================================================== */

.bi-video-play{

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    70px;

  height:
    70px;

  transform:
    translate(-50%,-50%);

  border:
    0;

  border-radius:
    50%;

  background:
    var(--yellow);

  color:
    #111111 !important;

  cursor:
    pointer;

  font-size:
    20px;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.30);

  transition:
    .35s ease;

}


.bi-video-card:hover
.bi-video-play{

  transform:
    translate(-50%,-50%)
    scale(1.1)
    rotate(-6deg);

  background:
    var(--orange);

  color:
    #FFFFFF !important;

}


/* ==========================================================
   VIDEO FOOTER
========================================================== */

.bi-video-footer{

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  padding:
    15px 6px 5px;

}


.bi-video-footer span{

  color:
    #FFFFFF !important;

  font-size:
    10px;

  font-weight:
    600;

  letter-spacing:
    .13em;

}


.bi-video-footer i{

  color:
    var(--orange) !important;

  font-size:
    19px;

  font-style:
    normal;

}


/* ==========================================================
   WRITTEN TESTIMONIALS HEADER
========================================================== */

.bi-written-wrap{

  margin-top:
    105px;

}


.bi-written-head{

  display:flex;

  align-items:flex-end;

  justify-content:
    space-between;

  padding-bottom:
    32px;

}


.bi-written-head h3{

  margin:
    0;

  max-width:
    800px;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      48px,
      5.2vw,
      80px
    );

  line-height:
    .92;

  letter-spacing:
    -.055em;

  font-weight:
    600;

}


.bi-written-head h3 span{

  color:
    var(--orange) !important;

}


.bi-written-doodle{

  width:
    58px;

  height:
    58px;

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid
    rgba(255,255,255,.30);

  border-radius:
    50%;

  color:
    var(--orange) !important;

  font-size:
    23px;

}


/* ==========================================================
   REVIEW MARQUEES
========================================================== */

.bi-review-marquee{

  width:
    100%;

  overflow:
    hidden;

  margin-top:
    14px;

}


.bi-review-marquee.second-row{

  margin-top:
    16px;

}


.bi-review-track{

  display:flex;

  gap:
    16px;

  width:
    max-content;

  padding:
    0 8px;

}


.row-one{

  animation:
    biReviewsLeft
    65s linear infinite;

}


.row-two{

  animation:
    biReviewsRight
    58s linear infinite;

}


.bi-review-marquee:hover
.bi-review-track{

  animation-play-state:
    paused;

}


@keyframes biReviewsLeft{

  from{
    transform:
      translateX(0);
  }

  to{
    transform:
      translateX(-45%);
  }

}


@keyframes biReviewsRight{

  from{
    transform:
      translateX(-35%);
  }

  to{
    transform:
      translateX(0);
  }

}


/* ==========================================================
   REVIEW CARDS
========================================================== */

.bi-review-card{

  width:
    clamp(
      330px,
      28vw,
      430px
    );

  min-height:
    285px;

  flex-shrink:
    0;

  padding:
    28px;

  border-radius:
    11px;

  display:flex;

  flex-direction:
    column;

  position:
    relative;

  overflow:
    hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease;

}


.bi-review-card:hover{

  transform:
    translateY(-6px)
    rotate(-.5deg);

  box-shadow:
    0 20px 45px
    rgba(0,0,0,.28);

}


/* ==========================================================
   CARD COLOURS
========================================================== */

.review-dark{

  background:
    #121212;

  color:
    #FFFFFF !important;

  border:
    1px solid
    rgba(255,255,255,.12);

}


.review-orange{

  background:
    var(--orange);

  color:
    #FFFFFF !important;

}


.review-cream{

  background:
    var(--cream);

  color:
    #111111 !important;

}


.review-yellow{

  background:
    var(--yellow);

  color:
    #111111 !important;

}


/* ==========================================================
   STARS
========================================================== */

.bi-review-stars{

  font-size:
    13px;

  letter-spacing:
    .13em;

  color:
    var(--orange) !important;

}


.review-dark
.bi-review-stars{

  color:
    var(--yellow) !important;

}


.review-orange
.bi-review-stars{

  color:
    var(--yellow) !important;

}


/* ==========================================================
   QUOTE MARK
========================================================== */

.bi-review-mark{

  position:
    absolute;

  right:
    18px;

  top:
    -20px;

  font-family:
    Georgia,
    serif;

  font-size:
    130px;

  line-height:
    1;

  opacity:
    .12;

}


/* ==========================================================
   REVIEW TEXT
========================================================== */

.bi-review-card blockquote{

  margin:
    35px 0 30px;

  color:
    inherit !important;

  font-size:
    clamp(
      17px,
      1.35vw,
      21px
    );

  line-height:
    1.42;

  letter-spacing:
    -.02em;

  font-weight:
    600;

}


/* ==========================================================
   REVIEW PERSON
========================================================== */

.bi-review-person{

  margin-top:
    auto;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(128,128,128,.35);

}


.bi-review-person strong{

  display:
    block;

  color:
    inherit !important;

  font-size:
    14px;

  font-weight:
    900;

}


.bi-review-person span{

  display:
    block;

  margin-top:
    5px;

  color:
    inherit !important;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .12em;

  opacity:
    .75;

}


/* ==========================================================
   PROOF END
========================================================== */

.bi-proof-end{

  margin-top:
    105px;

  padding:
    60px;

  position:
    relative;

  overflow:
    hidden;

  background:
    #121212;

  color:
    #FFFFFF !important;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius:
    13px 13px 65px 13px;

  display:grid;

  grid-template-columns:
    auto 1fr auto;

  gap:
    55px;

  align-items:
    center;

}


.bi-proof-end::before{

  content:
    "“";

  position:
    absolute;

  right:
    13%;

  top:
    -85px;

  font-family:
    Georgia,
    serif;

  font-size:
    310px;

  line-height:
    1;

  color:
    rgba(240,85,44,.08);

}


.bi-proof-end > span{

  color:
    var(--yellow) !important;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .16em;

}


.bi-proof-end h3{

  margin:
    0;

  max-width:
    720px;

  color:
    #FFFFFF !important;

  font-size:
    clamp(
      38px,
      4vw,
      64px
    );

  line-height:
    .94;

  letter-spacing:
    -.055em;

  font-weight:
    600;

}


.bi-proof-end h3 em{

  color:
    var(--orange) !important;

  font-style:
    normal;

}


.bi-proof-cta{

  width:
    120px;

  height:
    120px;

  display:flex;

  flex-direction:
    column;

  align-items:center;

  justify-content:center;

  gap:
    4px;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  text-decoration:
    none;

  text-align:
    center;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .08em;

  transform:
    rotate(6deg);

  transition:
    .35s ease;

}


.bi-proof-cta i{

  font-size:
    19px;

  font-style:
    normal;

}


.bi-proof-cta:hover{

  background:
    var(--yellow);

  color:
    #111111 !important;

  transform:
    rotate(-5deg)
    scale(1.07);

}


/* ==========================================================
   VIDEO MODAL
========================================================== */

.bi-video-modal{

  position:
    fixed;

  inset:
    0;

  z-index:
    99999;

  display:flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;

  visibility:
    hidden;

  opacity:
    0;

  transition:
    opacity .3s ease,
    visibility .3s ease;

}


.bi-video-modal.active{

  visibility:
    visible;

  opacity:
    1;

}


.bi-modal-backdrop{

  position:
    absolute;

  inset:
    0;

  background:
    rgba(0,0,0,.92);

  backdrop-filter:
    blur(10px);

}


.bi-modal-window{

  position:
    relative;

  z-index:
    2;

  width:
    min(
      1050px,
      94vw
    );

  padding:
    10px;

  background:
    #111111;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius:
    12px;

  transform:
    scale(.93);

  transition:
    transform .35s
    cubic-bezier(.16,1,.3,1);

}


.bi-video-modal.active
.bi-modal-window{

  transform:
    scale(1);

}


.bi-modal-video{

  aspect-ratio:
    16 / 9;

  overflow:
    hidden;

  border-radius:
    7px;

}


.bi-modal-video iframe{

  width:
    100%;

  height:
    100%;

  border:
    0;

}


.bi-modal-close{

  position:
    absolute;

  z-index:
    3;

  right:
    -13px;

  top:
    -13px;

  width:
    43px;

  height:
    43px;

  border:
    0;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    #FFFFFF !important;

  cursor:
    pointer;

  font-size:
    26px;

  line-height:
    1;

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width:1050px){

  .bi-test-wrap{

    width:
      calc(100% - 50px);

  }


  .bi-test-title-row{

    grid-template-columns:
      1fr;

    gap:
      28px;

  }


  .bi-test-intro{

    max-width:
      700px;

  }


  .bi-proof-end{

    grid-template-columns:
      1fr auto;

  }


  .bi-proof-end > span{

    grid-column:
      1 / -1;

  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:767px){

  .bi-testimonials{

    padding:
      78px 0 75px;

  }


  .bi-test-wrap{

    width:
      calc(100% - 30px);

  }


  .bi-test-kicker{

    font-size:
      10px;

  }


  .bi-test-title-row h2{

    font-size:
      clamp(
        50px,
        14vw,
        68px
      );

  }


  .bi-test-intro p{

    font-size:
      17px;

    line-height:
      1.55;

  }


  .bi-video-head{

    margin-top:
      48px;

  }


  .bi-video-head > span{

    font-size:
      9px;

  }


  .bi-video-rail{

    padding:
      0 15px 30px;

  }


  .bi-video-card{

    flex-basis:
      86vw;

  }


  .bi-written-wrap{

    margin-top:
      75px;

  }


  .bi-written-head h3{

    font-size:
      clamp(
        42px,
        11.5vw,
        57px
      );

  }


  .bi-written-doodle{

    display:
      none;

  }


  .bi-review-card{

    width:
      84vw;

    min-height:
      260px;

    padding:
      25px;

  }


  .bi-review-card blockquote{

    font-size:
      17px;

    line-height:
      1.45;

  }


  .bi-review-person strong{

    font-size:
      13px;

  }


  .bi-proof-end{

    margin-top:
      75px;

    padding:
      40px 28px;

    grid-template-columns:
      1fr;

    gap:
      28px;

  }


  .bi-proof-end h3{

    font-size:
      39px;

  }


  .bi-proof-cta{

    width:
      105px;

    height:
      105px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media(max-width:390px){

  .bi-test-title-row h2{

    font-size:
      48px;

  }


  .bi-test-intro p{

    font-size:
      16px;

  }


  .bi-written-head h3{

    font-size:
      39px;

  }


  .bi-review-card{

    width:
      86vw;

  }


  .bi-review-card blockquote{

    font-size:
      16px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion:reduce){

  .bi-testimonials *,
  .bi-testimonials *::before,
  .bi-testimonials *::after{

    animation:
      none !important;

    transition:
      none !important;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2ac4a7c *//* =========================================================
   BRAND IMPRINT — LIGHT FINAL CTA
========================================================= */

.bi-final-cta-light {

  --orange: #F0552C;
  --cream: #F2ECE4;
  --cream-dark: #E6DED4;
  --black: #0A0A0A;
  --yellow: #DFFF46;

  position: relative;

  overflow: hidden;

  background:
    var(--cream);

  color:
    var(--black);

  padding:
    95px 0 48px;

}


/* =========================================================
   SUBTLE GRID
========================================================= */

.bi-final-light-grid {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      rgba(0,0,0,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(0,0,0,.035) 1px,
      transparent 1px
    );

  background-size:
    90px 90px;

}


/* =========================================================
   ORGANIC ORANGE SHAPE
========================================================= */

.bi-final-light-shape {

  position: absolute;

  right: -80px;
  top: 30px;

  width: 340px;
  height: 340px;

  background:
    rgba(240,85,44,.15);

  border-radius:
    57% 43% 64% 36% /
    39% 58% 42% 61%;

  transition:
    transform .8s ease;

  animation:
    biFinalShapeMorph 8s ease-in-out infinite;

}


@keyframes biFinalShapeMorph {

  50% {

    border-radius:
      38% 62% 42% 58% /
      61% 38% 62% 39%;

  }

}


/* =========================================================
   HUGE BACKGROUND WORD
========================================================= */

.bi-final-light-bgword {

  position: absolute;

  left: -45px;
  bottom: -30px;

  font-size:
    clamp(170px,25vw,410px);

  line-height:
    .7;

  font-weight:
    900;

  letter-spacing:
    -.085em;

  color:
    rgba(0,0,0,.025);

  pointer-events: none;

  user-select: none;

}


/* =========================================================
   WRAPPER
========================================================= */

.bi-final-light-wrap {

  width:
    min(1360px, calc(100% - 80px));

  margin:
    auto;

  position:
    relative;

  z-index:
    3;

}


/* =========================================================
   KICKER
========================================================= */

.bi-final-light-kicker {

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    30px;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .18em;

  color:
    rgba(0,0,0,.52);

}


.bi-final-light-kicker span {

  width:
    30px;

  height:
    30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    var(--orange);

  color:
    #fff;

  font-size:
    8px;

}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.bi-final-light-main {

  display:
    grid;

  grid-template-columns:
    1fr 260px;

  gap:
    80px;

  align-items:
    center;

}


/* =========================================================
   HEADLINE
========================================================= */

.bi-final-light-copy h2 {

  margin:
    0;

  max-width:
    1000px;

  font-size:
    clamp(58px,6.5vw,105px);

  line-height:
    .86;

  letter-spacing:
    -.065em;

  font-weight:
    760;

}


.bi-final-light-copy h2 span {

  display:
    block;

  color:
    rgba(10,10,10,.33);

}


.bi-final-light-copy h2 em {

  display:
    block;

  width:
    fit-content;

  color:
    var(--orange);

  font-style:
    normal;

  position:
    relative;

}


/* =========================================================
   FUNKY UNDERLINE
========================================================= */

.bi-final-light-copy h2 em::after {

  content: "";

  position:
    absolute;

  left: 1%;

  bottom: -8px;

  width: 90%;

  height:
    11px;

  border-bottom:
    4px solid var(--orange);

  border-radius:
    50%;

  transform:
    rotate(-1deg);

}


/* =========================================================
   BODY COPY
========================================================= */

.bi-final-light-copy p {

  max-width:
    760px;

  margin:
    32px 0 0;

  color:
    rgba(10,10,10,.59);

  font-size:
    14px;

  line-height:
    1.7;

}


/* =========================================================
   CIRCLE CTA
========================================================= */

.bi-final-light-action {

  display:
    flex;

  justify-content:
    flex-end;

}


.bi-final-light-circle {

  width:
    210px;

  height:
    210px;

  border-radius:
    50%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  text-decoration:
    none;

  background:
    var(--orange);

  color:
    #fff;

  box-shadow:
    0 28px 55px
    rgba(240,85,44,.18);

  transition:
    transform .25s ease,
    background .3s ease,
    color .3s ease;

}


.bi-final-light-circle span {

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .16em;

}


.bi-final-light-circle strong {

  margin-top:
    3px;

  font-size:
    29px;

  letter-spacing:
    -.045em;

}


.bi-final-light-circle i {

  margin-top:
    10px;

  font-size:
    24px;

  font-style:
    normal;

  transition:
    transform .3s ease;

}


.bi-final-light-circle:hover {

  background:
    var(--yellow);

  color:
    var(--black);

}


.bi-final-light-circle:hover i {

  transform:
    translate(4px,-4px);

}


/* =========================================================
   CONTACT STRIP
   3 COLUMNS ONLY
========================================================= */

.bi-final-light-strip {

  margin-top:
    68px;

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid rgba(0,0,0,.13);

  border-bottom:
    1px solid rgba(0,0,0,.13);

  background:
    rgba(255,255,255,.22);

  transform:
    rotate(-.45deg);

}


/* =========================================================
   CONTACT COLUMNS
========================================================= */

.bi-final-light-strip > a,
.bi-final-light-contact-group {

  min-height:
    110px;

  padding:
    18px 24px;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  border-right:
    1px solid rgba(0,0,0,.11);

  color:
    var(--black);

}


/* Remove border from final column */

.bi-final-light-strip > .bi-final-light-contact-group {

  border-right:
    0;

}


/* =========================================================
   OFFICE + EMAIL
========================================================= */

.bi-final-light-strip > a {

  text-decoration:
    none;

  font-size:
    12px;

  line-height:
    1.45;

  font-weight:
    650;

  transition:
    background .3s ease,
    color .3s ease;

}


.bi-final-light-strip > a > span {

  width:
    31px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--black);

  color:
    #fff;

  font-size:
    8px;

  font-weight:
    850;

  transition:
    background .3s ease;

}


/* =========================================================
   SMALL LABEL
========================================================= */

.bi-final-light-strip small {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(0,0,0,.55);

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    .13em;

}


/* =========================================================
   CALL COLUMN
========================================================= */

.bi-final-light-contact-group {

  display:
    grid;

  grid-template-columns:
    31px 1fr;

  grid-template-rows:
    auto auto auto auto;

  column-gap:
    15px;

  row-gap:
    5px;

  align-content:
    center;

}


.bi-final-light-contact-heading {

  grid-column:
    1 / -1;

  display:
    flex;

  align-items:
    center;

  gap:
    15px;

  margin-bottom:
    3px;

}


.bi-final-light-contact-heading span {

  width:
    31px;

  height:
    31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-shrink:
    0;

  border-radius:
    50%;

  background:
    var(--black);

  color:
    white;

  font-size:
    8px;

  font-weight:
    850;

}


.bi-final-light-contact-heading small {

  margin:
    0;

}


/* PHONE LINKS */

.bi-final-light-contact-group > a {

  grid-column:
    2;

  color:
    var(--black);

  text-decoration:
    none;

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1.35;

  transition:
    color .3s ease,
    transform .3s ease;

}


.bi-final-light-contact-group > a:hover {

  color:
    var(--orange);

  transform:
    translateX(4px);

}


/* =========================================================
   HOVER — OFFICE / EMAIL
========================================================= */

.bi-final-light-strip > a:hover {

  background:
    rgba(240,85,44,.07);

  color:
    var(--orange);

}


.bi-final-light-strip > a:hover > span {

  background:
    var(--orange);

}


.bi-final-light-strip > a:hover small {

  color:
    var(--orange);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .bi-final-light-wrap {

    width:
      calc(100% - 50px);

  }


  .bi-final-light-main {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .bi-final-light-action {

    justify-content:
      flex-start;

  }


  .bi-final-light-circle {

    width:
      180px;

    height:
      180px;

  }


  /* Keep 3 columns but allow wrapping */

  .bi-final-light-strip {

    grid-template-columns:
      repeat(3,1fr);

    transform:
      none;

  }


  .bi-final-light-strip > a,
  .bi-final-light-contact-group {

    padding:
      16px;

  }


  .bi-final-light-strip > a {

    font-size:
      11px;

  }


  .bi-final-light-contact-group > a {

    font-size:
      11px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .bi-final-cta-light {

    padding:
      72px 0 35px;

  }


  .bi-final-light-wrap {

    width:
      calc(100% - 30px);

  }


  .bi-final-light-copy h2 {

    font-size:
      clamp(48px,14vw,68px);

  }


  .bi-final-light-copy p {

    font-size:
      13px;

  }


  .bi-final-light-circle {

    width:
      150px;

    height:
      150px;

  }


  .bi-final-light-circle strong {

    font-size:
      22px;

  }


  /* =====================================================
     CONTACT STRIP — MOBILE
     Still 3 logical columns, stacked vertically
  ===================================================== */

  .bi-final-light-strip {

    grid-template-columns:
      1fr;

    transform:
      none;

  }


  .bi-final-light-strip > a,
  .bi-final-light-contact-group {

    min-height:
      72px;

    padding:
      16px;

    border-right:
      0;

    border-bottom:
      1px solid rgba(0,0,0,.10);

  }


  .bi-final-light-strip > a:last-of-type {

    border-bottom:
      0;

  }


  .bi-final-light-contact-group {

    border-bottom:
      0;

  }


  .bi-final-light-contact-group > a {

    font-size:
      12px;

  }


  .bi-final-light-contact-heading {

    margin-bottom:
      2px;

  }


  .bi-final-light-strip small {

    font-size:
      7px;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-077c05a *//* =========================================================
   BRAND IMPRINT — FAQ V2
========================================================= */

.bi-faq-v2 {

  --orange: #F0552C;
  --lavender: #CFC5F4;
  --black: #111111;
  --white: #F8F6F1;
  --yellow: #DFFF46;

  position: relative;

  overflow: hidden;

  background: var(--lavender);

  color: var(--black);

  padding: 110px 0 100px;

}


/* =========================================================
   BACKGROUND
========================================================= */

.faq-v2-noise {

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(17,17,17,.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17,17,17,.035) 1px,
      transparent 1px
    );

  background-size: 92px 92px;

  opacity: .7;

}


/* =========================================================
   WRAPPER
========================================================= */

.faq-v2-wrap {

  width:
    min(1360px, calc(100% - 80px));

  margin: auto;

  display: grid;

  grid-template-columns:
    390px 1fr;

  gap: 100px;

  align-items: start;

  position: relative;

  z-index: 2;

}


/* =========================================================
   LEFT
========================================================= */

.faq-v2-left {

  position: sticky;

  top: 100px;

}


/* =========================================================
   LABEL
========================================================= */

.faq-v2-label {

  width: max-content;

  padding:
    9px 15px;

  background:
    var(--black);

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .15em;

  transform:
    rotate(-2deg);

}


/* =========================================================
   FAQ TITLE
   FIXED — F A Q NOW STAYS TOGETHER
========================================================= */

.faq-v2-heading {

  margin:
    32px 0 0;

  padding:
    0;

  display:
    block;

  white-space:
    nowrap;

  font-size:
    clamp(125px, 13vw, 205px);

  line-height:
    .78;

  letter-spacing:
    -.105em;

  font-weight:
    900;

  transition:
    transform .45s cubic-bezier(.16,1,.3,1);

}


/* Individual letters */

.faq-v2-heading span {

  display:
    inline-block;

  vertical-align:
    top;

  margin:
    0;

  padding:
    0;

  line-height:
    .78;

}


/* F */

.faq-letter-f {

  color:
    var(--black);

}


/* A */

.faq-letter-a {

  color:
    var(--orange);

  position:
    relative;

  z-index:
    2;

  transform:
    translateX(-3px)
    rotate(-6deg);

}


/* Q */

.faq-letter-q {

  color:
    var(--black);

  transform:
    translateX(-5px);

}


/* =========================================================
   LEFT DESCRIPTION
========================================================= */

.faq-v2-left p {

  max-width:
    300px;

  margin:
    38px 0 0;

  font-size:
    15px;

  line-height:
    1.6;

  color:
    var(--black);

  font-weight:
    500;

}


/* =========================================================
   QUESTION STICKER
========================================================= */

.faq-v2-sticker {

  width:
    110px;

  height:
    110px;

  margin:
    35px 0 0 135px;

  border-radius:
    50%;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--yellow);

  color:
    var(--black);

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .10em;

  transform:
    rotate(9deg);

  box-shadow:
    8px 9px 0
    rgba(17,17,17,.12);

  animation:
    faqStickerFloat
    4s ease-in-out infinite;

}


.faq-v2-sticker span {

  font-size:
    34px;

  line-height:
    1;

  margin-bottom:
    5px;

}


@keyframes faqStickerFloat {

  50% {

    transform:
      translateY(-8px)
      rotate(3deg);

  }

}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.faq-v2-right {

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

}


/* =========================================================
   FAQ CARD
========================================================= */

.faq-v2-item {

  position:
    relative;

  overflow:
    hidden;

  background:
    rgba(248,246,241,.96);

  border:
    1px solid rgba(17,17,17,.13);

  border-radius:
    8px;

  box-shadow:
    5px 6px 0
    rgba(17,17,17,.08);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    background .35s ease,
    box-shadow .35s ease;

}


.faq-v2-item:nth-child(odd) {

  transform:
    rotate(-.35deg);

}


.faq-v2-item:nth-child(even) {

  transform:
    rotate(.35deg);

}


.faq-v2-item:hover {

  transform:
    translateX(-7px)
    rotate(0deg);

  box-shadow:
    10px 10px 0
    rgba(17,17,17,.10);

}


/* =========================================================
   ACTIVE CARD
========================================================= */

.faq-v2-item.active {

  background:
    var(--orange);

  color:
    white;

  transform:
    translateX(-13px)
    rotate(-.6deg);

  box-shadow:
    12px 12px 0
    rgba(17,17,17,.13);

}


/* =========================================================
   QUESTION
========================================================= */

.faq-v2-question {

  width:
    100%;

  min-height:
    105px;

  padding:
    20px 23px;

  display:
    grid;

  grid-template-columns:
    45px 1fr 46px;

  gap:
    20px;

  align-items:
    center;

  border:
    0;

  background:
    transparent;

  color:
    inherit;

  font-family:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

}


/* =========================================================
   NUMBER
========================================================= */

.faq-v2-num {

  align-self:
    start;

  margin-top:
    8px;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .14em;

  color:
    var(--black);

}


.faq-v2-item.active
.faq-v2-num {

  color:
    rgba(255,255,255,.85);

}


/* =========================================================
   QUESTION TITLE
========================================================= */

.faq-v2-title {

  max-width:
    720px;

  font-size:
    clamp(20px, 1.8vw, 28px);

  line-height:
    1.15;

  letter-spacing:
    -.025em;

  font-weight:
    750;

  color:
    var(--black);

}


.faq-v2-item.active
.faq-v2-title {

  color:
    #fff;

}


/* =========================================================
   TOGGLE
========================================================= */

.faq-v2-toggle {

  justify-self:
    end;

  width:
    42px;

  height:
    42px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--black);

  color:
    white;

  font-size:
    22px;

  line-height:
    1;

  transition:
    transform .35s ease,
    background .35s ease,
    color .35s ease;

}


.faq-v2-question:hover
.faq-v2-toggle {

  transform:
    rotate(12deg)
    scale(1.06);

}


.faq-v2-item.active
.faq-v2-toggle {

  background:
    var(--yellow);

  color:
    var(--black);

  transform:
    rotate(45deg);

}


/* =========================================================
   ANSWER
========================================================= */

.faq-v2-answer {

  max-height:
    0;

  overflow:
    hidden;

  transition:
    max-height .55s
    cubic-bezier(.16,1,.3,1);

}


.faq-v2-answer-inner {

  max-width:
    760px;

  padding:
    0 90px 30px 88px;

}


.faq-v2-answer p {

  margin:
    0 0 10px;

  font-size:
    15px;

  line-height:
    1.7;

  color:
    var(--black);

}


.faq-v2-item.active
.faq-v2-answer p {

  color:
    rgba(255,255,255,.95);

}


/* =========================================================
   BOTTOM CTA
========================================================= */

.faq-v2-bottom {

  margin-top:
    25px;

  padding:
    28px 30px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  background:
    var(--black);

  color:
    white;

  border-radius:
    8px 8px 40px 8px;

  transform:
    rotate(.4deg);

}


/* label */

.faq-v2-bottom > div > span {

  display:
    block;

  margin-bottom:
    7px;

  color:
    var(--orange);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .15em;

}


/* CTA text */

.faq-v2-bottom strong {

  display:
    block;

  font-size:
    clamp(19px,2vw,26px);

  line-height:
    1.1;

  letter-spacing:
    -.025em;

  color:
    #fff;

}


/* CTA button */

.faq-v2-bottom > a {

  flex-shrink:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  padding:
    14px 18px;

  border-radius:
    100px;

  background:
    var(--yellow);

  color:
    var(--black);

  text-decoration:
    none;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    .11em;

  transition:
    transform .3s ease,
    background .3s ease;

}


.faq-v2-bottom > a span {

  font-size:
    16px;

  transition:
    transform .3s ease;

}


.faq-v2-bottom > a:hover {

  background:
    var(--orange);

  color:
    white;

  transform:
    rotate(-3deg)
    scale(1.04);

}


.faq-v2-bottom > a:hover span {

  transform:
    translate(3px,-3px);

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

  .faq-v2-wrap {

    width:
      calc(100% - 50px);

    grid-template-columns:
      280px 1fr;

    gap:
      55px;

  }


  .faq-v2-heading {

    font-size:
      125px;

  }


  .faq-v2-left p {

    font-size:
      14px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .bi-faq-v2 {

    padding:
      75px 0 65px;

  }


  .faq-v2-wrap {

    width:
      calc(100% - 30px);

    grid-template-columns:
      1fr;

    gap:
      55px;

  }


  .faq-v2-left {

    position:
      relative;

    top:
      auto;

  }


  /* =====================================================
     MOBILE FAQ TITLE
     F A Q ALWAYS ON ONE LINE
  ===================================================== */

  .faq-v2-heading {

    display:
      block;

    width:
      max-content;

    margin:
      25px 0 0;

    font-size:
      clamp(105px, 30vw, 145px);

    line-height:
      .78;

    letter-spacing:
      -.11em;

    white-space:
      nowrap;

  }


  .faq-v2-heading span {

    display:
      inline-block;

    line-height:
      .78;

  }


  .faq-letter-a {

    transform:
      translateX(-2px)
      rotate(-5deg);

  }


  .faq-letter-q {

    transform:
      translateX(-4px);

  }


  /* description */

  .faq-v2-left p {

    max-width:
      290px;

    margin-top:
      28px;

    font-size:
      14px;

    line-height:
      1.55;

  }


  /* sticker */

  .faq-v2-sticker {

    position:
      absolute;

    right:
      10px;

    bottom:
      -25px;

    width:
      85px;

    height:
      85px;

    margin:
      0;

  }


  .faq-v2-sticker span {

    font-size:
      26px;

  }


  /* question */

  .faq-v2-question {

    min-height:
      90px;

    grid-template-columns:
      28px 1fr 38px;

    gap:
      10px;

    padding:
      17px 15px;

  }


  .faq-v2-title {

    font-size:
      18px;

    line-height:
      1.18;

  }


  .faq-v2-toggle {

    width:
      36px;

    height:
      36px;

    font-size:
      19px;

  }


  .faq-v2-answer-inner {

    padding:
      0 20px 24px 53px;

  }


  .faq-v2-answer p {

    font-size:
      14px;

    line-height:
      1.6;

  }


  .faq-v2-item.active {

    transform:
      translateX(0)
      rotate(-.5deg);

  }


  /* bottom CTA */

  .faq-v2-bottom {

    padding:
      25px;

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .faq-v2-bottom strong {

    font-size:
      20px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:380px){

  .faq-v2-heading {

    font-size:
      98px;

  }


  .faq-v2-left p {

    max-width:
      250px;

  }

}/* End custom CSS */