.font-heading {
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.homepage-title {
    max-width: 18ch;
    font-size: clamp(2.75rem, 5.2vw, 3.75rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

#hero.homepage-hero {
    padding-block: clamp(3rem, 5vw, 4rem);
}

#hero .homepage-subtitle {
    font-size: clamp(1.2rem, 1.65vw, 1.4rem);
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

#hero .homepage-tagline {
    font-size: clamp(1.2rem, 1.65vw, 1.4rem);
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}

#hero .homepage-lead {
    max-width: 45rem;
    font-size: clamp(1.125rem, 1.7vw, 1.4rem);
    line-height: 1.55;
    margin-bottom: 1.5rem;
}

#hero .homepage-highlights {
    margin-bottom: 1.5rem;
}

#hero .homepage-highlights > * + * {
    margin-top: 0.75rem;
}

#hero .homepage-highlights > div p {
    line-height: 1.5;
}

.homepage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.homepage-actions > a,
html[lang="sr"] #from-practice .homepage-case-studies-link,
html[lang="sr"] #contact a.bg-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.875rem 2rem;
    border-radius: 0;
    font-size: 1rem;
    line-height: 1.5;
}

.homepage-actions > a.bg-dark,
html[lang="sr"] #from-practice .homepage-case-studies-link,
html[lang="sr"] #contact a.bg-dark {
    background-color: #111;
    color: #fff;
}

.homepage-actions > a:not(.bg-dark) {
    border: 1px solid #d1d5db;
    color: #111;
}

.site-nav-links a.bg-dark,
#mobile-menu a.bg-dark,
#contact a.bg-dark,
.dfam-promo-bar .dfam-promo-cta,
.dfam-promo-bar .dfam-promo-close {
    border-radius: 0;
}

h2.homepage-section-title,
h2.practice-title {
    margin-top: 0;
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

main > section.py-16:not(#hero) {
    padding-block: 3rem;
}

@media (min-width: 768px) {
    main > section.py-16:not(#hero) {
        padding-block: 3.5rem;
    }
}

h3.homepage-card-title {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    line-height: 1.25;
    text-wrap: balance;
}

#consulting-services .grid > div img {
    aspect-ratio: 1600 / 736;
    object-fit: contain;
}

#hero.homepage-hero--with-background {
    isolation: isolate;
    min-height: clamp(40rem, 56vw, 50rem);
    overflow: hidden;
    position: relative;
}

#hero.homepage-hero--with-background::before {
    background: linear-gradient(
        90deg,
        #fff 0%,
        #fff 42%,
        rgba(255, 255, 255, .98) 50%,
        rgba(255, 255, 255, .84) 60%,
        rgba(255, 255, 255, .48) 70%,
        rgba(255, 255, 255, .12) 81%,
        rgba(255, 255, 255, 0) 92%
    );
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

#hero.homepage-hero--with-background .homepage-hero__media {
    inset: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

#hero.homepage-hero--with-background .homepage-hero__media img {
    height: 100%;
    inset: 0;
    max-width: none;
    object-fit: cover;
    object-position: 76% center;
    position: absolute;
    width: 100%;
}

#hero.homepage-hero--with-background > .site-container {
    position: relative;
    z-index: 1;
}

#hero.homepage-hero--with-background .site-reading {
    margin-inline: 0;
    max-width: none;
}

#hero.homepage-hero--with-background .homepage-hero__content {
    max-width: 49rem;
    width: min(100%, 52vw);
}

@media (min-width: 768px) and (max-width: 1023px) {
    #hero.homepage-hero--with-background::before {
        background: linear-gradient(
            90deg,
            #fff 0%,
            #fff 60%,
            rgba(255, 255, 255, .94) 72%,
            rgba(255, 255, 255, .7) 86%,
            rgba(255, 255, 255, .3) 100%
        );
    }

    #hero.homepage-hero--with-background .homepage-hero__content {
        width: min(100%, 70vw);
    }
}

@media (min-width: 768px) {
    #hero.homepage-hero--with-background {
        padding-block: clamp(2.5rem, 3vw, 2.75rem);
    }
}

@media (max-width: 767px) {
    #hero.homepage-hero--with-background {
        min-height: 0;
    }

    #hero.homepage-hero--with-background::before {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, .99) 0%,
            rgba(255, 255, 255, .98) 68%,
            rgba(255, 255, 255, .93) 100%
        );
    }

    #hero.homepage-hero--with-background .homepage-hero__media img {
        object-position: 76% 40%;
    }

    #hero.homepage-hero--with-background .homepage-hero__content {
        max-width: 100%;
        width: 100%;
    }
}