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

html {
    scroll-behavior: smooth;
}

#projects-list {
    scroll-margin-top: 7rem;
}


/* ==================================================
   PROJECTS HERO
================================================== */

.projects-intro {
    position: relative;

    padding-block:
        clamp(4.5rem, 7vw, 7rem)
        clamp(4rem, 6vw, 6rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 18%,
            rgba(46, 125, 50, 0.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #faf8f2 0%,
            #ffffff 48%,
            #f5f1e7 100%
        );
}

.projects-intro::before {
    content: "";

    position: absolute;
    top: 2rem;
    right: -5rem;

    width: clamp(14rem, 27vw, 29rem);
    height: clamp(18rem, 34vw, 36rem);

    background:
        url("../images/tree.png")
        no-repeat
        center / contain;

    opacity: 0.08;

    transform: rotate(8deg);

    pointer-events: none;
}

.projects-intro .container {
    position: relative;
    z-index: 2;
}

.projects-intro-grid {
    display: grid;
    grid-template-columns:
        minmax(19rem, 0.72fr)
        minmax(34rem, 1.28fr);

    align-items: center;
    gap: clamp(3rem, 6vw, 7rem);
}


/* ==================================================
   HERO TEXT
================================================== */

.projects-intro-content {
    position: relative;
    z-index: 5;

    min-width: 0;
}

.projects-intro-label {
    margin: 0 0 1.2rem;

    color: var(--primary-color, #2e7d32);

    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.projects-intro-title {
    max-width: 9ch;
    margin: 0;

    color: var(--text-color, #202020);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4rem, 6.4vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.06em;
}

.projects-intro-description {
    max-width: 43ch;
    margin:
        clamp(1.8rem, 3vw, 2.6rem)
        0
        0;

    color: var(--secondary-text-color, #5f625d);

    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.72;
}

.projects-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;

    margin-top: clamp(2rem, 4vw, 3rem);
}

.projects-intro-actions .primary-button {
    white-space: nowrap;
}

.projects-intro-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    color: var(--text-color, #202020);

    font-weight: 700;
    text-decoration: none;

    transition:
        color var(--transition, 0.3s ease),
        transform var(--transition, 0.3s ease);
}

.projects-intro-link:hover {
    color: var(--primary-color, #2e7d32);

    transform: translateX(0.25rem);
}


/* ==================================================
   HERO COLLAGE
================================================== */

.projects-intro-visual {
    position: relative;

    min-width: 0;
    min-height: clamp(34rem, 47vw, 49rem);
}

.projects-intro-main-photo {
    position: absolute;
    z-index: 2;

    top: 0;
    right: 0;

    width: 88%;
    margin: 0;

    overflow: hidden;

    background-color: #ffffff;
    border-radius:
        clamp(1.4rem, 2.4vw, 2.5rem);

    box-shadow:
        0 1.8rem 4.5rem
        rgba(32, 43, 29, 0.17);
}

.projects-intro-main-photo img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;
    object-position: center;
}

.projects-intro-small-photo {
    position: absolute;
    z-index: 5;

    top: 10%;
    left: 0;

    width: clamp(12rem, 21vw, 18rem);
    margin: 0;
    padding:
        0.55rem
        0.55rem
        4.2rem;

    background-color: #ffffff;

    box-shadow:
        0 1.2rem 3rem
        rgba(39, 44, 34, 0.18);

    transform: rotate(-3deg);
}

.projects-intro-small-photo::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: -0.65rem;
    left: 50%;

    width: 5.3rem;
    height: 1.25rem;

    background:
        linear-gradient(
            to right,
            rgba(212, 193, 153, 0.43),
            rgba(232, 216, 180, 0.78),
            rgba(211, 190, 147, 0.45)
        );

    transform:
        translateX(-50%)
        rotate(3deg);
}

.projects-intro-small-photo img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 4.7;

    object-fit: cover;
}

.projects-intro-small-photo figcaption {
    position: absolute;

    right: 0.8rem;
    bottom: 0.7rem;
    left: 0.8rem;

    color: #2b5734;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        "Bradley Hand",
        cursive;

    font-size: clamp(0.72rem, 1vw, 0.9rem);
    line-height: 1.45;
}

.projects-intro-stats {
    position: absolute;
    z-index: 6;

    right: 2%;
    bottom: 0;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    width: min(83%, 43rem);

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #123e22 0%,
            #1d5b31 60%,
            #154325 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius:
        clamp(1.2rem, 2vw, 2rem);

    box-shadow:
        0 1.4rem 3.7rem
        rgba(21, 57, 30, 0.25);
}

.projects-intro-stats > div {
    min-width: 0;
    padding:
        clamp(1.35rem, 2.5vw, 2rem)
        clamp(0.8rem, 1.7vw, 1.35rem);

    text-align: center;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.projects-intro-stats > div:first-child {
    border-left: 0;
}

.projects-intro-stats strong {
    display: block;

    margin-bottom: 0.55rem;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 2.3vw, 2.2rem);
    line-height: 1;
}

.projects-intro-stats span {
    display: block;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: clamp(0.7rem, 0.9vw, 0.82rem);
    line-height: 1.4;
}


/* ==================================================
   PROJECTS GRID
================================================== */

.projects-page-grid {
    display: grid;
    gap: clamp(3.5rem, 6vw, 6rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    background:
        radial-gradient(
            circle at 10% 18%,
            rgba(54, 126, 63, 0.16),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(216, 224, 128, 0.24),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #e5ead9 0%,
            #cddba9 44%,
            #9fbd69 100%
        );

    border:
        1px solid
        rgba(38, 95, 47, 0.12);

    border-radius:
        clamp(2rem, 3vw, 3.5rem);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 1.5rem 4rem rgba(34, 66, 37, 0.08);
}


/* ==================================================
   PROJECT FILTERS — MOVING ACTIVE PILL
================================================== */

.project-filters {
    position: relative;
    z-index: 5;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    width: 100%;
    margin:
        0
        0
        clamp(1rem, 2vw, 3rem);

    padding: 0.75rem;

    overflow: hidden;

    background-color: rgb(255, 255, 255);

    border: 1px solid #0d3003;
    border-radius: 999px;

    box-shadow:
        0 0.8rem 2.2rem rgba(39, 52, 37, 0.08);
}


/* Рухома зелена плашка */

.project-filters-indicator {
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 0.55rem;
    z-index: 0;

    width: calc((100% - 1.1rem) / 5);

    background:
        linear-gradient(
            135deg,
            #236d32,
            #2f8a3d
        );

    border-radius: 999px;

    box-shadow:
        0 0.65rem 1.4rem rgba(36, 114, 50, 0.22);

    transition:
        transform 0.42s cubic-bezier(.22, .61, .36, 1),
        width 0.42s cubic-bezier(.22, .61, .36, 1);
}


/* Кнопки */

.project-filter {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 3.2rem;

    padding:
        0.75rem
        1rem;

    color: #585b56;
    background: transparent;

    border: 0;
    border-radius: 999px;

    font: inherit;
    font-size: clamp(0.76rem, 0.92vw, 0.9rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;

    cursor: pointer;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.project-filter:hover {
    color: #267336;
}

.project-filter.active {
    color: #ffffff;
}

.project-filter:active {
    transform: scale(0.97);
}

/* ==================================================
   PROJECTS GRID
================================================== */

.projects-page-grid {
    display: grid;
    gap: clamp(4rem, 7vw, 7rem);
    background: linear-gradient(135deg,
            #eaf3ae 10%,
            #0a6615 30%,
            #ebf591 70%,
            #125a1d 100%
        );
    border-radius: 10%;
}


/* ==================================================
   PROJECT CARD
================================================== */

.project-page-card {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(17rem, 0.64fr)
        minmax(32rem, 1.36fr);

    grid-template-areas:
        "content image";

    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);

    min-height: clamp(30rem, 41vw, 41rem);

    padding:
        clamp(2rem, 4vw, 4rem);

    overflow: visible;

    background:
        linear-gradient(
            145deg,
            #fffdf7 0%,
            #ffffff 58%,
            #f4f2e9 100%
        );

    border:
        1px solid
        rgba(36, 91, 45, 0.15);

    border-radius:
        clamp(1.6rem, 3vw, 3rem);

    box-shadow:
        0 1.8rem 4.2rem rgba(29, 64, 34, 0.15),
        0 0.25rem 0.8rem rgba(29, 64, 34, 0.05);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.project-page-card[hidden] {
    display: none;
}

.project-page-card.is-filtering-out {
    opacity: 0;

    transform: translateY(1rem);
}


/* ==================================================
   REVERSE PROJECT CARD
================================================== */

.project-page-card-reverse {
    grid-template-columns:
        minmax(32rem, 1.36fr)
        minmax(17rem, 0.64fr);

    grid-template-areas:
        "image content";

}


/* ==================================================
   LARGE DECORATIVE NUMBER
================================================== */

.project-number {
    position: absolute;
    z-index: 0;

    top: clamp(1rem, 2vw, 2rem);
    left: clamp(1rem, 2vw, 2rem);

    color:
        rgba(36, 91, 45, 0.055);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9rem, 16vw, 16rem);
    font-weight: 700;
    line-height: 0.72;
    letter-spacing: -0.08em;

    pointer-events: none;
}

.project-page-card-reverse .project-number {
    right: clamp(1rem, 2vw, 2rem);
    left: auto;
}


/* ==================================================
   PROJECT CONTENT
================================================== */

.project-page-content {
    position: relative;
    z-index: 3;

    grid-area: content;

    min-width: 0;

}

.project-category {
    display: inline-flex;
    align-items: center;

    min-height: 1.85rem;
    margin-bottom: 1.2rem;
    padding:
        0.35rem
        0.8rem;

    color: var(--primary-color, #2e7d32);

    background:
        rgba(46, 125, 50, 0.065);

    border:
        1px solid
        rgba(46, 125, 50, 0.18);

    border-radius: 999px;

    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.project-page-content h2 {
    max-width: 12ch;
    margin: 0;

    color: var(--text-color, #202020);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 3.6vw, 4rem);
    line-height: 0.98;
    letter-spacing: -0.045em;
}

.project-page-content > p {
    max-width: 43ch;
    margin:
        clamp(1.3rem, 2vw, 1.8rem)
        0
        0;

    color: var(--secondary-text-color, #5f625d);

    font-size: clamp(0.96rem, 1.08vw, 1.05rem);
    line-height: 1.72;
}


/* ==================================================
   PROJECT RESULTS
================================================== */

.project-results {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin-top: clamp(1.8rem, 3vw, 2.5rem);
}

.project-results > div {
    min-width: 0;
    padding:
        1rem
        1rem
        1rem
        0;

    border-top:
        1px solid
        rgba(46, 125, 50, 0.2);
}

.project-results strong {
    display: block;

    margin-bottom: 0.4rem;

    color: var(--primary-color, #2e7d32);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    line-height: 1;
}

.project-results span {
    display: block;

    color: var(--secondary-text-color, #5f625d);

    font-size: 0.78rem;
    line-height: 1.4;
}

.project-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-top: clamp(1.6rem, 3vw, 2.3rem);

    color: var(--primary-color, #2e7d32);

    font-weight: 700;
    text-decoration: none;

    transition:
        transform var(--transition, 0.3s ease),
        color var(--transition, 0.3s ease);
}

.project-page-link:hover {
    color: #174d25;

    transform: translateX(0.3rem);
}


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

.project-page-image {
    position: relative;
    z-index: 2;

    grid-area: image;

    min-width: 0;
    margin: 0;

    overflow: hidden;

    border-radius:
        clamp(1.3rem, 2.5vw, 2.5rem);

    box-shadow:
        0 1.4rem 3.5rem
        rgba(39, 48, 34, 0.15);
}

.project-page-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(14, 34, 19, 0.12),
            transparent 48%
        );

    pointer-events: none;
}

.project-page-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
    object-position: center;

    transition:
        transform 0.55s ease;
}

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


/* ==================================================
   SMALL POLAROID
================================================== */

.project-page-small-image {
    position: absolute;
    z-index: 7;

    right: clamp(1.2rem, 2.5vw, 2.5rem);
    bottom: clamp(-2rem, -2vw, -1.2rem);

    width:
        clamp(10rem, 17vw, 15rem);

    margin: 0;
    padding:
        0.45rem
        0.45rem
        3.6rem;

    background-color: #ffffff;

    box-shadow:
        0 1rem 2.7rem
        rgba(41, 45, 35, 0.19);

    transform: rotate(3deg);
}

.project-page-card-reverse
.project-page-small-image {
    right: auto;
    left: clamp(1.2rem, 2.5vw, 2.5rem);

    transform: rotate(-3deg);
}

.project-page-small-image::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: -0.55rem;
    left: 50%;

    width: 4.5rem;
    height: 1.1rem;

    background:
        linear-gradient(
            to right,
            rgba(212, 193, 153, 0.42),
            rgba(232, 216, 180, 0.75),
            rgba(211, 190, 147, 0.45)
        );

    transform:
        translateX(-50%)
        rotate(-3deg);
}

.project-page-small-image img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 4.5;

    object-fit: cover;
}

.project-page-small-image figcaption {
    position: absolute;

    right: 0.7rem;
    bottom: 0.55rem;
    left: 0.7rem;

    color: #2a5835;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        "Bradley Hand",
        cursive;

    font-size: 0.72rem;
    line-height: 1.4;
}


/* ==================================================
   NOTE CARD
================================================== */

.project-page-note {
    position: absolute;
    z-index: 6;

    bottom: clamp(1.5rem, 2vw, 15rem);
    left: clamp(11.2rem, 39vw, 45rem);

    max-width: 20rem;
    padding:
        1.3rem
        1.4rem;

    color: #2b5734;

    background:
        linear-gradient(
            145deg,
            #f5edd8,
            #fffaf0
        );

    box-shadow:
        0 0.9rem 2.2rem
        rgba(54, 49, 37, 0.12);

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: 1.2rem;
    line-height: 1.5;

    transform: rotate(-3deg);
}

.project-page-note::before {
    content: "";

    position: absolute;

    top: -0.55rem;
    left: 50%;

    width: 4.2rem;
    height: 1rem;

    background-color:
        rgba(220, 201, 160, 0.62);

    transform:
        translateX(-50%)
        rotate(2deg);
}


/* ==================================================
   DIFFERENT CARD DETAILS
================================================== */

/* Military */
.project-page-card[data-category="military"] {
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(46, 125, 50, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #fbfaf5,
            #ffffff
        );
}

/* Humanitarian */
.project-page-card[data-category="humanitarian"] {
    background:
        radial-gradient(
            circle at 12% 78%,
            rgba(188, 156, 92, 0.08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #faf7ef
        );
}

/* Education */
.project-page-card[data-category="education"] {
    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(46, 125, 50, 0.06),
            transparent 28%
        ),
        #ffffff;
}

/* Social */
.project-page-card[data-category="social"] {
    background:
        linear-gradient(
            140deg,
            #faf8f2,
            #ffffff
        );
}


/* ==================================================
   PROJECTS SUMMARY
================================================== */

/* ==================================================
   PROJECTS SUMMARY
================================================== */

.projects-summary {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(133, 190, 93, 0.22),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(225, 235, 139, 0.12),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #0d4425 0%,
            #155c30 48%,
            #1f6d39 100%
        );
}

/* Велика напівпрозора цифра/декорація */

.projects-summary::before {
    content: "120+";

    position: absolute;
    top: -2rem;
    right: 3%;
    z-index: 0;

    color: rgba(255, 255, 255, 0.035);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(9rem, 19vw, 20rem);

    font-weight: 700;
    line-height: 1;

    pointer-events: none;
}
/* Легка листяна пляма зліва */

.projects-summary::after {
    content: "";

    position: absolute;
    left: -5rem;
    bottom: -6rem;
    z-index: 0;

    width: 24rem;
    height: 24rem;

    background:
        radial-gradient(
            circle,
            rgba(201, 225, 129, 0.1),
            transparent 66%
        );

    border-radius: 50%;

    pointer-events: none;
}

.projects-summary .container {
    position: relative;
    z-index: 2;
}

.projects-summary-inner {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(16rem, 0.72fr)
        minmax(36rem, 1.28fr);

    align-items: center;

    gap:
        clamp(3rem, 7vw, 8rem);
}

/* ==================================================
   SUMMARY TITLE
================================================== */

.projects-summary-title {
    position: relative;
}


.projects-summary-title::before {
    content: "“";

    display: block;

    height: 3rem;
    margin-bottom: 0.5rem;

    color: rgba(255, 255, 255, 0.72);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 5rem;
    line-height: 0.8;
}

.projects-summary-title p {
    margin:
        0
        0
        0.4rem;

    color: rgba(255, 255, 255, 0.76);

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size:
        clamp(1.1rem, 4.7vw, 7.55rem);

    line-height: 1.2;
}

.projects-summary-title h2 {
    max-width: 18ch;
    margin: 0;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3.2rem, 3.5vw, 6rem);

    line-height: 0.92;
    letter-spacing: -0.055em;
}



.projects-summary-stats {
    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        clamp(1.3rem, 2vw, 2rem);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1.3rem 3rem rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(0.6rem);
}

.projects-summary-stats > div {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height:
        clamp(9.5rem, 12vw, 12rem);

    padding:
        clamp(1.4rem, 2.4vw, 2.3rem)
        1rem;

    text-align: center;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.13);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.projects-summary-stats > div:first-child {
    border-left: 0;
}

.projects-summary-stats strong {
    display: block;

    margin-bottom: 0.75rem;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.65rem, 2.3vw, 2.65rem);

    line-height: 1;
}

.projects-summary-stats span {
    display: block;

    max-width: 16ch;
    margin-inline: auto;

    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        clamp(0.68rem, 0.8vw, 0.78rem);

    line-height: 1.5;
}


.project-support::before {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width: min(88%, 90rem);
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(46, 125, 50, 0.22),
            transparent
        );

    transform: translateX(-50%);
}


/* ==================================================
   SUPPORT SECTION
================================================== */

.project-support {
    position: relative;

    padding-block:
        clamp(5rem, 8vw, 8rem);

    background:
        linear-gradient(
            to bottom,
            #faf8f2,
            #ffffff
        );
}

.project-support-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;

    margin-bottom:
        clamp(2.5rem, 5vw, 4.5rem);
}

.project-support-heading .section-label {
    margin: 0 0 1rem;

    color: var(--primary-color, #2e7d32);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.project-support-heading h2 {
    max-width: 15ch;
    margin: 0;

    color: var(--text-color, #202020);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 4.6vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}


/* ==================================================
   SUPPORT OPTIONS
================================================== */

.support-options {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(1rem, 2vw, 2rem);
}

.support-option {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 23rem;
    padding:
        clamp(1.5rem, 3vw, 2.7rem);

    overflow: hidden;

    background-color: #ffffff;

    border:
        1px solid
        rgba(46, 125, 50, 0.13);

    border-radius:
        clamp(1.3rem, 2vw, 2rem);

    box-shadow:
        0 0.9rem 2.4rem
        rgba(48, 54, 43, 0.06);

    transition:
        transform var(--transition, 0.3s ease),
        box-shadow var(--transition, 0.3s ease),
        background-color var(--transition, 0.3s ease);
}

.support-option:first-child {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #164b28,
            #1e6034
        );
}

.support-option:hover {
    transform: translateY(-0.45rem);

    box-shadow:
        0 1.4rem 3.2rem
        rgba(44, 55, 39, 0.12);
}

.support-option-number {
    display: block;

    margin-bottom:
        clamp(2.5rem, 5vw, 4.5rem);

    color:
        rgba(46, 125, 50, 0.32);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1;
}

.support-option:first-child
.support-option-number {
    color:
        rgba(255, 255, 255, 0.48);
}

.support-option h3 {
    margin: 0;

    color: var(--text-color, #202020);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    line-height: 1.05;
}

.support-option:first-child h3 {
    color: #ffffff;
}

.support-option p {
    margin:
        1.2rem
        0
        0;

    color: var(--secondary-text-color, #5f625d);

    line-height: 1.7;
}

.support-option:first-child p {
    color:
        rgba(255, 255, 255, 0.7);
}

.support-option a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;

    margin-top: auto;
    padding-top: 2rem;

    color: var(--primary-color, #2e7d32);

    font-weight: 700;
    text-decoration: none;

    transition:
        transform var(--transition, 0.3s ease);
}

.support-option:first-child a {
    color: #ffffff;
}

.support-option a:hover {
    transform: translateX(0.3rem);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 64rem) {

    .projects-intro-grid {
        grid-template-columns:
            minmax(17rem, 0.8fr)
            minmax(29rem, 1.2fr);

        gap: 3rem;
    }

    .projects-intro-title {
        font-size:
            clamp(3.8rem, 7vw, 5.8rem);
    }

    .projects-intro-visual {
        min-height: 37rem;
    }

    .projects-intro-main-photo {
        width: 92%;
    }

    .projects-intro-small-photo {
        width: clamp(11rem, 20vw, 15rem);
    }

    .project-page-card,
    .project-page-card-reverse {
        grid-template-columns:
            minmax(16rem, 0.72fr)
            minmax(27rem, 1.28fr);

        gap: 3rem;
    }

    .project-page-card-reverse {
        grid-template-columns:
            minmax(27rem, 1.28fr)
            minmax(16rem, 0.72fr);
    }

    .project-page-small-image {
        width: 12rem;
    }

    .projects-summary-inner {
        grid-template-columns:
            minmax(14rem, 0.7fr)
            minmax(31rem, 1.3fr);

        gap: 3rem;
    }

    .projects-summary-stats {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .projects-summary-stats > div:nth-child(4) {
        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);

        border-left: 0;
    }

    .projects-summary-stats > div:nth-child(5) {
        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 48rem) {

    #projects-list {
        scroll-margin-top: 5.5rem;
    }

    .projects-intro {
        padding-block:
            3.5rem
            4rem;
    }

    .projects-intro::before {
        display: none;
    }

    .projects-intro-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .projects-intro-title {
        max-width: 8ch;

        font-size:
            clamp(3.5rem, 15vw, 5rem);
    }

    .projects-intro-description {
        max-width: none;
    }

    .projects-intro-actions {
        align-items: stretch;
    }

    .projects-intro-actions .primary-button {
        justify-content: center;
        width: 100%;
    }

    .projects-intro-link {
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
    }

    .projects-intro-visual {
        min-height: 35rem;
    }

    .projects-intro-main-photo {
        top: 0;
        right: 0;

        width: 94%;
    }

    .projects-intro-main-photo img {
        aspect-ratio: 4 / 3;
    }

    .projects-intro-small-photo {
        top: 43%;
        left: 0;

        width: 10.5rem;
    }

    .projects-intro-stats {
        right: 0;
        bottom: 0;

        grid-template-columns: 1fr;

        width: 72%;
    }

    .projects-intro-stats > div {
        padding:
            0.9rem
            1rem;

        text-align: left;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);

        border-left: 0;
    }

    .projects-intro-stats > div:first-child {
        border-top: 0;
    }

    .projects-intro-stats strong {
        margin-bottom: 0.25rem;

        font-size: 1.4rem;
    }

    .projects-catalog {
        padding-block:
            2.5rem
            5rem;
    }

    .project-filters {
        justify-content: flex-start;

        margin-bottom: 3.5rem;
        padding: 0;

        overflow-x: auto;
        overflow-y: hidden;

        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;

        scrollbar-width: none;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .project-filter {
        flex: 0 0 auto;

        min-height: 2.65rem;

        border:
            1px solid
            rgba(46, 125, 50, 0.14);
    }

    .projects-page-grid {
        gap: 4rem;
    }

    .project-page-card,
    .project-page-card-reverse {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        gap: 1.75rem;

        min-height: auto;
        padding:
            2rem
            1.25rem
            3rem;

        overflow: hidden;
    }

    .project-page-content,
    .project-page-image {
        order: initial;
        width: 100%;
    }

    .project-number,
    .project-page-card-reverse .project-number {
        top: 1.2rem;
        right: 0.8rem;
        left: auto;

        font-size:
            clamp(6.5rem, 28vw, 9rem);
    }

    .project-page-content {
        z-index: 3;
    }

    .project-page-content h2 {
        max-width: none;

        font-size:
            clamp(2.3rem, 10vw, 3.3rem);
    }

    .project-page-content > p {
        max-width: none;
    }

    .project-page-image img {
        aspect-ratio: 4 / 3;
    }

    .project-results {
        grid-template-columns: 1fr 1fr;
    }

    .project-page-small-image,
    .project-page-card-reverse
    .project-page-small-image {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        align-self: flex-end;

        width: min(62%, 12rem);
        margin-top: -4.5rem;

        transform: rotate(3deg);
    }

    .project-page-note {
        position: relative;

        bottom: auto;
        left: auto;

        align-self: flex-start;

        max-width: 15rem;
        margin-top: -0.5rem;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 30rem) {

    .projects-intro-title {
        font-size:
            clamp(3.15rem, 15vw, 4.2rem);
    }

    .projects-intro-visual {
        min-height: 31rem;
    }

    .projects-intro-main-photo {
        width: 100%;
    }

    .projects-intro-small-photo {
        top: 40%;

        width: 9rem;
    }

    .projects-intro-stats {
        width: 76%;
    }

    .project-page-card,
    .project-page-card-reverse {
        padding-inline: 1rem;
    }

    .project-results {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-results > div + div {
        margin-top: 0.3rem;
    }

    .projects-summary-stats {
        grid-template-columns: 1fr;
    }

    .projects-summary-stats > div,
    .projects-summary-stats > div:nth-child(n) {
        grid-column: auto;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);

        border-left: 0;
    }

    .projects-summary-stats > div:first-child {
        border-top: 0;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .project-filter,
    .project-page-card,
    .project-page-image img,
    .support-option,
    .project-page-link,
    .projects-intro-link {
        transition: none;
    }
}


/* ==================================================
   PROJECTS HERO — COLLAGE VERSION
================================================== */

.projects-intro {
    padding-block:
        clamp(2.5rem, 4vw, 4rem)
        clamp(2rem, 3vw, 3rem);

    background:
        linear-gradient(
            120deg,
            #fffbe2 0%,
            #fae587 50%,
            #bbf49b 100%
        );
}

.projects-intro-grid {
    grid-template-columns:
        minmax(18rem, 0.62fr)
        minmax(38rem, 1.38fr);

    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}


/* Рукописний напис */

.projects-intro-script {
    margin: 0 0 1.1rem;

    color: #244d2e;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: clamp(3rem, 2.4vw, 7.35rem);
    font-weight: 600;
    line-height: 1.35;

    transform: rotate(-2deg);
}


/* Заголовок */

.projects-intro-title {
    display: flex;
    flex-direction: column;

    max-width: none;
    margin: 0;
}

.projects-intro-title-main {
    display: block;

    color: #0a6c2e;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(4.1rem, 6vw, 6.4rem);
    font-weight: 700;
    line-height: 0.82;
    letter-spacing: -0.065em;

    text-transform: uppercase;
}

.projects-intro-title-secondary {
    display: block;

    margin-top: 0.65rem;

    color: #1f2d21;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
}


/* Опис */

.projects-intro-description {
    max-width: 70ch;

    margin-top: 1.7rem;

    font-size: 1.28rem;
    line-height: 1.65;
}


/* Кнопки */

.projects-intro-actions {
    margin-top: 1.8rem;
}


/* Візуальний колаж */

.projects-intro-visual {
    min-height: clamp(31rem, 40vw, 39rem);
}


/* Головне фото */

.projects-intro-main-photo {
    top: 0;
    right: 0;

    width: 82%;

    border-radius: 2;
}

.projects-intro-main-photo img {
    aspect-ratio: 16 / 10;
}


/* Загальні polaroid */

.projects-intro-small-photo {
    position: absolute;
    z-index: 5;

    margin: 0;
    padding: 0.45rem;

    background-color: #ffffff;

    box-shadow:
        0 1rem 2.5rem
        rgba(44, 47, 38, 0.18);
}

.projects-intro-small-photo::before {
    content: "";

    position: absolute;
    z-index: 4;

    top: -0.55rem;
    left: 50%;

    width: 4.5rem;
    height: 1rem;

    background-color:
        rgba(224, 205, 166, 0.7);

    transform:
        translateX(-50%)
        rotate(-3deg);
}

.projects-intro-small-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Фото дитини */

.projects-intro-small-photo--child {
    top: -7%;
    left: -18%;


    width: clamp(9rem, 14vw, 12rem);
    height: clamp(12rem, 18vw, 15.5rem);

    transform: rotate(-3deg);
}


/* Фото серця */

.projects-intro-small-photo--heart {
    top: 43%;
    left: 8%;

    width: clamp(8rem, 12vw, 10.5rem);
    height: clamp(7rem, 10vw, 9rem);

    transform: rotate(4deg);
}


/* Освітнє фото */

.projects-intro-small-photo--education {
    top: 7%;
    bottom: 0;
    left: 1%;

    width: clamp(9rem, 13vw, 11.5rem);
    height: clamp(8rem, 11vw, 10rem);

    transform: rotate(-2deg);
}


/* Записка */

.projects-intro-note {
    position: absolute;
    z-index: 6;

    top: 82%;
    left: 20%;

    width: clamp(14rem, 10vw, 23rem);
    padding:
        1rem
        1.1rem;

    color: #2f5436;

    background:
        linear-gradient(
            145deg,
            #f1e4c8,
            #fff6e6
        );

    box-shadow:
        0 0.7rem 1.8rem
        rgba(46, 43, 34, 0.11);

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: clamp(0.75rem, 1.5vw, 3rem);
    line-height: 1.5;

    transform: rotate(3deg);
}

.projects-intro-note::before {
    content: "";

    position: absolute;

    top: -0.5rem;
    left: 50%;

    width: 4rem;
    height: 0.95rem;

    background-color:
        rgba(219, 197, 155, 0.65);

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* ==================================================
   HERO STATISTICS — PROFESSIONAL CARD
================================================== */

.projects-intro-stats {
    position: absolute;
    right: 2.2%;
    bottom: 0.4rem;
    z-index: 8;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: min(62%, 31rem);

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            rgba(14, 61, 31, 0.98) 0%,
            rgba(24, 91, 47, 0.97) 55%,
            rgba(16, 69, 35, 0.98) 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.5rem;

    box-shadow:
        0 1.4rem 3.2rem rgba(20, 58, 31, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(0.35rem);
}

.projects-intro-stats > div {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    min-width: 0;
    min-height: 7.4rem;

    padding: 1.25rem 1rem;

    text-align: center;
}

.projects-intro-stats > div:not(:first-child)::before {
    content: "";

    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.22),
            transparent
        );
}

.projects-intro-stats strong {
    display: block;

    margin-bottom: 0.65rem;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 2vw, 2rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.projects-intro-stats span {
    display: block;

    max-width: 15ch;

    color: rgba(255, 255, 255, 0.72);

    font-size: clamp(0.66rem, 0.75vw, 0.75rem);
    line-height: 1.4;
}

.projects-intro-stats > div:last-child strong {
    max-width: 7ch;

    font-size: clamp(1.35rem, 1.7vw, 1.7rem);
    line-height: 1;
}


/* Намальована стрілка */

.projects-intro-arrow {
    position: absolute;
    z-index: 3;

    left: 0;
    bottom: 0.5rem;

    width: clamp(10rem, 18vw, 15rem);
    height: auto;

    overflow: visible;

    pointer-events: none;
}

.projects-intro-arrow path {
    fill: none;

    stroke: #284d30;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}










/* ==================================================
   PROJECT CARD — PROFESSIONAL EDITORIAL VERSION
================================================== */

body .project-page-card {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(17rem, 0.7fr)
        minmax(32rem, 1.3fr);

    grid-template-areas:
        "content image";

    align-items: center;
    gap: clamp(3rem, 5vw, 5.5rem);

    min-height: clamp(30rem, 40vw, 39rem);

    padding:
        clamp(3rem, 5vw, 5rem)
        clamp(2.5rem, 4vw, 4.5rem);

    overflow: visible;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(47, 112, 56, 0.055),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #fbf9f3 0%,
            #ffffff 58%,
            #f6f2e8 100%
        );

    border: 1px solid rgba(45, 92, 51, 0.1);
    border-radius: clamp(1.5rem, 2.5vw, 2.5rem);

    box-shadow:
        0 1.6rem 4rem rgba(42, 51, 38, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* decoratyvyy number */
body .project-page-card .project-number {
    position: absolute;
    top: 2.5rem;
    left: 2.2rem;
    z-index: 0;

    color: rgba(37, 91, 45, 0.055);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(9rem, 14vw, 14rem);
    font-weight: 700;
    line-height: 0.75;
    letter-spacing: -0.08em;

    pointer-events: none;
}

/* text part */
body .project-page-card .project-page-content {
    position: relative;
    z-index: 3;

    grid-area: content;

    max-width: 29rem;
}

/* catecory */
body .project-page-card .project-category {
    display: inline-flex;
    align-items: center;

    min-height: 1.8rem;
    margin-bottom: 1.35rem;
    padding: 0.35rem 0.8rem;

    color: #236431;
    background-color: rgba(44, 113, 53, 0.07);

    border: 1px solid rgba(44, 113, 53, 0.18);
    border-radius: 999px;

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* zagologok  */
body .project-page-card .project-page-content h2 {
    max-width: 10ch;
    margin: 0;

    color: #202020;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.7rem, 4vw, 4.35rem);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.05em;
}

/* opys */
body .project-page-card .project-page-content > p {
    max-width: 40ch;
    margin: 1.7rem 0 0;

    color: #5e625c;

    font-size: clamp(0.95rem, 1vw, 1.03rem);
    line-height: 1.72;
}
/* statistics */
body .project-page-card .project-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 2.2rem;
}

body .project-page-card .project-results > div {
    position: relative;

    min-width: 0;
    padding:
        0.2rem
        1rem
        0.2rem
        1rem;

    border-top: 0;
    border-left: 2px solid rgba(42, 120, 55, 0.3);
}

body .project-page-card .project-results strong {
    display: block;

    margin-bottom: 0.35rem;

    color: #2e7d32;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1;
}

body .project-page-card .project-results span {
    display: block;

    max-width: 16ch;

    color: #777a74;

    font-size: 0.7rem;
    line-height: 1.4;
}

/* posylania */
body .project-page-card .project-page-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;

    margin-top: 2.3rem;
    padding-bottom: 0.25rem;

    color: #22682f;

    border-bottom: 1px solid rgba(34, 104, 47, 0.25);

    font-size: 1.26rem;
    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

body .project-page-card .project-page-link:hover {
    color: #123e20;
    border-color: #123e20;

    transform: translateX(0.3rem);
}

/* main photo */
body .project-page-card .project-page-image {
    position: relative;
    z-index: 2;

    grid-area: image;

    margin: 0;

    overflow: hidden;

    border-radius: 1.6rem;

    box-shadow:
        0 1.5rem 3.5rem rgba(35, 43, 31, 0.16);
}

body .project-page-card .project-page-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(13, 35, 19, 0.1),
            transparent 42%
        );

    pointer-events: none;
}

body .project-page-card .project-page-image img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;
    object-position: center;

    transition: transform 0.55s ease;
}

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

/* small polaroid */
body .project-page-card .project-page-small-image {
    position: absolute;
    right: 1.8rem;
    bottom: -2.8rem;
    z-index: 7;

    width: clamp(9rem, 13vw, 12rem);

    margin: 0;
    padding:
        0.4rem
        0.4rem
        3rem;

    background-color: #ffffff;

    box-shadow:
        0 1.2rem 2.8rem rgba(44, 48, 38, 0.2);

    transform: rotate(3deg);
}

body .project-page-card .project-page-small-image::before {
    content: "";

    position: absolute;
    top: -0.55rem;
    left: 50%;
    z-index: 4;

    width: 4.3rem;
    height: 1rem;

    background:
        linear-gradient(
            to right,
            rgba(212, 193, 153, 0.45),
            rgba(234, 218, 181, 0.78),
            rgba(211, 191, 148, 0.44)
        );

    transform:
        translateX(-50%)
        rotate(-2deg);
}

body .project-page-card .project-page-small-image img {
    display: block;

    width: 100%;
    aspect-ratio: 4 / 4.5;

    object-fit: cover;
}

body .project-page-card .project-page-small-image figcaption {
    position: absolute;
    right: 0.65rem;
    bottom: 0.5rem;
    left: 0.65rem;

    color: #285432;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: 0.65rem;
    line-height: 1.35;
}

/* decorative details */
.project-page-card{
    position:relative;
    overflow:visible;
}

.project-page-card::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right: 60.3%;
    bottom:70%;

    background-image:url("../images/projects/leaf.PNG");
    background-size:contain;
    background-repeat:no-repeat;

    opacity:.38;

    rotate: -180deg;

    z-index:20;

    pointer-events:none;
}



/* mobile version */
@media (max-width: 48rem) {

    body .project-page-card {
        display: flex;
        flex-direction: column;

        gap: 2rem;

        min-height: auto;
        padding:
            2.5rem
            1.3rem
            4rem;

        overflow: hidden;
    }

    body .project-page-card .project-number {
        top: 1.5rem;
        right: 0.8rem;
        left: auto;

        font-size: clamp(7rem, 28vw, 9rem);
    }

    body .project-page-card .project-page-content {
        max-width: none;
    }

    body .project-page-card .project-page-content h2 {
        max-width: 11ch;

        font-size: clamp(2.55rem, 11vw, 3.6rem);
    }

    body .project-page-card .project-page-image {
        width: 100%;
    }

    body .project-page-card .project-page-image img {
        aspect-ratio: 4 / 3;
    }

    body .project-page-card .project-results {
        grid-template-columns: 1fr 1fr;
    }

    body .project-page-card .project-page-small-image {
        position: relative;
        right: auto;
        bottom: auto;

        align-self: flex-end;

        width: min(58%, 11rem);
        margin-top: -5rem;
    }
}




/* ==================================================
   PROJECT DETAILS — ALWAYS OPEN
================================================== */

.project-details-sheet {
    display: block;

    width: 100%;
    margin: 0;

    visibility: visible;
    opacity: 1;
}

.project-details-sheet-inner {
    position: relative;

    width: 100%;
    min-height: auto;

    margin:
        clamp(1.5rem, 3vw, 2.5rem)
        0
        clamp(5rem, 9vw, 9rem);

    padding:
        clamp(4rem, 7vw, 7rem)
        clamp(1.5rem, 5vw, 5rem);

    overflow: visible;

    background:
        radial-gradient(
            circle at 12% 10%,
            rgba(47, 113, 56, 0.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(214, 190, 109, 0.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #eee8d9 0%,
            #f8f4e9 48%,
            #e8e1d1 100%
        );

    border:
        1px solid
        rgba(50, 91, 54, 0.14);

    border-radius:
        clamp(1.5rem, 3vw, 3rem);

    box-shadow:
        0 2rem 5rem rgba(43, 49, 37, 0.12);
}

html {
    scroll-behavior: smooth;
}

.project-details-sheet {
    scroll-margin-top: 8rem;
}



.join-path{
    padding:120px 0;
    position:relative;
}

.section-title{
    max-width:700px;
    margin:0 auto 90px;
    text-align:center;
}

.section-title span{
    color:#2f7d3b;
    font-weight:700;
    letter-spacing:.25em;
    font-size:.8rem;
}

.section-title h2{
    margin:18px 0;
    font-size:4.2rem;
    line-height:.95;
}

.section-title p{
    max-width:560px;
    margin:auto;
    color:#666;
    line-height:1.8;
}

.join-timeline{

    position:relative;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:80px;
}

.timeline-line{

    position:absolute;

    top:72px;
    left:13%;
    right:13%;

    height:3px;

    background:linear-gradient(
        90deg,
        #8cc46f,
        #2f7d3b
    );

    z-index:0;
}

.join-step{

    position:relative;

    z-index:2;

    text-align:center;
}

.step-number{

    font-size:4.5rem;

    font-weight:700;

    color:#dfe8db;

    margin-bottom:15px;
}

.step-circle{

    width:82px;
    height:82px;

    margin:auto;

    border-radius:50%;

    background:white;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2rem;

    box-shadow:
    0 20px 45px rgba(0,0,0,.08);

    border:4px solid #2f7d3b;

    margin-bottom:35px;

    transition:.35s;
}

.join-step:hover .step-circle{

    transform:translateY(-8px) scale(1.08);

    background:#2f7d3b;

    color:white;
}

.join-step h3{

    font-size:2rem;

    margin-bottom:18px;
}

.join-step p{

    color:#666;

    line-height:1.8;

    max-width:280px;

    margin:auto auto 28px;
}

.join-step a{

    color:#2f7d3b;

    font-weight:700;

    text-decoration:none;
}

.join-step:hover a{

    letter-spacing:.06em;
}








/* =========================================================
   PROJECTS PAGE — FINAL MOBILE VERSION
   ВСТАВИТИ В САМИЙ КІНЕЦЬ projects.css
========================================================= */

@media (max-width: 768px) {

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

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #projects-list,
    .project-details-sheet {
        scroll-margin-top: 5.5rem;
    }

    .projects-intro .container,
    .projects-filter-section .container,
    .projects-page .container,
    .projects-summary .container,
    .project-support .container {
        width: calc(100% - 24px);
        max-width: none;

        margin-inline: auto;

        padding-left: 0;
        padding-right: 0;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .projects-intro {
        padding:
            42px
            0
            46px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 88% 12%,
                rgba(120, 178, 76, 0.14),
                transparent 27%
            ),
            linear-gradient(
                145deg,
                #fff6c8 0%,
                #fae99a 50%,
                #e5efb0 100%
            );
    }

    .projects-intro::before {
        display: none;
    }

    .projects-intro-grid {
        display: flex;
        flex-direction: column;

        gap: 34px;
    }


    /* =====================================================
       HERO TEXT
    ===================================================== */

    .projects-intro-content {
        width: 100%;
    }

    .projects-intro-script {
        margin:
            0
            0
            10px;

        font-size: 15px !important;
        line-height: 1.35;

        transform: rotate(-2deg);
    }

    .projects-intro-title {
        display: block;

        width: 100%;
        max-width: 100%;

        margin: 0;
    }

    .projects-intro-title-main {
        display: block;

        font-size:
            clamp(48px, 14vw, 64px);

        line-height: 0.86;

        letter-spacing: -0.055em;
    }

    .projects-intro-title-secondary {
        display: block;

        max-width: 12ch;

        margin-top: 8px;

        font-size:
            clamp(27px, 8vw, 37px);

        line-height: 0.98;
    }

    .projects-intro-description {
        max-width: 31ch;

        margin-top: 20px;

        font-size: 14px;

        line-height: 1.62;
    }

    .projects-intro-actions {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 10px;

        margin-top: 24px;
    }

    .projects-intro-actions .primary-button {
        width: 100%;

        min-height: 52px;

        justify-content: space-between;

        padding:
            0
            20px;

        border-radius: 999px;
    }

    .projects-intro-link {
        width: 100%;

        min-height: 48px;

        justify-content: center;

        font-size: 13px;

        border:
            1px solid
            rgba(27, 97, 39, 0.22);

        border-radius: 999px;
    }


    /* =====================================================
       HERO COLLAGE
    ===================================================== */

    .projects-intro-visual {
        position: relative;

        width: 100%;

        min-height: 385px;
    }

    .projects-intro-main-photo {
        top: 20px;
        right: 0;

        width: 88%;

        border-radius: 20px;

        box-shadow:
            0 16px 34px
            rgba(39, 50, 31, 0.16);
    }

    .projects-intro-main-photo img {
        aspect-ratio: 4 / 3;

        object-position: center;
    }


    /* child polaroid */

    .projects-intro-small-photo--child {
        top: 0;
        left: 0;

        width: 112px;
        height: 145px;

        padding: 5px;

        transform: rotate(-4deg);
    }


    /* education */

    .projects-intro-small-photo--education {
        top: 34%;
        left: 3px;

        width: 92px;
        height: 82px;

        padding: 4px;

        transform: rotate(-2deg);
    }


    /* heart */

    .projects-intro-small-photo--heart {
        top: auto;
        right: 6px;
        bottom: 64px;
        left: auto;

        width: 84px;
        height: 74px;

        padding: 4px;

        transform: rotate(4deg);
    }


    .projects-intro-small-photo::before {
        width: 42px;
        height: 9px;

        top: -5px;
    }


    /* note */

    .projects-intro-note {
        top: auto;
        bottom: 8px;
        left: 3px;

        width: 142px;

        padding:
            9px
            10px;

        font-size: 10px;

        line-height: 1.35;

        transform: rotate(-3deg);
    }


    /* =====================================================
       HERO STATS
    ===================================================== */

    .projects-intro-stats {
        right: 0;
        bottom: 0;

        width: 62%;

        grid-template-columns: 1fr;

        border-radius: 16px;
    }

    .projects-intro-stats > div {
        min-height: 54px;

        display: grid;

        grid-template-columns:
            68px
            minmax(0, 1fr);

        align-items: center;

        gap: 8px;

        padding:
            8px
            10px;

        text-align: left;
    }

    .projects-intro-stats > div:not(:first-child)::before {
        top: 0;
        bottom: auto;
        left: 10px;
        right: 10px;

        width: auto;
        height: 1px;

        background:
            rgba(255,255,255,0.13);
    }

    .projects-intro-stats strong {
        margin: 0;

        font-size: 19px;
    }

    .projects-intro-stats span {
        font-size: 9px;

        line-height: 1.25;
    }

    .projects-intro-arrow {
        display: none;
    }


    /* =====================================================
       FILTERS
    ===================================================== */

    .projects-filter-section {
        position: sticky;
        top: 72px;

        z-index: 90;

        padding:
            10px
            0;

        background:
            rgba(250, 248, 241, 0.95);

        backdrop-filter: blur(12px);

        border-bottom:
            1px solid
            rgba(36, 96, 45, 0.08);
    }

    .project-filters {
        display: flex;

        width: 100%;

        gap: 8px;

        margin: 0;

        padding:
            4px
            0
            6px;

        overflow-x: auto;
        overflow-y: hidden;

        background: transparent;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        scrollbar-width: none;

        scroll-snap-type: x proximity;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .project-filters-indicator {
        display: none;
    }

    .project-filter {
        flex: 0 0 auto;

        min-height: 40px;

        padding:
            0
            16px;

        color: #31543a;

        background:
            rgba(255,255,255,0.78);

        border:
            1px solid
            rgba(35, 103, 48, 0.13);

        border-radius: 999px;

        font-size: 11px;
        font-weight: 700;

        scroll-snap-align: start;

        box-shadow:
            0 5px 15px
            rgba(35, 47, 33, 0.04);
    }

    .project-filter.active {
        color: white;

        background:
            linear-gradient(
                135deg,
                #1b6230,
                #2c823e
            );

        border-color: transparent;

        box-shadow:
            0 8px 18px
            rgba(36, 109, 50, 0.17);
    }


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

    .projects-page {
        padding:
            24px
            0
            50px;

        background:
            #f8f6ef;
    }

    .projects-page-grid {
        display: flex;
        flex-direction: column;

        gap: 34px;

        padding:
            14px;

        background:
            linear-gradient(
                145deg,
                #e7efb0,
                #c5d78a 46%,
                #2f7437 100%
            );

        border-radius: 26px;
    }


    /* =====================================================
       MAIN PROJECT CARD
    ===================================================== */

    .project-page-card,
    .project-page-card-reverse {
        position: relative;

        display: flex;
        flex-direction: column;

        width: 100%;

        min-height: 0;

        gap: 18px;

        padding:
            24px
            18px
            26px;

        overflow: hidden;

        background:
            linear-gradient(
                145deg,
                #fffdf8,
                #ffffff
            );

        border-radius: 22px;

        box-shadow:
            0 14px 30px
            rgba(30, 55, 33, 0.12);
    }

    .project-page-card-reverse {
        flex-direction: column;
    }


    /* big number */

    .project-number,
    .project-page-card-reverse .project-number {
        top: 14px;
        right: 12px;
        left: auto;

        font-size: 100px;

        opacity: 0.75;
    }


    /* =====================================================
       CARD CONTENT
    ===================================================== */

    .project-page-content {
        order: 1;

        width: 100%;
    }

    .project-category {
        min-height: 25px;

        margin-bottom: 10px;

        padding:
            4px
            9px;

        font-size: 9px;
    }

    .project-page-content h2 {
        max-width: 11ch;

        font-size:
            clamp(34px, 10vw, 46px);

        line-height: 0.94;
    }

    .project-page-content > p {
        max-width: 30ch;

        margin-top: 14px;

        font-size: 13px;

        line-height: 1.55;
    }


    /* =====================================================
       MAIN IMAGE
    ===================================================== */

    .project-page-image {
        order: 2;

        width: 100%;

        border-radius: 17px;

        box-shadow:
            0 10px 24px
            rgba(37, 45, 33, 0.12);
    }

    .project-page-image img {
        aspect-ratio: 4 / 3;

        object-fit: cover;
    }


    /* =====================================================
       RESULTS
    ===================================================== */

    .project-results {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;

        margin-top: 18px;
    }

    .project-results > div {
        min-height: 78px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            11px
            10px;

        background:
            #f5f8f0;

        border:
            1px solid
            rgba(41, 105, 49, 0.10);

        border-radius: 12px;
    }

    .project-results strong {
        margin-bottom: 5px;

        font-size: 21px;
    }

    .project-results span {
        font-size: 9px;

        line-height: 1.3;
    }


    /* =====================================================
       LINK
    ===================================================== */

    .project-page-link {
        min-height: 44px;

        width: 100%;

        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-top: 16px;

        padding:
            0
            14px;

        background:
            rgba(36, 109, 50, 0.06);

        border:
            1px solid
            rgba(36, 109, 50, 0.11);

        border-radius: 999px;

        font-size: 12px;
    }


    /* =====================================================
       SMALL POLAROID
    ===================================================== */

    .project-page-small-image,
    .project-page-card-reverse .project-page-small-image {
        position: relative;

        order: 3;

        right: auto;
        left: auto;
        bottom: auto;

        align-self: flex-end;

        width: 126px;

        margin:
            -54px
            8px
            0
            0;

        padding:
            5px
            5px
            30px;

        transform: rotate(3deg);

        box-shadow:
            0 10px 24px
            rgba(40, 44, 34, 0.16);
    }

    .project-page-card-reverse
    .project-page-small-image {
        align-self: flex-start;

        margin:
            -50px
            0
            0
            8px;

        transform: rotate(-3deg);
    }

    .project-page-small-image::before {
        width: 42px;
        height: 9px;

        top: -5px;
    }

    .project-page-small-image figcaption {
        right: 6px;
        bottom: 5px;
        left: 6px;

        font-size: 8px;
    }


    /* =====================================================
       NOTE
    ===================================================== */

    .project-page-note {
        position: relative;

        order: 4;

        bottom: auto;
        left: auto;

        max-width: 180px;

        margin:
            -6px
            0
            0;

        padding:
            11px
            12px;

        font-size: 11px;

        line-height: 1.35;
    }


    /* =====================================================
       DETAILS SHEETS
    ===================================================== */

    .project-details-sheet {
        width: 100%;

        margin: 0;

        scroll-margin-top: 8.5rem;
    }

    .project-details-sheet-inner {
        width: 100%;

        margin:
            0
            0
            20px;

        padding:
            30px
            16px
            34px;

        overflow: hidden;

        background:
            radial-gradient(
                circle at 85% 7%,
                rgba(47, 113, 56, 0.07),
                transparent 25%
            ),
            linear-gradient(
                145deg,
                #efe9da,
                #faf7ef
            );

        border-radius: 20px;

        box-shadow:
            0 12px 28px
            rgba(43, 49, 37, 0.10);
    }


    /* =====================================================
       DETAILS — GENERIC HEADER
    ===================================================== */

    .project-details-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;

        gap: 12px;

        margin-bottom: 28px;
    }

    .project-details-header-text {
        min-width: 0;
    }

    .project-details-script {
        margin:
            0
            0
            7px;

        color: #2a6d36;

        font-family:
            "Segoe Script",
            "Brush Script MT",
            cursive;

        font-size: 13px;

        line-height: 1.35;
    }

    .project-details-header .section-label {
        margin-bottom: 9px;

        font-size: 9px;

        letter-spacing: 0.1em;
    }

    .project-details-header h2 {
        max-width: 11ch;

        margin: 0;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            clamp(31px, 9vw, 41px);

        line-height: 0.96;

        letter-spacing: -0.045em;
    }

    .project-details-header-text > p:last-child {
        max-width: 30ch;

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.5;
    }

    .project-details-header-number {
        flex-shrink: 0;

        color:
            rgba(37, 101, 46, 0.10);

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 58px;

        line-height: 0.8;
    }


    /* =====================================================
       STORY
    ===================================================== */

    .project-story {
        display: flex;
        flex-direction: column;

        gap: 18px;

        margin-bottom: 28px;
    }

    .project-story-content {
        width: 100%;
    }

    .project-story-content time {
        display: inline-block;

        margin-bottom: 8px;

        color: #2a7138;

        font-size: 10px;
        font-weight: 700;

        letter-spacing: 0.06em;
    }

    .project-story-content h3 {
        max-width: 13ch;

        margin:
            0
            0
            12px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            clamp(25px, 7vw, 32px);

        line-height: 1;
    }

    .project-story-content p {
        max-width: 31ch;

        font-size: 12px;

        line-height: 1.55;
    }

    .project-story-content blockquote {
        margin:
            16px
            0
            0;

        padding:
            13px
            14px;

        color: #225c30;

        background:
            rgba(255,255,255,0.52);

        border-left:
            2px solid
            #2d793c;

        border-radius:
            0
            10px
            10px
            0;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 13px;

        line-height: 1.45;
    }

    .project-story-photo {
        width: 100%;

        margin: 0;

        padding:
            5px
            5px
            30px;

        background: white;

        box-shadow:
            0 9px 22px
            rgba(45, 42, 34, 0.12);

        transform: rotate(-1deg);
    }

    .project-story-photo img {
        width: 100%;
        height: auto;

        display: block;

        aspect-ratio: 4 / 3;

        object-fit: cover;
    }

    .project-story-photo figcaption {
        padding:
            6px
            3px
            0;

        color: #2d6537;

        font-family:
            "Segoe Script",
            cursive;

        font-size: 9px;
    }


    /* =====================================================
       DETAILS GALLERY
    ===================================================== */

    .project-details-gallery {
        display: grid;

        grid-template-columns:
            1.1fr
            0.9fr;

        gap: 8px;

        align-items: end;

        margin:
            10px
            0
            30px;
    }

    .project-gallery-photo {
        margin: 0;

        padding:
            4px
            4px
            24px;

        background: white;

        box-shadow:
            0 7px 18px
            rgba(44, 42, 34, 0.11);
    }

    .project-gallery-photo-left {
        transform: rotate(-2deg);
    }

    .project-gallery-photo-center {
        transform: rotate(2deg);
    }

    .project-gallery-photo img {
        width: 100%;

        display: block;

        aspect-ratio: 4 / 5;

        object-fit: cover;
    }

    .project-gallery-photo figcaption {
        padding-top: 5px;

        font-size: 8px;
    }

    .project-details-note {
        grid-column:
            1
            / 3;

        justify-self: end;

        max-width: 170px;

        margin-top: -8px;

        padding:
            10px
            11px;

        font-family:
            "Segoe Script",
            cursive;

        font-size: 10px;

        line-height: 1.35;

        transform: rotate(-2deg);
    }


    /* =====================================================
       DETAILS IMPACT
    ===================================================== */

    .project-details-impact {
        margin-top: 26px;
    }

    .project-details-impact-heading h3 {
        margin:
            4px
            0
            14px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 27px;
    }

    .project-details-impact-grid {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        overflow: hidden;

        border:
            1px solid
            rgba(38, 93, 47, 0.11);

        border-radius: 14px;

        background:
            rgba(255,255,255,0.46);
    }

    .project-details-impact-grid > div {
        min-height: 82px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        padding:
            10px;

        text-align: center;
    }

    .project-details-impact-grid > div:nth-child(odd) {
        border-right:
            1px solid
            rgba(38, 93, 47, 0.10);
    }

    .project-details-impact-grid > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(38, 93, 47, 0.10);
    }

    .project-details-impact-grid strong {
        margin-bottom: 4px;

        color: #287337;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 21px;
    }

    .project-details-impact-grid span {
        font-size: 9px;

        line-height: 1.3;
    }


    /* =====================================================
       GENERIC FIGURES IN DETAILS
    ===================================================== */

    .project-details-sheet-inner figure img {
        max-width: 100%;
    }


    /* =====================================================
       JOIN PATH
    ===================================================== */

    .join-path {
        padding:
            52px
            0;
    }

    .section-title {
        margin:
            0
            auto
            34px;

        text-align: left;
    }

    .section-title span {
        font-size: 9px;
    }

    .section-title h2 {
        margin:
            8px
            0
            12px;

        font-size: 38px;

        line-height: 0.95;
    }

    .section-title p {
        margin: 0;

        font-size: 12px;

        line-height: 1.5;
    }

    .join-timeline {
        display: flex;
        flex-direction: column;

        gap: 14px;
    }

    .timeline-line {
        display: none;
    }

    .join-step {
        display: grid;

        grid-template-columns:
            52px
            minmax(0, 1fr);

        grid-template-areas:
            "circle title"
            "circle text"
            "circle link";

        column-gap: 13px;

        padding:
            15px;

        text-align: left;

        background:
            rgba(255,255,255,0.72);

        border:
            1px solid
            rgba(37, 101, 47, 0.10);

        border-radius: 15px;
    }

    .step-number {
        display: none;
    }

    .step-circle {
        grid-area: circle;

        width: 50px;
        height: 50px;

        margin: 0;

        border-width: 2px;

        font-size: 19px;
    }

    .join-step h3 {
        grid-area: title;

        margin:
            1px
            0
            4px;

        font-size: 20px;
    }

    .join-step p {
        grid-area: text;

        max-width: none;

        margin:
            0
            0
            8px;

        font-size: 11px;

        line-height: 1.45;
    }

    .join-step a {
        grid-area: link;

        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .projects-intro .container,
    .projects-filter-section .container,
    .projects-page .container,
    .projects-summary .container,
    .project-support .container {
        width: calc(100% - 18px);
    }

    .projects-intro-title-main {
        font-size: 45px;
    }

    .projects-intro-title-secondary {
        font-size: 25px;
    }

    .projects-intro-visual {
        min-height: 360px;
    }

    .projects-intro-main-photo {
        width: 90%;
    }

    .projects-intro-small-photo--child {
        width: 100px;
        height: 132px;
    }

    .projects-intro-stats {
        width: 64%;
    }

    .projects-page-grid {
        padding:
            10px;

        border-radius: 21px;
    }

    .project-page-card,
    .project-page-card-reverse {
        padding:
            21px
            15px
            23px;
    }

    .project-page-content h2 {
        font-size: 33px;
    }

    .project-results {
        grid-template-columns: 1fr;
    }

    .project-results > div {
        min-height: 64px;
    }

    .project-page-small-image,
    .project-page-card-reverse .project-page-small-image {
        width: 116px;
    }

    .project-details-sheet-inner {
        padding:
            26px
            13px
            30px;
    }

    .project-details-header h2 {
        font-size: 30px;
    }

    .project-details-header-number {
        font-size: 48px;
    }

    .project-details-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .projects-summary-stats {
        grid-template-columns: 1fr;
    }

    .projects-summary-stats > div,
    .projects-summary-stats > div:last-child {
        grid-column: auto;

        border-left: 0 !important;
    }

    .projects-summary-stats > div + div {
        border-top:
            1px solid
            rgba(255,255,255,0.13);
    }

}




/* fiixig mobile */
/* =========================================================
   PROJECTS — CLEAN MOBILE SUMMARY + SUPPORT
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       SUMMARY
    ===================================================== */

    .projects-summary {
        position: relative;

        width: 100%;

        padding:
            38px
            0
            40px;

        overflow: hidden;

        background:
            linear-gradient(
                135deg,
                #0d4827 0%,
                #145d31 55%,
                #1f713a 100%
            );
    }


    .projects-summary .container {
        width: 100%;
        max-width: none;

        margin: 0;

        padding:
            0
            18px;
    }


    .projects-summary-inner {
        display: flex;
        flex-direction: column;

        align-items: center;

        width: 100%;

        gap: 24px;

        text-align: center;
    }


    /* decorative 120 */

    .projects-summary::before {
        top: 8px;
        right: -8px;

        font-size: 88px;

        opacity: 1;

        color:
            rgba(255,255,255,0.035);
    }


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

    .projects-summary-title {
        width: 100%;

        text-align: center;
    }


    .projects-summary-title::before {
        display: block;

        height: auto;

        margin:
            0
            auto
            4px;

        font-size: 38px;

        line-height: 0.7;

        text-align: center;
    }


    .projects-summary-title p {
        width: 100%;

        margin:
            0
            auto
            7px;

        font-size: 15px;

        line-height: 1.2;

        text-align: center;
    }


    .projects-summary-title h2 {
        width: 100%;
        max-width: none;

        margin: 0 auto;

        font-size:
            clamp(34px, 9vw, 42px);

        line-height: 0.95;

        letter-spacing: -0.04em;

        text-align: center;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .projects-summary-stats {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        overflow: hidden;

        border:
            1px solid
            rgba(255,255,255,0.15);

        border-radius: 18px;

        background:
            rgba(255,255,255,0.035);
    }


    .projects-summary-stats > div {
        min-height: 92px;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        padding:
            12px
            8px;

        border: 0;

        text-align: center;
    }


    .projects-summary-stats > div:nth-child(odd) {
        border-right:
            1px solid
            rgba(255,255,255,0.14);
    }


    .projects-summary-stats > div:nth-child(n + 3) {
        border-top:
            1px solid
            rgba(255,255,255,0.14);
    }


    .projects-summary-stats > div:last-child {
        grid-column:
            1
            / -1;

        min-height: 82px;

        border-right: 0;
    }


    .projects-summary-stats strong {
        margin-bottom: 5px;

        font-size: 24px;

        line-height: 1;
    }


    .projects-summary-stats span {
        max-width: 14ch;

        font-size: 9px;

        line-height: 1.3;
    }



    /* =====================================================
       SUPPORT SECTION
    ===================================================== */

    .project-support {
        width: 100%;

        padding:
            44px
            0
            52px;

        background:
            linear-gradient(
                180deg,
                #fbfaf6,
                #ffffff
            );
    }


    .project-support .container {
        width: 100%;
        max-width: none;

        margin: 0;

        padding:
            0
            18px;
    }


    /* =====================================================
       SUPPORT HEADING
    ===================================================== */

    .project-support-heading {
        display: flex;
        flex-direction: column;

        align-items: center;

        width: 100%;

        margin:
            0
            auto
            28px;

        text-align: center;
    }


    .project-support-heading .section-label {
        width: 100%;

        margin:
            0
            auto
            9px;

        font-size: 9px;

        letter-spacing: 0.18em;

        text-align: center;
    }


    .project-support-heading h2 {
        width: 100%;
        max-width: 12ch;

        margin:
            0
            auto;

        font-size:
            clamp(32px, 8.5vw, 40px);

        line-height: 0.97;

        letter-spacing: -0.035em;

        text-align: center;
    }


    .project-support-heading p {
        width: 100%;
        max-width: 34ch;

        margin:
            14px
            auto
            0;

        font-size: 12px;

        line-height: 1.55;

        text-align: center;
    }



    /* =====================================================
       SUPPORT CARDS
    ===================================================== */

    .support-options {
        display: flex;
        flex-direction: column;

        width: 100%;

        gap: 12px;
    }


    .support-option {
        width: 100%;

        min-height: 0;

        padding:
            20px
            18px;

        border-radius: 17px;
    }


    .support-option-number {
        margin-bottom: 18px;

        font-size: 24px;
    }


    .support-option h3 {
        font-size: 23px;

        line-height: 1;
    }


    .support-option p {
        max-width: 34ch;

        margin-top: 8px;

        font-size: 11px;

        line-height: 1.5;
    }


    .support-option a {
        margin-top: 14px;

        font-size: 11px;
    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .projects-summary .container,
    .project-support .container {
        padding-left: 14px;
        padding-right: 14px;
    }


    .projects-summary-title h2 {
        font-size: 32px;
    }


    .project-support-heading h2 {
        font-size: 31px;
    }


    .projects-summary-stats > div {
        min-height: 86px;
    }

}





/* fixing2 */
/* =========================================================
   PROJECTS — FINAL MOBILE POLISH
   HERO + SUMMARY + SUPPORT
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       1. HERO — ПРИБИРАЄМО ДИВНІ ВЕЛИЧЕЗНІ КНОПКИ
    ===================================================== */

    .projects-intro-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .projects-intro-title {
        width: 100% !important;
        max-width: 100% !important;
    }

    .projects-intro-title-main {
        font-size: clamp(46px, 12.5vw, 58px) !important;
        line-height: 0.88 !important;
    }

    .projects-intro-title-secondary {
        width: 100% !important;
        max-width: 12ch !important;

        margin-top: 10px !important;

        font-size: clamp(29px, 7.8vw, 37px) !important;
        line-height: 1 !important;
    }

    .projects-intro-description {
        width: 100% !important;
        max-width: 34ch !important;

        margin-top: 22px !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    .projects-intro-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 10px !important;

        margin-top: 24px !important;
    }


    .projects-intro-actions .primary-button,
    .projects-intro-link {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        padding: 0 20px !important;

        border-radius: 999px !important;

        font-size: 13px !important;
        line-height: 1 !important;

        text-align: center !important;
    }

    .projects-intro-actions .primary-button {
        gap: 9px !important;
    }

    .projects-intro-link {
        background: rgba(255,255,255,.08) !important;

        border:
            1px solid rgba(40, 104, 43, .22) !important;
    }



    /* =====================================================
       2. SUMMARY — "НАША ЄДНІСТЬ"
       НОВА КОМПОЗИЦІЯ
    ===================================================== */

    .projects-summary {
        position: relative !important;

        width: 100% !important;

        padding: 38px 0 36px !important;

        overflow: hidden !important;

        background:
            radial-gradient(
                circle at 90% 5%,
                rgba(255,255,255,.08),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                #0a4725,
                #176534 60%,
                #22763d
            ) !important;
    }


    .projects-summary .container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            0
            20px !important;
    }


    .projects-summary-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;

        gap: 24px !important;

        text-align: center !important;
    }


    /* прибираємо те дивне гігантське 120+ позаду */

    .projects-summary::before {
        content: "120+" !important;

        position: absolute !important;

        top: 14px !important;
        right: -8px !important;

        color: rgba(255,255,255,.035) !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-size: 78px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        pointer-events: none !important;
    }


    /* -------------------------------
       SUMMARY HEADING
    -------------------------------- */

    .projects-summary-title {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    .projects-summary-title::before {
        content: "“" !important;

        display: block !important;

        width: auto !important;
        height: auto !important;

        margin:
            0
            auto
            3px !important;

        color: rgba(255,255,255,.75) !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-size: 38px !important;
        line-height: .65 !important;

        text-align: center !important;
    }


    /* "Наша" */

    .projects-summary-title p {
        width: 100% !important;
        max-width: none !important;

        margin:
            0
            auto
            5px !important;

        color: #d9ead8 !important;

        font-family:
            "Segoe Script",
            "Brush Script MT",
            cursive !important;

        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;

        text-align: center !important;
    }


    /* "єдність" */

    .projects-summary-title h2 {
        width: 100% !important;
        max-width: none !important;

        margin: 0 auto !important;

        color: #fff !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-size: 39px !important;
        font-weight: 700 !important;

        line-height: .95 !important;

        letter-spacing: -.035em !important;

        text-align: center !important;
    }



    /* -------------------------------
       STATS
    -------------------------------- */

    .projects-summary-stats {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        overflow: hidden !important;

        background:
            rgba(255,255,255,.035) !important;

        border:
            1px solid rgba(255,255,255,.16) !important;

        border-radius: 18px !important;

        box-shadow: none !important;
    }


    .projects-summary-stats > div {
        min-width: 0 !important;
        min-height: 92px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        padding:
            12px
            8px !important;

        border: 0 !important;

        text-align: center !important;
    }


    .projects-summary-stats > div:nth-child(odd) {
        border-right:
            1px solid rgba(255,255,255,.13) !important;
    }


    .projects-summary-stats > div:nth-child(n + 3) {
        border-top:
            1px solid rgba(255,255,255,.13) !important;
    }


    /* останній — на всю ширину */

    .projects-summary-stats > div:last-child {
        grid-column: 1 / -1 !important;

        min-height: 80px !important;

        border-right: 0 !important;
    }


    .projects-summary-stats strong {
        display: block !important;

        margin:
            0
            0
            5px !important;

        color: #fff !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-size: 23px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }


    .projects-summary-stats span {
        display: block !important;

        width: 100% !important;
        max-width: 16ch !important;

        margin: 0 auto !important;

        color: rgba(255,255,255,.72) !important;

        font-size: 9px !important;
        line-height: 1.35 !important;

        text-align: center !important;
    }



    /* =====================================================
       3. SUPPORT —
       "РАЗОМ МИ МОЖЕМО ЗРОБИТИ БІЛЬШЕ"
    ===================================================== */

    .project-support {
        width: 100% !important;

        padding:
            46px
            0
            52px !important;

        background:
            linear-gradient(
                180deg,
                #fffdf9,
                #f8f6ef
            ) !important;
    }


    .project-support::before {
        width: calc(100% - 40px) !important;
    }


    .project-support .container {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;

        padding:
            0
            20px !important;
    }



    /* -------------------------------
       SUPPORT HEADING
    -------------------------------- */

    .project-support-heading {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;

        width: 100% !important;
        max-width: none !important;

        margin:
            0
            auto
            30px !important;

        gap: 0 !important;

        text-align: center !important;
    }


    /* ДОЛУЧИТИСЯ */

    .project-support-heading .section-label {
        display: block !important;

        width: 100% !important;

        margin:
            0
            auto
            9px !important;

        color: #297338 !important;

        font-size: 9px !important;
        font-weight: 700 !important;

        line-height: 1.2 !important;

        letter-spacing: .2em !important;

        text-align: center !important;
    }


    /* РАЗОМ МИ МОЖЕМО... */

    .project-support-heading h2 {
        width: 100% !important;

        /*
          НЕ 9ch — саме це стискало заголовок.
        */
        max-width: 13ch !important;

        margin:
            0
            auto !important;

        color: #20201e !important;

        font-family:
            Georgia,
            "Times New Roman",
            serif !important;

        font-size: 36px !important;
        font-weight: 700 !important;

        line-height: .98 !important;

        letter-spacing: -.04em !important;

        text-align: center !important;
    }


    /* опис під заголовком */

    .project-support-heading p:not(.section-label) {
        display: block !important;

        width: 100% !important;
        max-width: 34ch !important;

        margin:
            14px
            auto
            0 !important;

        color: #676960 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 12px !important;
        font-weight: 400 !important;

        line-height: 1.55 !important;

        text-align: center !important;
    }



    /* =====================================================
       ЯКЩО ОПИС Є НЕ ВСЕРЕДИНІ heading
       а стоїть сусіднім <p>
    ===================================================== */

    .project-support-heading + p {
        width: 100% !important;
        max-width: 34ch !important;

        margin:
            -15px
            auto
            28px !important;

        color: #676960 !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 12px !important;

        line-height: 1.55 !important;

        text-align: center !important;
    }



    /* =====================================================
       SUPPORT CARDS
    ===================================================== */

    .support-options {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;
    }


    .support-option {
        width: 100% !important;

        min-height: 0 !important;

        padding:
            20px
            18px !important;

        border-radius: 18px !important;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .projects-summary .container,
    .project-support .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    .projects-summary-title h2 {
        font-size: 35px !important;
    }


    .project-support-heading h2 {
        max-width: 12ch !important;

        font-size: 33px !important;
    }


    .projects-summary-stats > div {
        min-height: 86px !important;
    }

}



/* =========================================================
   MILITARY DETAILS — ВНУТРІШНЯ ПРОКРУТКА(14/09/26)
========================================================= */

#military-details {
    width: 100%;
}


/* саме великий світлий лист */

#military-details .project-details-sheet-inner {
    position: relative;

    /* блок більше не росте на кілька екранів */
    height: min(76vh, 760px);
    max-height: 760px;

    overflow-y: auto;
    overflow-x: hidden;

    /* місце для scrollbar */
    padding-right: 28px;

    /* щоб при появі scrollbar контент не стрибав */
    scrollbar-gutter: stable;

    /* прокрутка не перекидається одразу на всю сторінку */
    overscroll-behavior: contain;

    scroll-behavior: smooth;
}


/* =========================================================
   SCROLLBAR — FIREFOX
========================================================= */

#military-details .project-details-sheet-inner {
    scrollbar-width: thin;

    scrollbar-color:
        #2d7d3c
        rgba(45, 125, 60, 0.10);
}


/* =========================================================
   SCROLLBAR — CHROME / SAFARI / EDGE
========================================================= */

#military-details
.project-details-sheet-inner::-webkit-scrollbar {
    width: 9px;
}


#military-details
.project-details-sheet-inner::-webkit-scrollbar-track {
    margin:
        24px
        0;

    background:
        rgba(45, 125, 60, 0.08);

    border-radius: 999px;
}


#military-details
.project-details-sheet-inner::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            #398c47,
            #1f652f
        );

    border-radius: 999px;

    border:
        2px solid
        rgba(245, 243, 235, 0.9);
}


#military-details
.project-details-sheet-inner::-webkit-scrollbar-thumb:hover {
    background:
        #195628;
}





/* обєднуємо решту так само */

#military-details .project-details-sheet-inner,
#humanitarian-details .project-details-sheet-inner,
#education-details .project-details-sheet-inner,
#social-details .project-details-sheet-inner {
    position: relative;

    height: min(76vh, 760px);
    max-height: 760px;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 28px;

    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scroll-behavior: smooth;

    scrollbar-width: thin;
    scrollbar-color:
        #2d7d3c
        rgba(45, 125, 60, 0.10);
}

#military-details .project-details-sheet-inner::-webkit-scrollbar,
#humanitarian-details .project-details-sheet-inner::-webkit-scrollbar,
#education-details .project-details-sheet-inner::-webkit-scrollbar,
#social-details .project-details-sheet-inner::-webkit-scrollbar-track {
    width: 9px;
}

#military-details .project-details-sheet-inner::-webkit-scrollbar-track,
#humanitarian-details .project-details-sheet-inner::-webkit-scrollbar-track,
#education-details .project-details-sheet-inner::-webkit-scrollbar-track,
#social-details .project-details-sheet-inner::-webkit-scrollbar-track {
    margin: 24px 0;

    background:
        rgba(45, 125, 60, 0.08);

    border-radius: 999px;
}

#military-details .project-details-sheet-inner::-webkit-scrollbar-thumb,
#humanitarian-details .project-details-sheet-inner::-webkit-scrollbar-thumb,
#education-details .project-details-sheet-inner::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    background:
        linear-gradient(
            180deg,
            #398c47,
            #1f652f
        );

    border-radius: 999px;

    border:
        2px solid
        rgba(245, 243, 235, 0.9);
}


/* зміни ширини і висоти */
#military-details .project-details-sheet-inner,
#humanitarian-details .project-details-sheet-inner,
#education-details .project-details-sheet-inner,
#social-details .project-details-sheet-inner {
    position: relative;

    height: min(62vh, 620px);
    max-height: 620px;

    overflow-y: auto;
    overflow-x: hidden;

    padding-right: 24px;

    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scroll-behavior: smooth;

    scrollbar-width: thin;
    scrollbar-color:
        #14510e
        rgba(45, 125, 60, 0.10);
}


@media (max-height: 800px) and (min-width: 769px) {

    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {
        height: 520px;
        max-height: 520px;
    }

}

@media (max-width: 768px) {

    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {
        height: auto;
        max-height: none;

        overflow: visible;

        padding-right: 0;

        scrollbar-width: auto;
    }

}

/* =========================================================
   PROJECT DETAILS — КОМПАКТНІШІ SCROLL-БЛОКИ
========================================================= */

@media (min-width: 769px) {

    #military-details,
    #humanitarian-details,
    #education-details,
    #social-details {
        width: 88%;
        max-width: 1380px;

        margin-left: auto;
        margin-right: auto;
    }


    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {

        height: min(58vh, 570px);
        max-height: 570px;

        /* трохи компактніше всередині */
        padding-left: clamp(42px, 5vw, 76px);
        padding-right: clamp(38px, 4vw, 64px);

        border-radius: 34px;
    }

}


@media (min-width: 769px) {

    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {
        margin-top: 55px;
        margin-bottom: 90px;
    }

}


/* правки для внутрішніх даних блоків-скролінгів */
/* =========================================================
   PROJECT DETAILS — NEW INTERNAL LAYOUT
========================================================= */

@media (min-width: 769px) {

    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {
        padding:
            48px
            clamp(44px, 5vw, 78px)
            56px;

        background:
            linear-gradient(
                135deg,
                rgba(255,255,255,.72),
                rgba(245,241,226,.96)
            );

        box-shadow:
            0 20px 60px rgba(18, 60, 29, 0.10);

        border:
            1px solid rgba(32, 93, 45, 0.08);
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .project-details-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 40px;

        align-items: start;

        margin-bottom: 52px;
        padding-bottom: 32px;

        border-bottom:
            1px solid rgba(30, 92, 43, 0.16);
    }


    .project-details-header-text {
        max-width: 720px;
    }


    .project-details-script {
        margin-bottom: 10px;

        font-size: 17px;
        line-height: 1.2;

        color: #2c7839;
    }


    .project-details-header .section-label {
        margin-bottom: 14px;

        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;

        color: rgba(29, 55, 34, .62);
    }


    .project-details-header h2 {
        max-width: 13ch;

        margin: 0 0 18px;

        font-size:
            clamp(36px, 4vw, 58px);

        line-height: .98;

        letter-spacing: -.035em;

        color: #18271c;
    }


    .project-details-header-text > p:last-child {
        max-width: 52ch;

        margin: 0;

        font-size: 15px;
        line-height: 1.65;

        color: rgba(30, 44, 33, .72);
    }


    .project-details-header-number {
        font-family: Georgia, serif;

        font-size:
            clamp(62px, 7vw, 100px);

        line-height: .8;

        color:
            rgba(42, 119, 58, .13);
    }


    /* =====================================================
       STORY
    ===================================================== */

    .project-story {
        display: grid;

        grid-template-columns:
            minmax(280px, .82fr)
            minmax(420px, 1.18fr);

        gap:
            clamp(38px, 5vw, 76px);

        align-items: center;

        margin:
            0
            0
            64px;
    }


    .project-story-reverse {
        grid-template-columns:
            minmax(420px, 1.18fr)
            minmax(280px, .82fr);
    }


    .project-story-reverse .project-story-content {
        order: 2;
    }


    .project-story-reverse .project-story-photo {
        order: 1;
    }


    .project-story-content {
        max-width: 520px;
    }


    .project-story-content time {
        display: inline-block;

        margin-bottom: 15px;

        font-size: 11px;
        letter-spacing: .13em;
        text-transform: uppercase;

        color: #347b42;
    }


    .project-story-content h3 {
        margin:
            0
            0
            18px;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            clamp(26px, 2.2vw, 38px);

        line-height: 1.06;

        color: #1e281f;
    }


    .project-story-content p {
        margin:
            0
            0
            13px;

        font-size: 14px;
        line-height: 1.7;

        color:
            rgba(26, 37, 28, .74);
    }


    .project-story-content blockquote {
        margin:
            24px
            0
            0;

        padding:
            18px
            22px;

        border-left:
            3px solid #348040;

        background:
            rgba(54, 128, 67, .07);

        font-family:
            Georgia,
            serif;

        font-size: 16px;
        line-height: 1.5;

        color: #294a30;
    }


    /* =====================================================
       STORY PHOTO
    ===================================================== */

    .project-story-photo {
        margin: 0;
    }


    .project-story-photo img {
        display: block;

        width: 100%;
        height:
            clamp(300px, 31vw, 455px);

        object-fit: cover;

        border-radius: 24px;

        box-shadow:
            0 16px 40px
            rgba(24, 55, 30, .14);
    }


    .project-story-photo figcaption {
        margin-top: 10px;

        font-size: 11px;
        font-style: italic;

        color:
            rgba(30, 50, 34, .55);
    }


    /* =====================================================
       SMALL GALLERY
    ===================================================== */

    .project-details-gallery {
        display: grid;

        grid-template-columns:
            1fr
            1fr
            .72fr;

        gap: 18px;

        align-items: stretch;

        margin:
            20px
            0
            70px;
    }


    .project-gallery-photo {
        margin: 0;
    }


    .project-gallery-photo img {
        display: block;

        width: 100%;
        height: 230px;

        object-fit: cover;

        border-radius: 20px;
    }


    .project-gallery-photo figcaption {
        margin-top: 9px;

        font-size: 10px;
        line-height: 1.4;

        color:
            rgba(26, 43, 30, .58);
    }


    .project-details-note {
        display: flex;

        align-items: center;
        justify-content: center;

        min-height: 230px;

        padding: 26px;

        border-radius: 20px;

        background: #327e40;

        font-family:
            Georgia,
            serif;

        font-size: 17px;
        line-height: 1.45;

        text-align: center;

        color: #fff;
    }


    /* =====================================================
       IMPACT
    ===================================================== */

    .project-details-impact {
        margin:
            0
            0
            70px;

        padding:
            42px
            0;

        border-top:
            1px solid rgba(35, 96, 48, .15);

        border-bottom:
            1px solid rgba(35, 96, 48, .15);
    }


    .project-details-impact-heading {
        margin-bottom: 30px;
    }


    .project-details-impact-heading h3 {
        margin: 6px 0 0;

        font-family:
            Georgia,
            serif;

        font-size:
            clamp(28px, 3vw, 42px);

        color: #1e2d21;
    }


    .project-details-impact-grid {
        display: grid;

        grid-template-columns:
            repeat(4, 1fr);

        gap: 14px;
    }


    .project-details-impact-grid > div {
        min-height: 120px;

        padding:
            24px
            20px;

        border-radius: 18px;

        background:
            rgba(47, 122, 62, .07);

        border:
            1px solid rgba(47, 122, 62, .10);
    }


    .project-details-impact-grid strong {
        display: block;

        margin-bottom: 8px;

        font-family:
            Georgia,
            serif;

        font-size: 31px;

        color: #29753a;
    }


    .project-details-impact-grid span {
        display: block;

        max-width: 16ch;

        font-size: 11px;
        line-height: 1.4;

        color:
            rgba(27, 44, 31, .65);
    }


    /* =====================================================
       PHOTO WALL
    ===================================================== */

    .project-details-photo-wall {
        display: grid;

        grid-template-columns:
            1.25fr
            .8fr
            .95fr;

        gap: 14px;

        margin-bottom: 70px;
    }


    .project-details-photo-wall figure {
        margin: 0;
    }


    .project-details-photo-wall img {
        display: block;

        width: 100%;
        height: 300px;

        object-fit: cover;

        border-radius: 20px;
    }


    .project-details-photo-wall figure:nth-child(2) img {
        height: 250px;

        margin-top: 50px;
    }


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

    .project-details-footer {
        display: flex;

        justify-content: space-between;
        align-items: end;

        gap: 40px;

        padding-top: 34px;

        border-top:
            1px solid rgba(34, 93, 45, .17);
    }


    .project-details-footer h3 {
        max-width: 17ch;

        margin:
            8px
            0
            0;

        font-family:
            Georgia,
            serif;

        font-size:
            clamp(27px, 2.7vw, 40px);

        line-height: 1.04;

        color: #1d2d21;
    }


    .project-details-footer-actions {
        flex-shrink: 0;
    }

}



/* =========================================================
   SCROLL PROJECT — DECORATIVE FRAME
========================================================= */

@media (min-width: 769px) {

    #military-details,
    #humanitarian-details,
    #education-details,
    #social-details {
        position: relative;
    }


    #military-details::before,
    #humanitarian-details::before,
    #education-details::before,
    #social-details::before {
        content: "";

        position: absolute;

        inset: -18px;

        border:
            1px solid
            rgba(255, 255, 255, .42);

        border-radius: 42px;

        pointer-events: none;

        z-index: 0;
    }


    #military-details .project-details-sheet-inner,
    #humanitarian-details .project-details-sheet-inner,
    #education-details .project-details-sheet-inner,
    #social-details .project-details-sheet-inner {
        position: relative;
        z-index: 1;
    }

}



/* редагуємо скрол */

@media (min-width: 769px) {

    #military-details::after,
    #humanitarian-details::after,
    #education-details::after,
    #social-details::after {
        content: "ГОРТАЙ  ↓";

        position: absolute;

        right: -7px;
        top: 50%;

        transform:
            translateY(-50%)
            rotate(90deg);

        z-index: 5;

        padding:
            7px
            13px;

        background: #f4f1e5;

        border:
            1px solid
            rgba(38, 111, 51, .18);

        border-radius: 999px;

        box-shadow:
            0 6px 18px
            rgba(15, 63, 26, .12);

        font-size: 9px;
        font-weight: 700;

        letter-spacing: .16em;

        color: #276f36;

        pointer-events: none;
    }

}


/* приклеюємо бігункц */
@media (min-width: 769px) {

    .projects-filter-section {
        position: sticky;
        top: 92px;

        z-index: 100;

        padding: 8px 0;

        background: transparent;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        box-shadow: none;
    }

    .project-filters {
        background: rgba(255, 255, 255, 0.96);

        border: 1px solid rgba(28, 82, 38, 0.65);

        box-shadow:
            0 10px 28px rgba(31, 76, 39, 0.08);

        border-radius: 999px;
    }

}


 /* =========================================================
   OFFSET ДЛЯ ПЕРЕХОДІВ ПО ЯКОРЯХ
========================================================= */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 190px;
}

#military-details,
#humanitarian-details,
#education-details,
#social-details {
    scroll-margin-top: 190px !important;
}




/* =========================================================
   PROJECT FILTER — ХОВАЄМО НЕАКТИВНІ SCROLL-БЛОКИ
========================================================= */

.project-details-sheet.is-filter-hidden {
    display: none !important;
}



/* міняємо назву наша єдність */
/* =========================================================
   PROJECT SUMMARY — TITLE REDESIGN
========================================================= */

.projects-summary-title {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    justify-content: center;

    max-width: 420px;

    padding-left: 42px;
}


/* велика декоративна лапка */

.projects-summary-title::before {
    content: "“";

    position: absolute;

    top: -45px;
    left: 0;

    height: auto;

    margin: 0;

    font-family: Georgia, serif;

    font-size: 105px;
    line-height: 1;

    font-weight: 400;

    color: rgba(255, 255, 255, .32);
}


/* рукописне "Наша" */

.projects-summary-title p {
    position: relative;

    margin:
        0
        0
        -5px
        42px;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: clamp(50px, 4.6vw, 80px) !important;

    line-height: 1;

    font-weight: 400;

    transform: rotate(-3deg);

    color: rgba(255, 255, 255, .78);
}


/* ЄДНІСТЬ */

.projects-summary-title h2 {
    position: relative;

    max-width: none;

    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 4.4vw, 72px);

    line-height: .92;

    letter-spacing: -.045em;

    font-weight: 700;

    color: #fff;
}



/* =========================================
   PROJECT STORY — READ MORE
========================================= */

.project-story-more {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 22px;
    padding-bottom: 5px;

    color: #286f38;
    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(40, 111, 56, .35);

    transition:
        gap .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.project-story-more span {
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}

.project-story-more:hover {
    gap: 17px;
    color: #174f27;
    border-color: #174f27;
}

.project-story-more:hover span {
    transform: translateX(4px);
}




/* =========================================================
   PROJECT STORIES FEED
========================================================= */

.project-stories-feed {
    margin-top: 52px;
    padding-top: 32px;

    border-top: 1px solid rgba(39, 111, 54, .16);
}


/* заголовок */

.project-stories-feed-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 25px;
}

.project-stories-feed-heading .project-details-script {
    margin: 0;

    font-size: 25px;
}

.project-stories-feed-heading > span {
    color: rgba(39, 111, 54, .65);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .17em;
    text-transform: uppercase;
}


/* =========================================
   СІТКА
========================================= */

.project-stories-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 28px;
}


/* =========================================
   КАРТКА
========================================= */

.project-story-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    color: inherit;
    text-decoration: none;

    background:
        rgba(247, 248, 235, .78);

    border:
        1px solid rgba(39, 111, 54, .13);

    border-radius: 24px;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* легка scrapbook-різниця */

.project-story-card:nth-child(1) {
    transform: rotate(-.25deg);
}

.project-story-card:nth-child(2) {
    transform: rotate(.3deg);
}


/* =========================================
   ФОТО
========================================= */

.project-story-card-photo {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    margin: 0;

    overflow: hidden;
}


.project-story-card-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    box-shadow:
        inset 0 -35px 45px rgba(18, 59, 27, .06);

    pointer-events: none;
}


.project-story-card-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .5s ease;
}


/* =========================================
   ТЕКСТ
========================================= */

.project-story-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;

    padding:
        23px
        25px
        25px;
}


.project-story-card time {
    display: block;

    margin-bottom: 11px;

    color: #2d7d3c;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .15em;
    text-transform: uppercase;
}


.project-story-card h3 {
    margin:
        0
        0
        13px;

    color: #17261a;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(21px, 1.65vw, 28px);

    line-height: 1.06;

    letter-spacing: -.025em;
}


.project-story-card p {
    margin:
        0
        0
        21px;

    color:
        rgba(23, 38, 26, .70);

    font-size: 13px;
    line-height: 1.55;
}


/* =========================================
   ЧИТАТИ
========================================= */

.project-story-card-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: auto;

    padding-bottom: 4px;

    color: #286f38;

    border-bottom:
        1px solid rgba(40, 111, 56, .34);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .14em;
    text-transform: uppercase;
}


.project-story-card-link b {
    font-family: inherit;

    font-size: 16px;
    font-weight: 400;

    transition:
        transform .25s ease;
}


/* =========================================
   HOVER
========================================= */

.project-story-card:hover {
    border-color:
        rgba(39, 111, 54, .28);

    box-shadow:
        0 17px 35px
        rgba(27, 79, 37, .10);
}


.project-story-card:nth-child(1):hover {
    transform:
        rotate(-.25deg)
        translateY(-5px);
}


.project-story-card:nth-child(2):hover {
    transform:
        rotate(.3deg)
        translateY(-5px);
}


.project-story-card:hover
.project-story-card-photo img {
    transform: scale(1.025);
}


.project-story-card:hover
.project-story-card-link b {
    transform:
        translateX(5px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .project-stories-feed {
        margin-top: 35px;
        padding-top: 25px;
    }


    .project-stories-feed-heading {
        align-items: flex-start;
        flex-direction: column;

        gap: 6px;

        margin-bottom: 20px;
    }


    .project-stories-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .project-story-card,
    .project-story-card:nth-child(1),
    .project-story-card:nth-child(2),
    .project-story-card:nth-child(1):hover,
    .project-story-card:nth-child(2):hover {
        transform: none;
    }


    .project-story-card-body {
        padding:
            20px
            20px
            22px;
    }


    .project-story-card h3 {
        font-size: 23px;
    }

}