/* ==============================
   SECTION LAYOUT (ALL PAGES)
   .section            70px top/bottom, 40px sides (60px / 20px below 768px)
   .section--first     first section also clears the fixed navbar
   .section--alt       alternate background (every second section)
   .section-gutter     side padding only (header, footer)
   .section-container  1500px centered content width
============================== */

:root {
    /* --header-height: typical navbar height per screen size, so the first
       section is spaced correctly on first paint; main.js then sets the exact value */
    --header-height: 89px;
    --section-space: 70px;
    --section-gutter: 40px;
    --section-max-width: 1500px;
    --section-bg: #ffffff;
    --section-bg-alt: #f9fafb;
}

@media (max-width: 1023px) {
    :root {
        --header-height: 81px;
    }
}

@media (max-width: 767px) {
    :root {
        --header-height: 64px;
        --section-space: 60px; /* sections: 60px top/bottom; first section: header + 60px */
        --section-gutter: 20px;
    }
}

@media (max-width: 359px) {
    :root {
        --header-height: 86px; /* logo wraps to two lines */
    }
}

.section {
    padding: var(--section-space) var(--section-gutter);
    background-color: var(--section-bg);
}

.section--alt {
    background-color: var(--section-bg-alt);
}

.section--first {
    padding-top: calc(var(--header-height) + var(--section-space));
}

.section-gutter {
    padding-left: var(--section-gutter);
    padding-right: var(--section-gutter);
}

.section-container {
    width: 100%;
    max-width: var(--section-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Small screens: content uses the full container width and ignores
   line breaks that were only placed for desktop layouts */
@media (max-width: 1023px) {
    .section br {
        display: none;
    }

    .section [class*="max-w-"] {
        max-width: none;
        /* text-align: center; */
    }
}

/* ==============================
   INDEX PAGE CSS
============================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background: #ffffff;
    color: #171717;
}

/* ==============================
   Decorative Background
============================== */

.background-pattern {
    background-image: radial-gradient(rgba(168, 138, 82, 0.12) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ==============================
   Hero Animation
============================== */

.hero-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: titleReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes titleReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================
   Scroll Reveal
============================== */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==============================
   Navbar
============================== */

#navbar {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(15px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ==============================
   Hero Image
============================== */

.hero-image img {
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-image:hover img {
    transform: scale(1.025);
}

.about-title-wrap {
    overflow: hidden;
}

.about-title {
    opacity: 0;
    letter-spacing: 0.12em;
    transform: scale(0.94);
    filter: blur(4px);
    animation: aboutWordReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aboutWordReveal {
    0% {
        opacity: 0;
        letter-spacing: 0.12em;
        transform: scale(0.94);
        filter: blur(4px);
    }

    45% {
        opacity: 1;
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        letter-spacing: -0.055em;
        transform: scale(1);
        filter: blur(0);
    }
}

/* ==============================
   PROJECTS PAGE CSS
============================== */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
}

/* =====================================================
   NAVBAR
====================================================== */

#navbar {
    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* =====================================================
   REVEAL ANIMATION
====================================================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* =====================================================
   PROJECT IMAGE
====================================================== */

.project-image img {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

/* =====================================================
   PROJECT ARROW
====================================================== */

.project-arrow {
    transition: all 0.3s ease;
}

.project-card:hover .project-arrow {
    background: #171717;
    color: white;
    transform: translate(3px, -3px);
}

/* =====================================================
   PROJECT DESCRIPTION
====================================================== */

.project-description {
    display: none;
    padding-top: 18px;
    color: #68655f;
    font-size: 14px;
    line-height: 1.6;
}

.project-card.open .project-description {
    display: block;
}

/* =========================================
   PROJECTS INTRO TITLE ANIMATION
   Same animation as Services
========================================= */

.projects-title,
.projects-description {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.projects-title {
    transform: translateY(55px);
    filter: blur(8px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.projects-description {
    transform: translateY(25px);
    filter: blur(5px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 180ms;
}

.projects-intro-visible .projects-title {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.projects-intro-visible .projects-description {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* ==============================
   PROJECTS PAGE POLISH
============================== */

.projects-page a:focus-visible,
.projects-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.projects-page .project-card {
    min-width: 0;
    transition: transform 0.35s ease;
}

.projects-page .project-card:hover {
    transform: translateY(-4px);
}

.projects-page .project-card .project-image {
    transition: box-shadow 0.35s ease;
}

.projects-page .project-card:hover .project-image {
    box-shadow: 0 14px 28px rgba(23, 23, 23, 0.1);
}

.projects-page .project-card h2 {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.projects-page .project-card:hover h2 {
    transform: translateX(4px);
}

.projects-page .project-card .project-image img {
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.projects-page .project-card:hover .project-image img {
    transform: scale(1.05);
}

.projects-page .project-card:nth-child(2),
.projects-page .project-card:nth-child(4),
.projects-page .project-card:nth-child(6) {
    transition-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
    .projects-page .project-card,
    .projects-page .project-card h2,
    .projects-page .project-card .project-image,
    .projects-page .project-card .project-image img {
        transform: none;
        transition: none;
        box-shadow: none;
    }
}

/* ==============================
   SERVICES PAGE POLISH
============================== */

.services-page .text-muted {
    color: #68655f;
}

.services-page a:focus-visible,
.services-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.services-page .services-title {
    animation: none;
}

.services-page .service-card {
    min-width: 0;
    border-bottom: 0;
    transition:
        background-color 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}

.services-page .service-card:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.services-page .service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(178, 146, 82, 0.35);
}

.services-page .service-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.services-page .service-card:hover .service-number {
    color: #b29252;
    transform: translateX(5px);
}

.services-page .service-title {
    transition: transform 0.35s ease;
}

.services-page .service-card:hover .service-title {
    transform: translateX(6px);
}

.services-page .service-image {
    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.35s ease;
}

.services-page .service-card:hover .service-image {
    box-shadow: 0 12px 24px rgba(23, 23, 23, 0.1);
}

@media (max-width: 1023px) {
    .services-page .service-card > div {
        grid-template-columns: 64px minmax(0, 1fr);
        align-items: start;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .services-page .service-card > div > div:nth-child(2) {
        min-width: 0;
    }

    .services-page .service-image {
        grid-column: 2;
        width: min(100%, 360px);
        height: 190px;
        margin: 0 0 2rem;
        opacity: 1;
        transform: none;
    }

    .services-page .service-card p br {
        display: none;
    }
}

@media (max-width: 639px) {
    .services-page .service-card > div {
        grid-template-columns: 1fr;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .services-page .service-number {
        padding-top: 1.5rem;
    }

    .services-page .service-card > div > div:nth-child(2) {
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .services-page .service-image {
        grid-column: 1;
        width: 100%;
        height: 200px;
        margin-bottom: 1.25rem;
    }

    .services-page .service-title {
        font-size: 1.6rem;
        line-height: 1.08;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-page .services-title,
    .services-page .services-description,
    .services-page .service-card,
    .services-page .service-number,
    .services-page .service-title,
    .services-page .service-image,
    .services-page .service-image img {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        transition: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-title,
    .projects-description {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ==============================
   SERVICES PAGE CSS
============================== */

/* =========================================
   GLOBAL
========================================= */

html {
    scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    overflow-x: hidden;
    background: #ffffff;
    color: #171717;
    font-family: "Inter", sans-serif;
}

/* =========================================
   SMOOTH SERVICES INTRO ANIMATION
========================================= */

.services-title,
.services-description {
    opacity: 0;
    will-change: transform, opacity, filter;
}

/* Main title */

.services-title {
    transform: translateY(55px);
    filter: blur(8px);
    transition:
        opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Description */

.services-description {
    transform: translateY(25px);
    filter: blur(5px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 180ms;
}

/* Activated state */

.services-intro-visible .services-title {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.services-intro-visible .services-description {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
    .services-title,
    .services-description {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* =========================================
   SERVICE CARD HOVER
========================================= */

.service-card {
    transition:
        background-color 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}

.service-card:hover {
    background-color: #ffffff;
    border-color: rgba(178, 146, 82, 0.35);
}

.service-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.service-card:hover .service-number {
    color: #b29252;
    transform: translateX(5px);
}

.service-title {
    transition: transform 0.35s ease;
}

.service-card:hover .service-title {
    transform: translateX(6px);
}

/* =========================================
   TITLE ANIMATION
========================================= */

.animate-title,
.animate-subtitle {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.animate-subtitle {
    transition-delay: 0.2s;
}

.animate-show {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =========================================
   TRUSTED PARTNERS ANIMATION
========================================= */

.partners-title,
.partners-description {
    opacity: 0;
    will-change: transform, opacity, filter;
}

.partners-title {
    transform: translateY(45px);
    filter: blur(7px);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.partners-description {
    transform: translateY(25px);
    filter: blur(5px);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 180ms;
}

/* Visible state */

.partners-visible .partners-title {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.partners-visible .partners-description {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Number */

#partnerCount {
    display: inline-block;
    min-width: 1.8ch;
    font-variant-numeric: tabular-nums;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .partners-title,
    .partners-description {
        opacity: 1;
        transform: none;
        filter: none;
        transition: none;
    }
}

/* ==============================
   ABOUT PAGE CSS
============================== */

/* =========================================
   ABOUT HERO ANIMATION
========================================= */

.about-title-wrap {
    overflow: hidden;
}

.about-title {
    opacity: 0;
    letter-spacing: 0.12em;
    transform: scale(0.94);
    filter: blur(4px);
    animation: aboutWordReveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aboutWordReveal {
    0% {
        opacity: 0;
        letter-spacing: 0.12em;
        transform: scale(0.94);
        filter: blur(4px);
    }

    45% {
        opacity: 1;
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        letter-spacing: -0.055em;
        transform: scale(1);
        filter: blur(0);
    }
}

/* =========================================
   DESCRIPTION ANIMATION
========================================= */

.about-description-wrap {
    overflow: hidden;
}

.about-description {
    opacity: 0;
    transform: translateY(15px);
    animation: aboutTextReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.65s forwards;
}

@keyframes aboutTextReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   SERVICES TITLE
========================================= */

.services-title {
    opacity: 0;
    transform: translateY(50px);
    animation: servicesReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes servicesReveal {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   GENERAL
========================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: #171717;
    font-family: "Inter", sans-serif;
}

/* =========================================
   SERVICE CARD HOVER
========================================= */

.service-card {
    transition:
        background-color 0.35s ease,
        transform 0.35s ease,
        border-color 0.35s ease;
}

.service-card:hover {
    background-color: #ffffff;
    border-color: rgba(178, 146, 82, 0.35);
}

.service-number {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.service-card:hover .service-number {
    color: #b29252;
    transform: translateX(5px);
}

.service-title {
    transition: transform 0.35s ease;
}

.service-card:hover .service-title {
    transform: translateX(6px);
}

/* =========================================
   ABOUT HEADING ANIMATION
========================================= */

.about-heading-animate {
    opacity: 0;
    animation: aboutHeadingReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes aboutHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================
   ABOUT SUBTITLE
========================================= */

.about-subtitle-animate {
    opacity: 0;
    animation: aboutSubtitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes aboutSubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================
   COMMUNITY VOICES
========================================= */

.community-heading-animate {
    opacity: 0;
    animation: communityHeadingReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes communityHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.community-subtitle-animate {
    opacity: 0;
    animation: communitySubtitleReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes communitySubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================
   FAQ HEADING
========================================= */

.faq-heading-animate {
    opacity: 0;
    animation: faqHeadingReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes faqHeadingReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

.faq-description-animate {
    opacity: 0;
    animation: faqDescriptionReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes faqDescriptionReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(3px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* =========================================
   SCROLL REVEAL
========================================= */

.scroll-reveal {
    opacity: 0;
}

.scroll-reveal.is-visible {
    animation-play-state: running;
}

/* =========================================================
   ABOUT PAGE — TRUSTED PARTNERS VISIBILITY FIX
========================================================= */

.partners-intro .partners-title,
.partners-intro .partners-description {
    opacity: 1;
    transform: none;
    filter: none;
}

/* ==============================
   ARTICLE PAGE CSS
============================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: #171717;
    font-family: "Inter", sans-serif;
}

/* =========================================
   ARTICLE DESCRIPTION
========================================= */

.article-description {
    display: block;
}

/* =========================================
   ARTICLE CARD HOVER
========================================= */

.article-card {
    transition:
        transform 0.35s ease,
        background-color 0.35s ease;
}

/* =========================================
   SPIRITUAL INSIGHTS HERO ANIMATION
========================================= */

.insights-title {
    opacity: 0;
    transform: translateY(45px);
    animation: insightsTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

.insights-subtitle {
    opacity: 0;
    transform: translateY(25px);
    animation: insightsSubtitleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
    will-change: transform, opacity;
}

@keyframes insightsTitleReveal {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes insightsSubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   ARTICLE IMAGE HOVER
========================================= */

.article-image {
    transition: transform 0.7s ease;
}

.article-card:hover .article-image {
    transform: scale(1.05);
}

/* =========================================
   ARTICLE TITLE
========================================= */

.article-title {
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.article-card:hover .article-title {
    color: #52627a;
}

/* =========================================
   FOOTER EMAIL
========================================= */

.footer-email {
    transition: opacity 0.3s ease;
}

.footer-email:hover {
    opacity: 0.7;
}

/* =========================================================
   ARTICLES — SHOW SHORT DESCRIPTIONS
========================================================= */

.article-description {
    opacity: 1;
    visibility: visible;
    max-height: none;
    overflow: visible;
}

/* ==============================
   CONTACT PAGE CSSS
============================== */

/* =========================================
   GLOBAL
========================================= */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #ffffff;
    color: #171717;
    font-family: "Inter", sans-serif;
}

::selection {
    background: #171717;
    color: white;
}

/* =========================================
   NAVIGATION
========================================= */

#mobileMenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

#mobileMenu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================
   CONTACT HERO ANIMATION
========================================= */

.contact-title {
    opacity: 0;
    transform: translateY(45px);
    animation: contactTitleReveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.contact-subtitle {
    opacity: 0;
    transform: translateY(25px);
    animation: contactSubtitleReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.contact-content {
    opacity: 0;
    transform: translateY(30px);
    animation: contactContentReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

@keyframes contactTitleReveal {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contactSubtitleReveal {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contactContentReveal {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   FORM
========================================= */

.contact-input {
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

.contact-input:focus {
    outline: none;
    border-color: #171717;
}

.contact-input::placeholder {
    color: #9ca3af;
}

/* =========================================
   SOCIAL LINKS
========================================= */

.social-link {
    position: relative;
    transition: color 0.3s ease;
}

.social-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background: #171717;
    transition: width 0.3s ease;
}

.social-link:hover::after {
    width: 100%;
}

/* =========================================
   CTA EMAIL
========================================= */

.cta-email {
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.cta-email:hover {
    opacity: 0.65;
}

/* ==============================
   CONTACT PAGE POLISH
============================== */

.contact-page .text-muted {
    color: #68655f;
}

/* used by the shared header's menu buttons on every page */
.bg-charcoal {
    background-color: #171717;
}

.contact-page .contact-input:focus-visible,
.contact-page a:focus-visible,
.contact-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.contact-page .contact-input:focus {
    background-color: rgba(23, 23, 23, 0.025);
}

.contact-page .contact-input.input-invalid {
    border-color: #b42318;
}

.contact-page .contact-input.input-invalid:focus-visible {
    outline-color: #b42318;
}

.contact-page .form-error {
    color: #b42318;
}

.contact-page .form-success {
    color: #166534;
}

.contact-page iframe {
    display: block;
}

@media (max-width: 767px) {
    .contact-page .contact-content {
        gap: 3.5rem;
    }

    .contact-page .contact-content > div:first-child {
        padding-bottom: 0.5rem;
    }

    .contact-page .social-link {
        min-height: 2rem;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page .contact-title,
    .contact-page .contact-subtitle,
    .contact-page .contact-content,
    .contact-page .social-link,
    .contact-page .social-link::after,
    .contact-page .cta-email,
    .contact-page .footer-link,
    .contact-page button {
        animation: none;
        transition: none;
        transform: none;
    }
}

/* =========================================
   FOOTER
========================================= */

.footer-link {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-link:hover {
    color: #6b7280;
    transform: translateX(2px);
}

/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .contact-title,
    .contact-subtitle,
    .contact-content {
        animation: none;
        opacity: 1;
        transform: none;
    }

    #mobileMenu {
        transition: none;
    }
}

/* =====================================================
   ARTICLE SCROLL ANIMATIONS
===================================================== */

.article-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.article-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

.article-image-reveal {
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 1s ease,
        transform 1.1s ease;
}

.article-image-reveal.show {
    opacity: 1;
    transform: scale(1);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .article-reveal,
    .article-image-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================
   ABOUT PAGE SCROLL ANIMATIONS
===================================================== */

.scroll-reveal {
    opacity: 0;
    transform: translateY(45px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.scroll-reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* Heading comes in slightly stronger */

.about-heading-animate {
    transition-duration: 2.2s;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtitle follows the heading */

.about-subtitle-animate {
    transition-duration: 1s;
    transition-delay: 0.15s;
}

/* Community section */

.community-heading-animate {
    transition-duration: 0.9s;
}

.community-subtitle-animate {
    transition-duration: 0.9s;
    transition-delay: 0.15s;
}

/* Partners */

.partners-title,
.partners-description {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.partners-title.show,
.partners-description.show {
    opacity: 1;
    transform: translateY(0);
}

.partners-description {
    transition-delay: 0.15s;
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .partners-title,
    .partners-description {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =====================================================
   PROJECT DETAIL PAGE ANIMATIONS
   Unique animation system
   Does NOT use:
   .article-reveal
   .article-image-reveal
===================================================== */

/* =====================================================
   INITIAL STATES
===================================================== */

/* Project category */

.project-detail-category {
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Project title */

.project-detail-title {
    opacity: 0;
    transform: scale(0.96);
    transition:
        opacity 1s ease,
        transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Project introduction */

.project-detail-intro {
    opacity: 0;
    transform: translateX(45px);
    transition:
        opacity 0.9s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main project image */

.project-detail-image {
    opacity: 0;
    transform: rotate(-2deg) scale(0.92);
    transform-origin: center;
    transition:
        opacity 0.8s ease,
        transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image wrapper */

.project-detail-image-wrap {
    overflow: hidden;
}

/* Image itself */

.project-detail-image img {
    transform: scale(1.15);
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Content blocks */

.project-detail-block {
    opacity: 0;
    transform: translateX(-45px);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Alternate direction */

.project-detail-block:nth-of-type(even) {
    transform: translateX(45px);
}

/* Heading inside content */

.project-detail-heading {
    position: relative;
    opacity: 0;
    transform: translateX(-25px);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animated line */

/* .project-detail-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: -16px;
    width: 0;
    height: 2px;
    background: #171717;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
} */

/* Paragraph */

.project-detail-text {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 0.75s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Quote */

.project-detail-quote {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 0.8s ease,
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Back button */

.project-detail-back {
    opacity: 0;
    transform: translateX(-35px);
    transition:
        opacity 0.7s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================
   VISIBLE STATES
===================================================== */

.project-detail-category.project-visible {
    opacity: 1;
    transform: translateX(0);
}

.project-detail-title.project-visible {
    opacity: 1;
    transform: scale(1);
}

.project-detail-intro.project-visible {
    opacity: 1;
    transform: translateX(0);
}

.project-detail-image.project-visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.project-detail-image.project-visible img {
    transform: scale(1);
}

.project-detail-block.project-visible {
    opacity: 1;
    transform: translateX(0);
}

.project-detail-block.project-visible .project-detail-heading {
    opacity: 1;
    transform: translateX(0);
}

.project-detail-block.project-visible .project-detail-heading::before {
    width: 52px;
}

.project-detail-block.project-visible .project-detail-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

.project-detail-quote.project-visible {
    opacity: 1;
    transform: scale(1);
}

.project-detail-back.project-visible {
    opacity: 1;
    transform: translateX(0);
}

/* =====================================================
   OPTIONAL HOVER EFFECT FOR PROJECT IMAGE
===================================================== */

.project-detail-image.project-visible:hover img {
    transform: scale(1.035);
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .project-detail-category,
    .project-detail-title,
    .project-detail-intro,
    .project-detail-image,
    .project-detail-image img,
    .project-detail-block,
    .project-detail-heading,
    .project-detail-text,
    .project-detail-quote,
    .project-detail-back {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .project-detail-heading::before {
        width: 52px !important;
        transition: none !important;
    }
}

/* ==============================
   HOMEPAGE RESPONSIVE POLISH
============================== */

.index-page .text-muted {
    color: #68655f;
}

.index-page .text-charcoal {
    color: #171717;
}

.index-page .hero-title span:nth-child(2) {
    animation-delay: 90ms;
}

.index-page .hero-title span:nth-child(3) {
    animation-delay: 180ms;
}

.index-page .hero-title span:nth-child(4) {
    animation-delay: 270ms;
}

.index-page a:focus-visible,
.index-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.index-page .faq-question {
    cursor: pointer;
}

@media (max-width: 767px) {
    .index-page .hero-image {
        margin-top: 1rem;
    }

    .index-page .service-row > div,
    .index-page .article-card > div {
        grid-template-columns: 56px minmax(0, 1fr);
        align-items: start;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .index-page .service-row > div > div:nth-child(3),
    .index-page .article-card > div > div:nth-child(3) {
        grid-column: 2;
        width: 100%;
        height: 180px;
        margin: 0 0 1.5rem;
        opacity: 1;
        transform: none;
    }

    .index-page .service-row > div > div:nth-child(2),
    .index-page .article-card > div > div:nth-child(2) {
        min-width: 0;
    }

    .index-page .service-row h2,
    .index-page .article-card h2 {
        font-size: 1.65rem;
        line-height: 1.05;
    }

    .index-page .service-row p br,
    .index-page .article-card p br {
        display: none;
    }

    .index-page .faq-question span:first-child {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-page .hero-title span,
    .index-page .reveal,
    .index-page .article-reveal,
    .index-page .scroll-reveal,
    .index-page .hero-image img {
        animation: none;
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==============================
   ABOUT PAGE POLISH
============================== */

.about-page .text-muted {
    color: #68655f;
}

.about-page a:focus-visible,
.about-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.about-page .partners-intro .partners-title,
.about-page .partners-intro .partners-description {
    opacity: 0;
    transform: translateY(25px);
    filter: blur(5px);
}

.about-page .partners-intro .partners-title {
    transform: translateY(45px);
    filter: blur(7px);
}

.about-page .partners-intro.partners-visible .partners-title,
.about-page .partners-intro.partners-visible .partners-description {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.about-page .community-heading-animate,
.about-page .community-subtitle-animate,
.about-page .about-heading-animate,
.about-page .about-subtitle-animate {
    will-change: opacity, transform, filter;
}

.about-page .community-heading-animate,
.about-page .community-subtitle-animate,
.about-page .partners-title,
.about-page .partners-description {
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    .about-page .partners-title,
    .about-page .partners-description,
    .about-page .community-heading-animate,
    .about-page .community-subtitle-animate,
    .about-page .article-reveal,
    .about-page .scroll-reveal,
    .about-page .about-heading-animate,
    .about-page .about-subtitle-animate {
        opacity: 1;
        transform: none;
        filter: none;
        animation: none;
        transition: none;
    }
}

/* ==============================
   ARTICLES PAGE POLISH
============================== */

.articles-page .text-muted {
    color: #68655f;
}

.articles-page a:focus-visible,
.articles-page button:focus-visible {
    outline: 2px solid #171717;
    outline-offset: 4px;
}

.articles-page .article-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.articles-page .article-card > div:first-child {
    height: auto;
    aspect-ratio: 16 / 10;
}

.articles-page .article-card > a {
    margin-top: auto;
    padding-top: 1.25rem;
}

.articles-page .article-card:hover {
    transform: translateY(-3px);
}

.articles-page .article-card a:last-child span {
    display: inline-block;
    transition: transform 0.3s ease;
}

.articles-page .article-card:hover a:last-child span,
.articles-page .article-card a:last-child:focus-visible span {
    transform: translate(3px, -2px);
}

@media (max-width: 767px) {
    .articles-page .article-card > div:first-child {
        aspect-ratio: 16 / 10;
    }

    .articles-page .article-card .text-xs {
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .articles-page .insights-title,
    .articles-page .insights-subtitle,
    .articles-page .article-card,
    .articles-page .article-reveal,
    .articles-page .article-image-reveal,
    .articles-page .article-image,
    .articles-page .article-title,
    .articles-page .article-card a:last-child span {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
}

.bg-gray {
    background-color: #f9fafb;
}

.py-70 {
    padding-top: 70px;
    padding-bottom: 70px;
}

@media (max-width: 767px) {
    .section.section--alt.min-h-screens {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .section.section--first.overflow-hidden {
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .section-mobile-pt-0 {
        padding-top: 0;
    }
}

/* @media (max-width: 767px) {
    .section.section--first.min-h-screens {
        padding-bottom: 0;
    }
} */

.text-left {
    text-align: left !important;
}