/* Homepage typography and lightweight motion system. */
.page-content.homepage-experience,
.latest-news-experience {
  --homepage-heading-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --homepage-body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--homepage-body-font);
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
}

/* The homepage display hierarchy uses one rounded, premium heading face. */
.page-content.homepage-experience :is(
  h1, h2, h3, h4, h5, h6,
  .theme-title h2,
  .portfolio-heading,
  .portfolio-meta-title,
  .our-work-heading,
  .our-work-item-title,
  .expertise-section-title,
  .expertise-member-name,
  .gr-center-heading,
  .blog-card-title,
  .home-contact-content h2,
  .home-contact-card h3
) {
  font-family: var(--homepage-heading-font) !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-rendering: optimizeLegibility;
}

.latest-news-experience :is(h2, h3, .theme-title h2, .blog-card-title) {
  font-family: var(--homepage-heading-font) !important;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-rendering: optimizeLegibility;
}

/* Keep body copy, UI, labels and card details restrained and highly readable. */
.page-content.homepage-experience :is(
  p, a, li, label, button, input, textarea, select,
  .ht-subtitle, .portfolio-badge, .portfolio-meta-desc,
  .our-work-pill-badge, .our-work-subheading, .our-work-item-desc,
  .expertise-pill-badge, .expertise-member-role,
  .gr-rating-summary, .gr-card, .blog-card-meta, .blog-card-excerpt,
  .home-contact-field, .home-contact-submit,
  .home-contact-card p
) {
  font-family: var(--homepage-body-font);
  font-style: normal;
}

.latest-news-experience :is(p, a, li, label, button, .ht-subtitle, .blog-card-meta, .blog-card-excerpt) {
  font-family: var(--homepage-body-font);
  font-style: normal;
}

.page-content.homepage-experience :is(p, .portfolio-meta-desc, .our-work-subheading, .our-work-item-desc, .gr-card-text, .blog-card-excerpt, .home-contact-card p) {
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.58;
}

.latest-news-experience .blog-card-excerpt {
  font-weight: 400;
  letter-spacing: -.012em;
  line-height: 1.58;
}

.page-content.homepage-experience :is(
  .ht-subtitle h6, .portfolio-badge-text, .our-work-pill-badge,
  .expertise-pill-text, .service-title h4,
  .service-desc h4, .industries-link-text, .blog-card-btn,
  .home-contact-submit, .home-contact-field input, .home-contact-field textarea
) {
  font-family: var(--homepage-body-font) !important;
  font-weight: 600;
  letter-spacing: .015em;
}

.latest-news-experience :is(.ht-subtitle h6, .blog-card-btn) {
  font-family: var(--homepage-body-font) !important;
  font-weight: 600;
  letter-spacing: .015em;
}

/* Shared chrome is only refined when it belongs to this homepage render. */
body:has(.page-content.homepage-experience) #site-header :is(.nav-link, .services-nav-link, .industries-nav-link, .themeht-btn, .header-btn),
body:has(.page-content.homepage-experience) .footer :is(a, p, li, h3, .ask-footer-heading, .ask-footer-card-heading) {
  font-family: var(--homepage-body-font);
  font-style: normal;
}

body:has(.page-content.homepage-experience) #site-header :is(.nav-link, .services-nav-link, .industries-nav-link),
body:has(.page-content.homepage-experience) .footer :is(.ask-footer-heading, .ask-footer-card-heading) {
  font-weight: 600;
  letter-spacing: .015em;
}

body:has(.page-content.homepage-experience) .footer :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--homepage-heading-font) !important;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
}

body.homepage-experience #site-header {
  transition: background-color .24s ease, border-color .24s ease, box-shadow .24s ease, padding .24s ease;
}

body.homepage-experience #site-header.is-scrolled {
  background: rgba(7, 8, 8, .96);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

body.homepage-experience #site-header .navbar-brand,
body.homepage-experience #site-header .header-btn,
body.homepage-experience #site-header .themeht-btn {
  animation: homepage-nav-enter .55s cubic-bezier(.22, 1, .36, 1) both;
}

body.homepage-experience #site-header .desktop-navbar-nav {
  animation: homepage-nav-fade .45s ease both;
  animation-delay: .05s;
}
body.homepage-experience #site-header .header-btn,
body.homepage-experience #site-header .themeht-btn { animation-delay: .1s; }

body.homepage-experience #site-header .nav-link {
  transition: color .2s ease, opacity .2s ease !important;
}

body.homepage-experience #site-header .nav-link:hover { opacity: 1; }

.homepage-experience .home-reveal,
.latest-news-experience .home-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--home-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.homepage-experience .home-reveal.home-reveal-scale,
.latest-news-experience .home-reveal.home-reveal-scale {
  transform: translate3d(0, 18px, 0) scale(.985);
}

.homepage-experience .home-reveal.is-revealed,
.latest-news-experience .home-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.homepage-experience .service-item,
.homepage-experience .our-work-card,
.homepage-experience .expertise-card,
.homepage-experience .feedback-card,
.homepage-experience .gr-card,
.homepage-experience .blog-card-2x2,
.homepage-experience .agency-stat-card {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
  will-change: transform;
}

.latest-news-experience .blog-card-2x2 {
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, background-color .28s ease, box-shadow .28s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .homepage-experience .service-item:hover,
  .homepage-experience .our-work-card:hover,
  .homepage-experience .feedback-card:hover,
  .homepage-experience .gr-card:hover,
  .homepage-experience .blog-card-2x2:hover,
  .homepage-experience .agency-stat-card:hover {
    transform: translate3d(0, -5px, 0);
  }

  .latest-news-experience .blog-card-2x2:hover {
    transform: translate3d(0, -5px, 0);
  }

  .homepage-experience .expertise-card:hover { transform: translate3d(0, -4px, 0) scale(1.01); }

  .homepage-experience .industries-link-anchor {
    transition: color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1), background-color .22s ease;
  }

  .homepage-experience .industries-link-anchor:hover {
    transform: translate3d(4px, 0, 0);
  }

  .homepage-experience .industries-link-anchor:hover .industries-link-icon {
    transform: scale(1.08);
  }

  .homepage-experience .industries-link-icon {
    transition: transform .22s cubic-bezier(.22, 1, .36, 1);
  }

  .homepage-experience .footer a,
  .homepage-experience .footer .ask-footer-social-row a {
    transition: color .2s ease, opacity .2s ease, transform .2s cubic-bezier(.22, 1, .36, 1);
  }

  .homepage-experience .footer .ask-footer-social-row a:hover {
    transform: translate3d(0, -3px, 0);
  }
}

@keyframes homepage-nav-enter {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes homepage-nav-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.homepage-experience #site-header,
  .homepage-experience .home-reveal,
  .homepage-experience .service-item,
  .homepage-experience .our-work-card,
  .homepage-experience .expertise-card,
  .homepage-experience .feedback-card,
  .homepage-experience .gr-card,
  .homepage-experience .blog-card-2x2,
  .homepage-experience .agency-stat-card {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .latest-news-experience .home-reveal,
  .latest-news-experience .blog-card-2x2 {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none;
  }
}