/**
 * Home hero — vibrant services marquee.
 * Compact cards floating directly on the blue hero graphic.
 */
.lp-intro-section-container{
  position:relative;
  overflow:hidden;
  /* Keeps the existing bnr-graphic on top of a vibrant light-blue wash
     so the white search card reads as a panel floating on colour. */
  background-image:
    url(../images/bnr-graphic.png),
    linear-gradient(115deg,#bfdcfb 0%,#a9cdf8 52%,#c9c0f5 100%);
  background-repeat:no-repeat,no-repeat;
  background-position:top right,center;
  background-size:auto,cover;
}

/* Decorative bubbles on the blue wash, left of the search card */
.lkit-hero-bubbles{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:52%;
  pointer-events:none;
  z-index:0;
}
.lkit-hero-bubbles i{
  position:absolute;
  border-radius:50%;
  box-shadow:0 2px 8px rgba(30,80,150,.1);
  animation:lkitHeroFloat 9s ease-in-out infinite;
  will-change:transform;
}
.lkit-hero-bubbles i:nth-child(1){
  left:4%;
  top:15%;
  width:16px;
  height:16px;
  background:rgba(255,255,255,.8);
  animation-delay:0s;
}
.lkit-hero-bubbles i:nth-child(2){
  left:21%;
  top:9%;
  width:8px;
  height:8px;
  border:1.5px solid rgba(255,255,255,.75);
  animation-delay:1.4s;
}
.lkit-hero-bubbles i:nth-child(3){
  left:8%;
  bottom:17%;
  width:28px;
  height:28px;
  border:2px solid rgba(255,255,255,.7);
  animation-delay:2.6s;
}
.lkit-hero-bubbles i:nth-child(4){
  left:1.5%;
  top:48%;
  width:10px;
  height:10px;
  background:rgba(255,255,255,.7);
  animation-delay:.8s;
}
.lkit-hero-bubbles i:nth-child(5){
  left:27%;
  bottom:9%;
  width:13px;
  height:13px;
  border:1.5px solid rgba(255,255,255,.65);
  animation-delay:3.4s;
}

@keyframes lkitHeroFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-12px,0)}
}

@media (max-width:1199px){
  .lp-intro-section-container{
    background-size:68% auto,cover;
  }
}

@media (max-width:640px){
  .lp-intro-section-container{
    background-image:linear-gradient(160deg,#bfdcfb 0%,#a9cdf8 55%,#c9c0f5 100%);
    background-position:center;
    background-size:cover;
  }
  .lkit-hero-bubbles{
    width:100%;
  }
  .lkit-hero-bubbles i:nth-child(3){width:20px;height:20px}
}

.lkit-header-showcase{
  position:relative;
  width:100%;
  height:250px;
  margin:.35rem 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:hidden;
}

.lkit-header-showcase__cols{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.6rem;
  padding:0 .5rem;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 93%,transparent 100%);
}

.lkit-header-showcase__col{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  gap:.6rem;
  animation:lkitHsMarquee 34s linear infinite;
  -webkit-animation:lkitHsMarquee 34s linear infinite;
  animation-timing-function:linear;
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.lkit-header-showcase__col:nth-child(2){
  animation-duration:42s;
  -webkit-animation-duration:42s;
  animation-direction:reverse;
  -webkit-animation-direction:reverse;
  margin-top:-34px;
}
.lkit-header-showcase__col:nth-child(3){
  animation-duration:38s;
  -webkit-animation-duration:38s;
  margin-top:-18px;
}
.lkit-header-showcase__col:nth-child(4){
  display:none;
  animation-duration:46s;
  -webkit-animation-duration:46s;
  animation-direction:reverse;
  -webkit-animation-direction:reverse;
  margin-top:-52px;
}
.lkit-header-showcase:hover .lkit-header-showcase__col{
  animation-play-state:paused;
  -webkit-animation-play-state:paused;
}

.lkit-hs-tile{
  --tint:#1553d6;
  --tint-2:#2f7bff;
  position:relative;
  -webkit-box-flex:0;
  -webkit-flex:0 0 auto;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
  display:block;
  border-radius:14px;
  padding:0;
  background:linear-gradient(150deg,var(--tint) 0%,var(--tint-2) 100%);
  box-shadow:0 10px 24px rgba(12,32,68,.28);
  text-align:left;
  text-decoration:none !important;
  color:#fff;
  border:0;
  overflow:hidden;
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s cubic-bezier(.22,1,.36,1);
}
.lkit-hs-tile:hover,
.lkit-hs-tile:focus{
  transform:translate3d(0,-4px,0);
  box-shadow:0 18px 34px rgba(12,32,68,.36);
  color:#fff;
  outline:none;
}
.lkit-hs-tile__logo{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-align:center;
  -webkit-align-items:center;
  -ms-flex-align:center;
  align-items:center;
  gap:.35rem;
  padding:.45rem .6rem .35rem;
  font-weight:600;
  font-size:.72rem;
  line-height:1.2;
  color:#fff;
  letter-spacing:.01em;
  text-transform:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lkit-hs-tile__logo i{
  font-size:.78rem;
  color:#fff;
  opacity:.9;
  background:none;
  border:0;
  border-radius:0;
  width:auto;
  height:auto;
  -webkit-box-flex:0;
  -webkit-flex:0 0 auto;
  -ms-flex:0 0 auto;
  flex:0 0 auto;
}
.lkit-hs-tile__media{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:0 0 14px 14px;
  object-fit:cover;
  object-position:center 45%;
  background:transparent;
  box-shadow:none;
}

.lkit-hs-tile--listing{--tint:#0b3fc4;--tint-2:#1e6bff}
.lkit-hs-tile--webdev{--tint:#181c46;--tint-2:#4b2ec9}
.lkit-hs-tile--marketing{--tint:#5b16c4;--tint-2:#9333ea}
.lkit-hs-tile--guest{--tint:#04713c;--tint-2:#12a860}
.lkit-hs-tile--ai{--tint:#1339d6;--tint-2:#7c2ff2}
.lkit-hs-tile--brand{--tint:#e0326b;--tint-2:#ff6a3d}

/* Desktop: sit on the blue graphic, reach its right edge */
@media (min-width:992px){
  .lp-intro-section-container > .container{
    position:relative;
    z-index:2;
  }
  .lkit-home-showcase-spacer{
    min-height:340px;
  }
  /* Offsets are pulled in so the faded marquee edges line up with the
     search card, which starts below the section's 60px top padding. */
  .lkit-header-showcase{
    position:absolute;
    z-index:1;
    top:32px;
    right:0;
    bottom:55px;
    left:50%;
    width:auto;
    height:auto;
    margin:0;
  }
  .lkit-header-showcase__cols{
    gap:.7rem;
    padding:0 0 0 .35rem;
  }
  .lkit-hs-tile__logo{font-size:.76rem;padding:.5rem .65rem .4rem}
}

@media (min-width:1200px){
  .lkit-home-showcase-spacer{
    min-height:350px;
  }
  .lkit-header-showcase{
    left:48%;
  }
  .lkit-header-showcase__cols{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.7rem;
  }
  .lkit-header-showcase__col:nth-child(4){
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
  }
}

/* Tablet / mobile: showcase above the search card */
@media (max-width:991px){
  .lp-intro-section-container{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  .lp-intro-section-container > .container{
    position:relative;
    z-index:1;
    -webkit-box-ordinal-group:3;
    -webkit-order:2;
    -ms-flex-order:2;
    order:2;
    width:100%;
  }
  .lkit-home-showcase-spacer{
    display:none;
  }
  .lkit-header-showcase{
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
    -ms-flex-order:1;
    order:1;
    height:230px;
    margin:0 0 .75rem;
  }
}

@media (max-width:767px){
  .lkit-header-showcase{
    height:200px;
  }
  .lkit-header-showcase__cols{
    gap:.45rem;
    padding:0 .35rem;
  }
  .lkit-header-showcase__col{gap:.45rem}
  .lkit-hs-tile{border-radius:11px}
  .lkit-hs-tile__logo{font-size:.6rem;padding:.35rem .45rem .28rem;gap:.25rem}
  .lkit-hs-tile__logo i{font-size:.62rem}
  .lkit-hs-tile__media{border-radius:0 0 11px 11px}
}

@keyframes lkitHsMarquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-50%,0)}
}
@-webkit-keyframes lkitHsMarquee{
  from{-webkit-transform:translate3d(0,0,0)}
  to{-webkit-transform:translate3d(0,-50%,0)}
}

@media (prefers-reduced-motion:reduce){
  .lkit-header-showcase__col,
  .lkit-hero-bubbles i{animation:none !important;-webkit-animation:none !important}
}