@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
    .clip-path-reveal {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    }
}

@keyframes custom-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 1.5rem)); }
}

@media (min-width: 768px) {
    .desktop-marquee-track {
        animation: custom-marquee 40s linear infinite;
    }
    .marquee-group-wrapper:hover .desktop-marquee-track {
        animation-play-state: paused;
    }
}

:root {
    --color-forest-green: #1A3C2F;
    --color-dark-green: #0F2C24;
    --color-medium-green: #234D3C;
    --color-accent-green: #3A8A6C;
    --color-sage: #A8C1B4;
    --color-sage-bg: #EDF4F0;
    --color-light-green: #F4F8F5;
    --color-neutral: #F8F7F4;
    --color-terracotta: #C26B4E;
    --color-dark-text: #1C2521;
    --color-light-text: #E8F0EC;

    --font-size-micro: clamp(0.68rem, 0.65rem + 0.12vw, 0.78rem);
    --font-size-xs: clamp(0.76rem, 0.72rem + 0.16vw, 0.88rem);
    --font-size-sm: clamp(0.86rem, 0.8rem + 0.22vw, 1rem);
    --font-size-base: clamp(0.98rem, 0.92rem + 0.28vw, 1.125rem);
    --font-size-lead: clamp(1.08rem, 0.98rem + 0.46vw, 1.32rem);
    --font-size-h4: clamp(1.16rem, 1rem + 0.72vw, 1.45rem);
    --font-size-h3: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
    --font-size-h2: clamp(2.1rem, 1.35rem + 3.2vw, 4.35rem);
    --font-size-hero: clamp(2rem, 1.05rem + 5vw, 5.5rem);
    --font-size-stat: clamp(2.45rem, 1.7rem + 3.2vw, 4.25rem);
}

/* Custom selection color */
::selection {
    background-color: var(--color-forest-green);
    color: var(--color-light-green);
}

/* Hide scrollbar for horizontal scrolling area but keep functionality */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Lenis smooth scroll basic setup */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-smooth iframe {
    pointer-events: none;
}

.gsap-reveal {
    visibility: hidden;
}

/* Responsive typography scale.
   Selectors intentionally include body so these rules beat Tailwind CDN utilities. */
html {
    font-size: 100%;
    text-size-adjust: 100%;
}

body {
    font-size: var(--font-size-base);
    line-height: 1.65;
}

body h1,
body .hero-title {
    font-size: var(--font-size-hero);
    line-height: 1.05;
    letter-spacing: 0;
}

body h2 {
    font-size: var(--font-size-h2);
    line-height: 1.1;
    letter-spacing: 0;
}

body h3 {
    font-size: var(--font-size-h3);
    line-height: 1.2;
    letter-spacing: 0;
}

body h4 {
    font-size: var(--font-size-sm);
    line-height: 1.35;
}

body p {
    font-size: var(--font-size-base);
    line-height: 1.65;
}

body .mobile-link {
    font-size: clamp(2rem, 1.35rem + 3.4vw, 3.25rem);
    line-height: 1.05;
}

body #navbar ul a {
    font-size: var(--font-size-micro);
    line-height: 1.2;
}

body section > div > span,
body .text-accent-green span,
body .font-sans.font-semibold.tracking-widest,
body .font-sans.uppercase.tracking-widest,
body .font-sans.tracking-widest.uppercase {
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

body .service-card > div:first-child span,
body .panel > div > div > span {
    font-size: var(--font-size-h4);
    line-height: 1;
}

body button, 
body a.bg-\[\#3A8A6C\], 
body a.border-white, 
body a.border-\[\#1A3C2F\],
body a.bg-accent-green,
body a.bg-white,
body .project-card .absolute span {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    border-radius: 8px;
}

body .hero-ctas a,
body #contact a[href^="mailto:"],
body nav a[href="#contact"] {
    font-size: var(--font-size-sm);
}

body .stat-item span:first-child {
    font-size: var(--font-size-stat);
    line-height: 0.95;
}

body .stat-item span:last-child {
    font-size: var(--font-size-xs);
    line-height: 1.35;
}

body .project-card p,
body .team-card p,
body footer li,
body footer a,
body footer p {
    font-size: var(--font-size-sm);
}

body .project-card > div:last-child > span {
    font-size: var(--font-size-micro);
    line-height: 1.25;
    white-space: normal;
}

body .desktop-marquee-track > div > p:first-of-type {
    font-size: var(--font-size-lead);
    line-height: 1.35;
}

body footer h4 {
    font-size: var(--font-size-xs);
}

@media (max-width: 767px) {
    :root {
        --font-size-base: clamp(0.9rem, 0.82rem + 0.35vw, 1rem);
        --font-size-sm: clamp(0.78rem, 0.73rem + 0.24vw, 0.9rem);
        --font-size-xs: clamp(0.68rem, 0.64rem + 0.18vw, 0.78rem);
        --font-size-h2: clamp(1.75rem, 1.18rem + 2.6vw, 2.65rem);
        --font-size-hero: clamp(1.72rem, 1.16rem + 3.9vw, 3.2rem);
    }

    body .hero-section {
        height: auto;
        min-height: 0;
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    body .hero-section > div.relative.z-10 {
        height: auto;
        min-height: 0;
        margin-top: 0;
        justify-content: space-between;
        gap: 2rem;
    }

    body .hero-section > div.relative.z-10 > div:first-child {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    body .hero-section .relative.z-20.flex {
        margin-top: 0;
    }

    body .hero-section .hero-title {
        line-height: 1;
        margin-bottom: 1.25rem;
    }

    body .hero-section .hero-kicker {
        font-size: var(--font-size-xs);
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    body .hero-ctas {
        gap: 0.75rem;
    }

    body .hero-ctas a {
        min-height: 2.85rem;
        padding-top: 0.78rem;
        padding-bottom: 0.78rem;
    }

    body .hero-bottom-links {
        gap: 0.75rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
    }

    body .hero-bottom-links p {
        font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.9rem);
        line-height: 1.35;
    }

    body .project-card > div:last-child {
        gap: 1rem;
        flex-direction: column;
    }

    body .panel > div > div {
        align-items: flex-start;
    }
}

@media (max-width: 420px) {
    body {
        line-height: 1.58;
    }

    body .hero-section {
        min-height: 0;
        padding-top: 7.5rem;
        padding-bottom: 4rem;
    }

    body .hero-section > div.relative.z-10 {
        min-height: 0;
    }

    body .hero-section .hero-title {
        font-size: clamp(1.55rem, 1rem + 5.1vw, 2.35rem);
        margin-bottom: 1rem;
    }

    body h2 {
        line-height: 1.08;
    }

    body .hero-ctas a {
        width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}