/* Reference-inspired portrait and floating career highlights. */
html body.page-home main#main #introduction .portrait-showcase {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 580px !important;
  justify-self: center !important;
  padding: 30px 42px 0 !important;
  margin: 0 !important;
  order: 0 !important;
}
.portrait-showcase::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 -20px 80px !important;
  background: radial-gradient(ellipse at 55% 80%, #ded5e55c, transparent 70%), radial-gradient(ellipse at 30% 35%, #fff2e4, transparent 65%) !important;
  filter: blur(22px) !important;
  pointer-events: none !important;
}
html body.page-home main#main #introduction .showcase-photo {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: .79 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid #efb786 !important;
  border-right-color: #d6c6e6 !important;
  border-bottom-color: #d6c6e6 !important;
  border-radius: 38px !important;
  background: #b1abaa !important;
  box-shadow: 0 32px 60px -20px #33263a3b !important;
}
html body.page-home main#main #introduction .showcase-photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
  object-fit: cover !important;
  object-position: 52% center !important;
  transform: scale(1.12) !important;
  filter: none !important;
}
html body.page-home main#main #introduction .showcase-photo figcaption {
  position: absolute !important;
  z-index: 2 !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 30px !important;
  padding: 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #ffffffdb !important;
  border-radius: 40px !important;
  background: #fffffff0 !important;
  backdrop-filter: blur(16px) !important;
  text-align: center !important;
  box-shadow: 0 4px 20px #24202412 !important;
}
html body.page-home main#main #introduction .showcase-photo figcaption strong {
  margin: 0 !important;
  color: #303333 !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
}
html body.page-home main#main #introduction .showcase-photo figcaption span {
  color: #656967 !important;
  font-size: 9px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.showcase-results { position: absolute !important; top: 30px !important; left: 42px !important; right: 42px !important; aspect-ratio: .79 !important; pointer-events: none !important; }
html body.page-home main#main #introduction .showcase-result {
  position: absolute !important;
  pointer-events: auto !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 9px !important;
  width: 166px !important;
  min-height: 104px !important;
  padding: 19px 20px !important;
  border: 1.5px solid #fff !important;
  border-radius: 24px !important;
  background: #ffffffdf !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 40px #36303b1c !important;
  text-decoration: none !important;
  transition: transform .25s, box-shadow .25s !important;
}
html body.page-home main#main #introduction .showcase-result strong { color: #ff710b !important; font-size: 30px !important; line-height: 1 !important; font-weight: 750 !important; letter-spacing: -.05em !important; }
html body.page-home main#main #introduction .showcase-result span { color: #5f6262 !important; font-size: 11px !important; line-height: 1.5 !important; font-weight: 550 !important; letter-spacing: -.02em !important; }
.showcase-result.result-leads { top: 6% !important; right: -42px !important; transform: rotate(5deg) !important; }
.showcase-result.result-projects { top: 40% !important; left: -42px !important; transform: rotate(8deg) !important; }
.showcase-result.result-spend { top: 58% !important; right: -46px !important; transform: rotate(10deg) !important; width: 188px !important; }
html body.page-home main#main #introduction .showcase-result:hover { transform: rotate(0) translateY(-4px) !important; box-shadow: 0 24px 44px #36303b25 !important; }
.showcase-spark { position: absolute !important; right: 12px !important; top: 0 !important; color: #ffb27b !important; font-size: 34px !important; line-height: 1 !important; }
html body.page-home main#main #introduction .showcase-work {
  position: relative !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 52px !important;
  margin: -22px auto 0 !important;
  padding: 12px 26px !important;
  color: #f46a09 !important;
  border: 1.5px solid #fff !important;
  border-radius: 40px !important;
  background: #ffffffe8 !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 16px 30px #34303816 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background .2s, transform .2s !important;
}
.showcase-work:hover { background: #fff !important; transform: translateY(-2px) !important; }
.showcase-work span { font-size: 20px !important; line-height: 1 !important; }
.showcase-result:focus-visible, .showcase-work:focus-visible { outline: 3px solid #284835 !important; outline-offset: 5px !important; }
html body.page-home main#main #introduction .showcase-note { margin: 24px -25px 0 !important; color: #7b7d78 !important; font-size: 10px !important; line-height: 1.7 !important; text-align: center !important; }
.showcase-note > span { display: block !important; margin-bottom: 8px !important; color: #52654f !important; font-size: 9px !important; font-weight: 550 !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
@media (max-width: 1000px) and (min-width: 851px) {
  html body.page-home main#main #introduction .portrait-showcase { padding-inline: 24px !important; }
  .showcase-results { left: 24px !important; right: 24px !important; }
  .showcase-result.result-leads { right: -24px !important; }
  .showcase-result.result-projects { left: -24px !important; }
  .showcase-result.result-spend { right: -24px !important; }
  html body.page-home main#main #introduction .showcase-result { width: 142px !important; min-height: 94px !important; padding: 16px !important; }
  html body.page-home main#main #introduction .showcase-result strong { font-size: 27px !important; }
  .showcase-result.result-spend { width: 160px !important; }
}
@media (max-width: 850px) {
  html body.page-home main#main #introduction .portrait-showcase { max-width: 530px !important; margin: 18px 0 20px !important; order: 2 !important; }
}
@media (max-width: 550px) {
  html body.page-home main#main #introduction .portrait-showcase { padding: 26px 25px 0 !important; }
  html body.page-home main#main #introduction .showcase-photo { border-radius: 28px !important; aspect-ratio: .73 !important; }
  .showcase-results { top: 26px !important; left: 25px !important; right: 25px !important; aspect-ratio: .73 !important; }
  html body.page-home main#main #introduction .showcase-result { width: 128px !important; min-height: 86px !important; padding: 14px !important; gap: 7px !important; border-radius: 19px !important; }
  html body.page-home main#main #introduction .showcase-result strong { font-size: 27px !important; }
  html body.page-home main#main #introduction .showcase-result span { font-size: 9px !important; }
  .showcase-result.result-leads { top: 6% !important; right: -25px !important; }
  .showcase-result.result-projects { top: 43% !important; left: -25px !important; }
  .showcase-result.result-spend { top: 54% !important; right: -25px !important; width: 145px !important; }
  html body.page-home main#main #introduction .showcase-photo figcaption { left: 10px !important; right: 10px !important; bottom: 28px !important; padding: 11px 8px !important; }
  html body.page-home main#main #introduction .showcase-photo figcaption strong { font-size: 14px !important; }
  html body.page-home main#main #introduction .showcase-photo figcaption span { font-size: 8px !important; }
  html body.page-home main#main #introduction .showcase-work { font-size: 12px !important; min-height: 48px !important; padding: 11px 22px !important; }
  .showcase-spark { font-size: 28px !important; right: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-result, .showcase-work { transition: none !important; }
}