/* =========================================================
   REPORTS PAGE
========================================================= */

:root {
    --reports-green: #1f6a35;
    --reports-green-dark: #103d22;
    --reports-green-deep: #0b321b;

    --reports-cream: #f6f1e6;
    --reports-paper: #fffdf8;
    --reports-paper-2: #f1ecdf;

    --reports-text: #222521;
    --reports-muted: #686d66;

    --reports-border: rgba(45, 104, 53, 0.13);

    --reports-shadow:
        0 1.5rem 4rem
        rgba(37, 47, 34, 0.09);
}


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

.reports-page {
    position: relative;
    overflow: hidden;

    color: var(--reports-text);

    background:
        linear-gradient(
            180deg,
            #faf8f2 0%,
            #f4f0e7 50%,
            #faf8f2 100%
        );
}


.reports-page img {
    max-width: 100%;
}


.reports-page figure {
    margin: 0;
}


.reports-page h1,
.reports-page h2,
.reports-page h3 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =========================================================
   COMMON LABELS
========================================================= */

.reports-page .section-label {
    margin:
        0
        0
        0.8rem;

    color: #2d773b;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.reports-script,
.reports-intro-script {
    margin:
        0
        0
        1rem;

    color: #2b7138;

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

    font-size:
        clamp(0.95rem, 3.25vw, 5.3rem);

    line-height: 1.45;
}


/* =========================================================
   INTRO
========================================================= */

.reports-intro {
    position: relative;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 13% 20%,
            rgba(73, 132, 65, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 87% 76%,
            rgba(204, 220, 112, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f5f0e4 0%,
            #fffdf8 53%,
            #eef3df 100%
        );
}


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

    position: absolute;

    width: 35rem;
    height: 25rem;

    right: -10rem;
    top: -10rem;

    border-radius: 50%;

    background:
        rgba(117, 165, 92, 0.08);

    filter: blur(0.2rem);
}


.reports-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(20rem, 0.72fr)
        minmax(32rem, 1.28fr);

    align-items: center;

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


.reports-intro-content {
    position: relative;
    z-index: 3;
}


.reports-intro-title {
    max-width: 9ch;

    margin: 0;

    color: #20231f;

    font-size:
        clamp(4rem, 5.3vw, 7rem);

    line-height: 0.88;

    letter-spacing: -0.065em;
}


.reports-intro-title span {
    display: block;

    color: #226f37;
}


.reports-intro-description {
    max-width: 60ch;

    margin:
        2rem
        0
        0;

    color: #62675f;

    font-size:
        clamp(0.95rem, 1.15vw, 1.08rem);

    line-height: 1.8;
}


.reports-intro-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 1.25rem;

    margin-top: 2.3rem;
}


.reports-intro-link {
    color: #276e36;

    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(39, 110, 54, 0.25);

    padding-bottom: 0.2rem;

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


.reports-intro-link:hover {
    transform: translateX(0.25rem);

    color: #16451f;
    border-color: #16451f;
}


/* INTRO VISUAL */

.reports-intro-visual {
    position: relative;

    min-height:
        clamp(31rem, 40vw, 40rem);
}


.reports-intro-photo {
    position: absolute;

    background: #fff;

    box-shadow:
        0 1.7rem 4.5rem
        rgba(35, 45, 33, 0.16);
}


.reports-intro-photo::before {
    content: "";

    position: absolute;

    width: 4.7rem;
    height: 1rem;

    top: -0.55rem;
    left: 50%;

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

    background:
        rgba(224, 205, 165, 0.75);
}


.reports-intro-photo-main {
    width: 78%;

    top: 0;
    right: 0;

    padding:
        0.6rem
        0.6rem
        3.4rem;

    transform: rotate(1.2deg);
}


.reports-intro-photo-main img {
    width: 100%;

    aspect-ratio: 16 / 10;

    display: block;

    object-fit: cover;
}


.reports-intro-photo-small {
    width:
        clamp(10rem, 25vw, 20rem);

    right: 80%;
    bottom: 4%;

    padding:
        0.5rem
        0.5rem
        3rem;

    z-index: 4;

    transform: rotate(-4deg);
}


.reports-intro-photo-small img {
    width: 100%;

    aspect-ratio: 4 / 5;

    display: block;

    object-fit: cover;
}


.reports-intro-photo figcaption {
    position: absolute;

    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.75rem;

    color: #2c6137;

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

    font-size: 1.45rem;

    line-height: 1.35;
}


.reports-intro-note {
    position: absolute;

    z-index: 5;

    left: 71%;
    bottom: 6%;

    width:
        clamp(10.5rem, 15vw, 13.5rem);

    padding:
        1.2rem
        1.3rem;

    color: #315b39;

    background:
        linear-gradient(
            145deg,
            #eee0bd,
            #fff5dd
        );

    box-shadow:
        0 1rem 2.7rem
        rgba(50, 45, 35, 0.13);

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

    font-size:
        clamp(0.78rem, 1.25vw, 3.92rem);

    line-height: 1.55;

    transform: rotate(3deg);
}


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

    position: absolute;

    width: 3.8rem;
    height: 0.85rem;

    top: -0.45rem;
    left: 50%;

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

    background:
        rgba(223, 203, 163, 0.78);
}

/* =========================================================
   MAIN FEED
========================================================= */

.reports-feed {
    padding:
        clamp(2rem, 3vw, 6rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f8f5ee,
            #f3eee4
        );
}


.reports-feed-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(18rem, 0.62fr);

    align-items: start;

    gap:
        clamp(2.5rem, 4.5vw, 4.5rem);
}


.reports-stream {
    min-width: 0;
}


.reports-stream-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 2rem;

    margin-bottom:
        clamp(3rem, 4vw, 5rem);
}


.reports-stream-heading h2 {
    max-width: 30ch;

    margin: 0;

    font-size:
        clamp(3rem, 4.7vw, 5.1rem);

    line-height: 0.93;

    letter-spacing: -0.05em;
}


.reports-stream-heading > p {
    max-width: 34ch;

    margin: 0;

    color: #676b64;

    line-height: 1.75;
}


/* =========================================================
   POST COMMON
========================================================= */

.report-post {
    position: relative;
}


.report-post figure {
    overflow: hidden;
}


.report-post img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}


.report-post:hover img {
    transform: scale(1.025);
}


.report-post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.55rem
        0.9rem;

    margin-bottom: 1rem;
}


.report-post-meta time,
.report-post-meta span {
    color: #33723e;

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.report-post-meta time {
    color: #777b74;
}


.report-post a,
.report-news-card a,
.reports-mini-grid a {
    color: #286f37;

    font-weight: 700;

    text-decoration: none;

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


.report-post a:hover,
.report-news-card a:hover,
.reports-mini-grid a:hover {
    color: #174821;
}


/* =========================================================
   FEATURED
========================================================= */

.report-post-featured {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(18rem, 0.8fr);

    overflow: hidden;

    margin-bottom: 2rem;

    background: #fff;

    border:
        1px solid
        var(--reports-border);

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

    box-shadow:
        var(--reports-shadow);
}


.report-post-featured-image {
    position: relative;

    min-height:
        clamp(26rem, 36vw, 35rem);
}


.report-post-photo-label {
    position: absolute;

    top: 1rem;
    left: 1rem;

    padding:
        0.45rem
        0.75rem;

    color: white;

    background:
        rgba(18, 66, 33, 0.88);

    border-radius: 999px;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;

    backdrop-filter: blur(6px);
}


.report-post-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(2rem, 3.5vw, 3.7rem);
}


.report-post-featured-content h3 {
    margin: 0;

    font-size:
        clamp(2rem, 3vw, 3.25rem);

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.report-post-featured-content p {
    margin:
        1.3rem
        0
        0;

    color: #636861;

    line-height: 1.72;
}


.report-post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    margin-top: 2rem;
}


.report-post-footer span {
    color: #858982;

    font-size: 0.7rem;
}


/* =========================================================
   TWO COLUMN
========================================================= */

.reports-two-column {
    display: grid;

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

    gap:
        1.4rem;

    margin-bottom:
        clamp(4rem, 7vw, 7rem);
}


.report-post-medium {
    overflow: hidden;

    background: #fff;

    border:
        1px solid
        var(--reports-border);

    border-radius: 1.4rem;

    box-shadow:
        0 1rem 2.7rem
        rgba(41, 48, 36, 0.06);
}


.report-post-medium figure {
    aspect-ratio: 16 / 11;
}


.report-post-body {
    padding:
        clamp(1.35rem, 2vw, 2rem);
}


.report-post-body h3 {
    margin: 0;

    font-size:
        clamp(1.55rem, 2vw, 2rem);

    line-height: 1.05;

    letter-spacing: -0.035em;
}


.report-post-body p {
    margin:
        1rem
        0
        0;

    color: #686c65;

    line-height: 1.68;
}


.report-post-body > a {
    display: inline-flex;

    margin-top: 1.2rem;
}


/* =========================================================
   EDITORIAL GRID
========================================================= */

.reports-editorial-grid {
    display: grid;

    grid-template-columns:
        minmax(17rem, 0.86fr)
        minmax(0, 1.14fr);

    gap: 1.4rem;
}


.report-post-tall {
    overflow: hidden;

    background: #fff;

    border:
        1px solid
        var(--reports-border);

    border-radius: 1.4rem;
}


.report-post-tall figure {
    aspect-ratio: 4 / 5;
}


.reports-editorial-stack {
    display: grid;

    gap: 1.4rem;
}


.report-post-horizontal {
    display: grid;

    grid-template-columns:
        minmax(11rem, 0.85fr)
        minmax(0, 1.15fr);

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        var(--reports-border);

    border-radius: 1.4rem;
}


.report-post-horizontal figure {
    min-height: 15rem;
}


/* =========================================================
   FACEBOOK SIDEBAR
========================================================= */

.reports-sidebar {
    min-width: 0;
}


.reports-sidebar-sticky {
    position: sticky;

    top: 7.5rem;
}


.reports-sidebar-heading {
    margin-bottom: 1.4rem;
}


.reports-sidebar-heading h2 {
    max-width: 8ch;

    margin: 0;

    font-size:
        clamp(2.5rem, 3.4vw, 3.8rem);

    line-height: 0.95;

    letter-spacing: -0.045em;
}


.reports-sidebar-heading > p:last-child {
    margin:
        1rem
        0
        0;

    color: #676b64;

    line-height: 1.7;
}


.facebook-widget {
    overflow: hidden;

    padding: 0.55rem;

    background: white;

    border:
        1px solid
        var(--reports-border);

    border-radius: 1.35rem;

    box-shadow:
        var(--reports-shadow);
}


.facebook-widget .fb-page,
.facebook-widget iframe {
    width: 100% !important;
    max-width: 100% !important;
}


.reports-facebook-link {
    display: flex;
    justify-content: center;

    margin-top: 1rem;

    padding:
        0.9rem
        1rem;

    color: white;

    background:
        linear-gradient(
            135deg,
            #1d6630,
            #2f8040
        );

    border-radius: 999px;

    font-weight: 700;

    text-decoration: none;
}


.reports-sidebar-note {
    display: flex;
    align-items: center;

    gap: 0.7rem;

    margin-top: 1rem;

    padding:
        1rem;

    color: #315b38;

    background:
        linear-gradient(
            135deg,
            #eee3c8,
            #faf4e2
        );

    border-radius: 1rem;

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

    transform: rotate(-1deg);
}


.reports-sidebar-note span {
    font-size: 1.4rem;
}


/* =========================================================
   FULL WIDTH PHOTO STORY
========================================================= */
.report-photo-story--full {
    position: relative;

    width: calc(100% - 3.5rem);
    max-width: 100%;

    margin:
        clamp(4rem, 7vw, 7rem)
        auto
        0;

    padding:
        clamp(2.8rem, 5vw, 5rem);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(120, 165, 88, 0.10),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #eee9dc 0%,
            #faf7ef 50%,
            #edf2e6 100%
        );

    border:
        1px solid
        rgba(44, 103, 51, 0.12);

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

    box-shadow:
        0 2rem 5rem
        rgba(37, 48, 34, 0.08);
}


/* =========================================================
   PHOTO STORY GRID
========================================================= */

.report-full-gallery {
    display: grid;

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

    gap:
        clamp(0.8rem, 1.4vw, 1.3rem);
}


.report-gallery-item {
    grid-column: span 3;

    position: relative;

    overflow: hidden;

    padding:
        0.4rem
        0.4rem
        0;

    background: #fff;

    border:
        1px solid
        rgba(36, 72, 41, 0.09);

    border-radius: 1rem;

    box-shadow:
        0 0.9rem 2.2rem
        rgba(38, 48, 34, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.report-gallery-item:hover {
    transform: translateY(-0.3rem);

    box-shadow:
        0 1.5rem 3rem
        rgba(38, 48, 34, 0.11);
}


.report-gallery-item:nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
}


.report-gallery-item:nth-child(2) {
    grid-column: span 3;
}


.report-gallery-item:nth-child(3) {
    grid-column: span 4;
}


.report-gallery-item:nth-child(4) {
    grid-column: span 4;
}


.report-gallery-item:nth-child(5) {
    grid-column: span 3;
}


.report-gallery-item:nth-child(6) {
    grid-column: span 5;
}


.report-gallery-item:nth-child(7) {
    grid-column: span 3;
}


.report-gallery-item:nth-child(8) {
    grid-column: span 4;
}


.report-gallery-item:nth-child(9) {
    grid-column: span 5;
}


.report-gallery-item img {
    width: 100%;

    height:
        clamp(12rem, 17vw, 17rem);

    display: block;

    object-fit: cover;

    border-radius: 0.72rem;

    transition:
        transform 0.5s ease;
}


.report-gallery-item:hover img {
    transform: scale(1.025);
}


.report-gallery-item:nth-child(1) img {
    height: 100%;

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


.report-gallery-item figcaption {
    display: grid;

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

    gap: 0.9rem;

    padding:
        0.9rem
        0.85rem
        1rem;
}


.report-gallery-item figcaption > span {
    color:
        rgba(43, 113, 54, 0.32);

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

    font-size: 1.45rem;
    font-weight: 700;
}


.report-gallery-item figcaption strong {
    display: block;

    color: #29342b;

    font-size: 0.84rem;
}


.report-gallery-item figcaption p {
    margin:
        0.25rem
        0
        0;

    color: #72766e;

    font-size: 0.7rem;

    line-height: 1.45;
}


/* =========================================================
   REELS
========================================================= */

.reports-reels {
    position: relative;

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

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8f5ed,
            #f1eee5
        );
}


.reports-reels-heading {
    width:
        min(92%, 92rem);

    margin:
        0
        auto
        clamp(3rem, 5vw, 4.5rem);

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

    gap: 3rem;
}


.reports-reels-eyebrow {
    display: block;

    margin-bottom: 0.7rem;

    color: #2d773b;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.reports-reels-heading h2 {
    margin: 0;

    font-size:
        clamp(4rem, 6vw, 7.2rem);

    line-height: 0.8;

    letter-spacing: -0.065em;
}


.reports-reels-heading p {
    max-width: 24rem;

    margin: 0;

    color: #686b65;

    line-height: 1.7;
}


.reports-reels-window {
    width: 100%;

    overflow: hidden;
}


.reports-reels-track {
    display: flex;
    align-items: center;

    width: max-content;

    gap:
        clamp(1rem, 1.6vw, 1.5rem);

    padding:
        1.8rem
        0;

    animation:
        reportsReelsMove
        54s
        linear
        infinite;
}


.reports-reels-track:hover {
    animation-play-state: paused;
}


@keyframes reportsReelsMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-40%);
    }

}


.reports-reel {
    position: relative;

    flex:
        0 0
        clamp(12.5rem, 16vw, 17rem);

    aspect-ratio: 9 / 14;

    overflow: hidden;

    border-radius: 1.45rem;

    background:
        linear-gradient(
            180deg,
            #143e23,
            #0c2f19
        );

    box-shadow:
        0 1rem 2.7rem
        rgba(25, 49, 30, 0.12);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.reports-reel:nth-child(even) {
    transform: translateY(1.5rem);
}


.reports-reel:nth-child(odd) {
    transform: translateY(-0.7rem);
}


.reports-reel:hover {
    z-index: 5;

    transform:
        translateY(-0.5rem)
        scale(1.04);

    box-shadow:
        0 2rem 4rem
        rgba(25, 49, 30, 0.2);
}


.reports-reel video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.reports-reel::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(6, 25, 12, 0.05) 28%,
            rgba(5, 23, 11, 0.2) 58%,
            rgba(4, 19, 9, 0.9) 100%
        );

    pointer-events: none;
}


.reports-reel-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 1.2rem;

    color: white;

    pointer-events: none;
}


.reports-reel-overlay > span {
    width: 2.2rem;
    height: 2.2rem;

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

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

    border-radius: 50%;

    background:
        rgba(8, 30, 15, 0.18);

    backdrop-filter: blur(8px);

    font-size: 0.62rem;
}


.reports-reel-overlay small {
    display: block;

    margin-bottom: 0.45rem;

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

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.reports-reel-overlay h3 {
    max-width: 10ch;

    margin: 0;

    color: white;

    font-size:
        clamp(1.2rem, 1.55vw, 1.65rem);

    line-height: 1.02;
}


/* =========================================================
   MOVING POSTS
========================================================= */

.reports-moving-posts {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f3eee5,
            #faf7f0
        );
}


.reports-moving-posts-heading {
    width:
        min(92%, 92rem);

    margin:
        0
        auto
        3rem;

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

    gap: 3rem;
}


.reports-moving-posts-heading h2 {
    max-width: 40ch;

    margin: 0;

    font-size:
        clamp(3rem, 4.6vw, 5rem);

    line-height: 0.92;

    letter-spacing: -0.05em;
}


.reports-moving-posts-heading > p {
    max-width: 25rem;

    margin: 0;

    color: #6b6f68;

    line-height: 1.7;
}


.reports-moving-posts-window {
    width: 100%;

    overflow: hidden;
}


.reports-moving-posts-track {
    display: flex;

    width: max-content;

    gap: 1.2rem;

    animation:
        reportsPostsMove
        62s
        linear
        infinite;
}


.reports-moving-posts-track:hover {
    animation-play-state: paused;
}


@keyframes reportsPostsMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-45%);
    }

}


.reports-moving-post {
    flex:
        0 0
        clamp(16rem, 21vw, 22rem);
}


.reports-moving-post figure {
    padding: 0.4rem;

    background: #fff;

    border:
        1px solid
        rgba(42, 84, 47, 0.08);

    border-radius: 1.1rem;

    box-shadow:
        0 0.9rem 2.2rem
        rgba(36, 47, 34, 0.07);
}


.reports-moving-post img {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: block;

    object-fit: cover;

    border-radius: 0.8rem;
}


.reports-moving-post-caption {
    padding:
        0.9rem
        0.3rem;
}


.reports-moving-post-caption span {
    color: #2f773c;

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.reports-moving-post-caption strong {
    display: block;

    max-width: 18ch;

    margin-top: 0.45rem;

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

    font-size:
        clamp(1.2rem, 1.5vw, 1.45rem);

    line-height: 1.08;
}


.reports-moving-post-caption p {
    margin:
        0.5rem
        0
        0;

    color: #787b74;

    font-size: 0.7rem;
}


/* =========================================================
   WIDE QUOTE
========================================================= */

.reports-quote-break--wide {
    position: relative;

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

    margin:
        clamp(4rem, 6vw, 6rem)
        0;

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

    text-align: center;

    background:
        linear-gradient(
            90deg,
            #edf2e6 0%,
            #faf7ed 50%,
            #edf2e6 100%
        );

    border-top:
        1px solid
        rgba(46, 111, 53, 0.11);

    border-bottom:
        1px solid
        rgba(46, 111, 53, 0.11);
}

.reports-quote-break--wide blockquote {
    max-width: 34ch;

    margin:
        0
        auto;

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

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

    line-height: 1.12;

    letter-spacing: -0.03em;
}


.reports-quote-break--wide blockquote {
    max-width: 80ch;

    margin:
        0
        auto;

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

    font-size:
        clamp(2rem, 4vw, 5rem);

    line-height: 1.12;

    letter-spacing: -0.03em;
}


/* =========================================================
   WIDE HUMANITARIAN STORY
========================================================= */

.report-highlight--wide {
    position: relative;

    width: 100vw;
    max-width: none;

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

    margin-left:
        calc(50% - 50vw);

    display: grid;

    grid-template-columns:
        minmax(22rem, 0.62fr)
        minmax(0, 1.38fr);

    overflow: hidden;

    color: white;

    background:
        radial-gradient(
            circle at 80% 18%,
            rgba(166, 206, 95, 0.15),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #0e4022,
            #17602f 56%,
            #0f3a1f
        );

    border-radius: 0;

    box-shadow:
        0 2rem 5rem
        rgba(20, 58, 29, 0.18);
}

.report-highlight--wide {
    position: relative;

    width: 100vw;
    max-width: none;

    margin: clamp(4rem, 6vw, 6rem) 0;
    margin-left: calc(50% - 50vw);

    display: grid;
    grid-template-columns:
        minmax(25rem, 0.62fr)
        minmax(0, 1.38fr);

    /* ОСЬ ГОЛОВНА ЗМІНА */
    height: clamp(560px, 48vw, 680px);

    overflow: hidden;

    color: white;

    background:
        linear-gradient(
            135deg,
            #0e4022,
            #17602f
        );

    border-radius: 0;
}


.report-highlight-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(2.8rem, 5vw, 5rem);
}


.report-highlight-content .reports-script {
    color:
        rgba(229, 239, 194, 0.8);
}


.report-highlight-content .report-post-meta span,
.report-highlight-content .report-post-meta time {
    color:
        rgba(255, 255, 255, 0.62);
}


.report-highlight-content h2 {
    max-width: 8ch;

    margin: 0;

    color: white;

    font-size:
        clamp(3.1rem, 5vw, 5.8rem);

    line-height: 0.88;

    letter-spacing: -0.06em;
}


.report-highlight-content > p:not(.reports-script) {
    max-width: 35ch;

    margin:
        1.4rem
        0
        0;

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

    line-height: 1.7;
}


.report-highlight-content > a {
    display: inline-flex;

    margin-top: 1.7rem;

    color: white;

    font-weight: 700;

    text-decoration: none;
}


.report-highlight-media {
    display: grid;

    grid-template-rows:
        minmax(8rem, 1fr)
        auto;

    min-width: 0;
}


.report-highlight-main-photo {
    overflow: hidden;
}


.report-highlight-main-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* SHIPMENT CARDS */

.report-highlight-shipments {
    display: grid;

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

    gap: 0.8rem;

    padding:
        0.8rem;
}


.report-highlight-shipments article {
    overflow: hidden;

    padding: 0.4rem;

    color: #293a2c;

    background:
        #f5f1e6;

    border-radius: 1rem;
}


.report-highlight-shipments img {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: block;

    object-fit: cover;

    border-radius: 0.7rem;
}


.report-highlight-shipments span {
    display: block;

    margin:
        0.65rem
        0.4rem
        0.25rem;

    color: #4e7955;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.report-highlight-shipments strong {
    display: block;

    padding:
        0
        0.4rem
        0.6rem;

    font-size: 0.76rem;

    line-height: 1.3;
}


/* =========================================================
   NEWS SECTION
========================================================= */

.reports-news-section {
    padding:
        clamp(2rem, 2vw, 8rem)
        0;

    background:
        linear-gradient(
            180deg,
            #f7f4ed,
            #f1ece3
        );
}


.reports-news-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 3rem;

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


.reports-news-heading h2 {
    margin: 0;

    font-size:
        clamp(3rem, 4.8vw, 5.2rem);

    line-height: 0.94;

    letter-spacing: -0.05em;
}


.reports-news-heading > p {
    max-width: 31ch;

    margin: 0;

    color: #686c65;

    line-height: 1.7;
}


.reports-news-grid--large {
    display: grid;

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

    gap: 1rem;
}


.report-news-card {
    overflow: hidden;

    background: white;

    border:
        1px solid
        rgba(43, 96, 49, 0.1);

    border-radius: 1.25rem;

    box-shadow:
        0 0.8rem 2rem
        rgba(40, 47, 36, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.report-news-card:hover {
    transform: translateY(-0.25rem);

    box-shadow:
        0 1.3rem 2.7rem
        rgba(40, 47, 36, 0.09);
}


.report-news-card figure {
    overflow: hidden;

    aspect-ratio: 4 / 3;
}


.report-news-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.report-news-card:hover img {
    transform: scale(1.03);
}


.report-news-card > div {
    padding: 1.2rem;
}


.report-news-card span {
    display: block;

    margin-bottom: 0.7rem;

    color: #2e783b;

    font-size: 0.61rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.report-news-card h3 {
    margin: 0;

    font-size:
        clamp(1.25rem, 1.55vw, 1.55rem);

    line-height: 1.07;
}


.report-news-card a {
    display: inline-flex;

    margin-top: 1rem;

    font-size: 0.8rem;
}


/* =========================================================
   MINI NEWS
========================================================= */

.reports-mini-section--late {
    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    background:
        #faf8f2;
}


.reports-mini-heading {
    margin-bottom:
        clamp(2.5rem, 4vw, 4rem);
}


.reports-mini-heading h2 {
    margin: 0;

    font-size:
        clamp(3rem, 4.7vw, 5rem);

    line-height: 0.94;

    letter-spacing: -0.05em;
}


.reports-mini-grid--large {
    display: grid;

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

    border-top:
        1px solid
        rgba(47, 108, 54, 0.15);
}


.reports-mini-grid--large article {
    display: grid;

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

    align-items: center;

    gap:
        clamp(0.9rem, 1.8vw, 1.7rem);

    padding:
        1.3rem
        0;

    border-bottom:
        1px solid
        rgba(47, 108, 54, 0.15);
}


.reports-mini-grid--large article:nth-child(odd) {
    padding-right: 1.4rem;
}


.reports-mini-grid--large article:nth-child(even) {
    padding-left: 1.4rem;

    border-left:
        1px solid
        rgba(47, 108, 54, 0.15);
}


.reports-mini-grid--large article > span:first-child {
    color:
        rgba(47, 119, 58, 0.24);

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

    font-size: 2rem;
    font-weight: 700;
}


.reports-mini-grid--large time {
    color: #7a7e76;

    font-size: 0.65rem;
}


.reports-mini-grid--large h3 {
    margin: 0;

    font-size: 0.95rem;

    line-height: 1.35;
}


.reports-mini-grid--large a {
    white-space: nowrap;

    font-size: 0.75rem;
}


/* =========================================================
   FINAL
========================================================= */

.reports-final {
    padding:
        clamp(6rem, 9vw, 9rem)
        0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f2ede1,
            #fffdf8
        );
}


.reports-final-inner {
    display: grid;

    grid-template-columns:
        minmax(18rem, 0.72fr)
        minmax(32rem, 1.28fr);

    align-items: center;

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


.reports-final-content h2 {
    max-width: 10ch;

    margin: 0;

    font-size:
        clamp(3.3rem, 5vw, 5.4rem);

    line-height: 0.92;

    letter-spacing: -0.055em;
}


.reports-final-content > p:not(.section-label) {
    max-width: 40ch;

    margin:
        1.5rem
        0
        2rem;

    color: #666a63;

    line-height: 1.75;
}


.reports-final-gallery {
    position: relative;

    min-height:
        clamp(27rem, 35vw, 35rem);
}


.reports-final-gallery figure {
    position: absolute;

    padding: 0.4rem;

    background: #fff;

    box-shadow:
        0 1.2rem 3rem
        rgba(39, 48, 35, 0.13);
}


.reports-final-gallery figure:first-child {
    width: 57%;

    top: 0;
    right: 0;

    transform: rotate(2deg);
}


.reports-final-gallery figure:nth-child(2) {
    width: 41%;

    top: 18%;
    left: 4%;

    transform: rotate(-4deg);
}


.reports-final-gallery figure:nth-child(3) {
    width: 38%;

    right: 14%;
    bottom: 0;

    transform: rotate(4deg);
}


.reports-final-gallery img {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: block;

    object-fit: cover;
}


.reports-final-note {
    position: absolute;

    z-index: 5;

    left: 36%;
    bottom: 7%;

    padding:
        1.1rem
        1.2rem;

    color: #315d39;

    background:
        linear-gradient(
            145deg,
            #eee0bf,
            #fff7e4
        );

    box-shadow:
        0 1rem 2.5rem
        rgba(52, 46, 35, 0.12);

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

    transform: rotate(-3deg);
}


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

@media (max-width: 70rem) {

    .reports-feed-layout {
        grid-template-columns:
            minmax(0, 1.5fr)
            minmax(16rem, 0.6fr);

        gap: 2rem;
    }


    .reports-intro-grid {
        grid-template-columns:
            minmax(18rem, 0.75fr)
            minmax(27rem, 1.25fr);
    }


    .report-post-featured {
        grid-template-columns: 1fr;
    }


    .report-post-featured-image {
        min-height: 25rem;
    }


    .report-photo-story-header {
        grid-template-columns:
            0.6fr
            1fr;
    }


    .report-photo-story-lead {
        grid-column:
            1
            / 3;

        max-width: 45ch;
    }


    .report-highlight--wide {
        grid-template-columns:
            minmax(18rem, 0.65fr)
            minmax(0, 1.35fr);
    }


    .reports-news-grid--large {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


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

@media (max-width: 58rem) {

    .reports-feed-layout {
        grid-template-columns: 1fr;
    }


    .reports-sidebar {
        order: -1;
    }


    .reports-sidebar-sticky {
        position: static;
    }


    .facebook-widget {
        max-width: 32rem;
    }


    .reports-intro-grid {
        grid-template-columns: 1fr;
    }


    .reports-intro-title {
        max-width: 8ch;
    }


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


    .reports-two-column {
        grid-template-columns: 1fr;
    }


    .reports-editorial-grid {
        grid-template-columns: 1fr;
    }


    .report-post-horizontal {
        grid-template-columns:
            minmax(12rem, 0.9fr)
            minmax(0, 1.1fr);
    }


    .report-full-gallery {
        grid-template-columns:
            repeat(6, minmax(0, 1fr));
    }


    .report-gallery-item:nth-child(n) {
        grid-column: span 3;
        grid-row: auto;
    }


    .report-gallery-item:nth-child(1) {
        grid-column: span 6;
    }


    .report-gallery-item:nth-child(1) img {
        min-height: 28rem;
    }


    .report-gallery-item:nth-child(4),
    .report-gallery-item:nth-child(6),
    .report-gallery-item:nth-child(9) {
        grid-column: span 6;
    }


    .reports-reels-heading,
    .reports-moving-posts-heading,
    .reports-news-heading {
        display: block;
    }


    .reports-reels-heading > p,
    .reports-moving-posts-heading > p,
    .reports-news-heading > p {
        margin-top: 1.2rem;
    }


    .report-highlight--wide {
        grid-template-columns: 1fr;
    }


    .report-highlight-content h2 {
        max-width: 10ch;
    }


    .reports-news-grid--large {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .reports-final-inner {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 42rem) {

    .reports-intro {
        padding:
            3.8rem
            0
            5rem;
    }


    .reports-intro-title {
        font-size:
            clamp(3.4rem, 14vw, 5rem);
    }


    .reports-intro-visual {
        min-height: 28rem;
    }


    .reports-intro-photo-main {
        width: 84%;
    }


    .reports-intro-photo-small {
        width: 9rem;
    }


    .reports-intro-note {
        left: auto;
        right: 0;

        width: 9.5rem;
    }


    .reports-filters {
        justify-content: flex-start;
        flex-wrap: nowrap;

        overflow-x: auto;

        border-radius: 1.4rem;

        scrollbar-width: none;
    }


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


    .reports-filter {
        flex: 0 0 auto;
    }


    .reports-stream-heading {
        display: block;
    }


    .reports-stream-heading > p {
        margin-top: 1.2rem;
    }


    .report-post-horizontal {
        grid-template-columns: 1fr;
    }


    .report-photo-story--full,
    .report-highlight--wide {
        width:
            calc(100vw - 1rem);

        border-radius: 1.5rem;
    }


    .report-photo-story--full {
        padding:
            2rem
            1rem;
    }


    .report-photo-story-header {
        display: block;
    }


    .report-photo-story-header h2 {
        max-width: 10ch;

        margin-top: 1.4rem;

        font-size:
            clamp(3rem, 12vw, 4.5rem);
    }


    .report-photo-story-lead {
        margin-top: 1.3rem;
    }


    .report-full-gallery {
        grid-template-columns: 1fr;
    }


    .report-gallery-item:nth-child(n) {
        grid-column: auto;
    }


    .report-gallery-item img,
    .report-gallery-item:nth-child(1) img {
        height: 17rem;
        min-height: 0;
    }


    .reports-reels-heading {
        width: 90%;
    }


    .reports-reels-heading h2 {
        font-size:
            clamp(3.5rem, 14vw, 5rem);
    }


    .reports-reel {
        flex-basis: 12rem;
    }


    .reports-moving-posts-heading {
        width: 90%;
    }


    .reports-moving-post {
        flex-basis: 16rem;
    }


    .reports-quote-break--wide {
        padding:
            2.8rem
            1.4rem;
    }


    .reports-quote-break--wide blockquote {
        font-size:
            clamp(1.65rem, 8vw, 2.4rem);
    }


    .report-highlight-content {
        padding:
            2.5rem
            1.5rem;
    }


    .report-highlight-content h2 {
        font-size:
            clamp(3rem, 12vw, 4.4rem);
    }


    .report-highlight-media {
        grid-template-rows: auto;
    }


    .report-highlight-main-photo {
        min-height: 23rem;
    }


    .report-highlight-shipments {
        grid-template-columns: 1fr;
    }


    .reports-news-grid--large {
        grid-template-columns: 1fr;
    }


    .reports-mini-grid--large {
        grid-template-columns: 1fr;
    }


    .reports-mini-grid--large article:nth-child(n) {
        padding-inline: 0;

        border-left: none;
    }


    .reports-mini-grid--large article {
        grid-template-columns:
            auto
            auto
            1fr;

        align-items: start;
    }


    .reports-mini-grid--large article a {
        grid-column:
            3
            / 4;
    }


    .reports-final-gallery {
        min-height: 26rem;
    }

}


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

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

    .reports-reels-track,
    .reports-moving-posts-track {
        animation: none;
    }


    .report-post img,
    .report-gallery-item img,
    .report-news-card img,
    .reports-reel,
    .report-gallery-item {
        transition: none;
    }

}





/* onvleniia */
/* =========================================================
   ГОЛОВНА ІСТОРІЯ — ГУМАНІТАРНА МІСІЯ
   ========================================================= */

.mission-story {
    width: 100%;
    margin: 70px 0 90px;
}


/* ГОЛОВНИЙ БЛОК */

.mission-story__content {
    width: 100%;

    display: grid;
    grid-template-columns: 31% 69%;

    height: 610px;

    overflow: hidden;

    background: #0d542b;
}


/* =========================================================
   ЛІВА ЗЕЛЕНА ЧАСТИНА
   ========================================================= */

.mission-story__text {
    position: relative;

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

    padding: 55px 55px 55px 68px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0b4525 0%,
            #126331 100%
        );
}


/* рукописний текст */

.mission-story__script {
    margin: 0 0 15px;

    color: #d9e6b7;

    font-family: "Marck Script", cursive;
    font-size: 18px;
    line-height: 1;

    transform: rotate(-2deg);
}


/* дата + категорія */

.mission-story__meta {
    display: flex;
    align-items: center;
    gap: 17px;

    margin-bottom: 26px;

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

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

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


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

.mission-story__title {
    margin: 0 0 25px;

    max-width: 430px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(48px, 4vw, 70px);
    font-weight: 700;

    line-height: 0.91;
    letter-spacing: -0.045em;
}


/* опис */

.mission-story__description {
    max-width: 330px;

    margin: 0 0 25px;

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

    font-size: 14px;
    line-height: 1.65;
}


/* посилання */

.mission-story__link {
    width: fit-content;

    color: #ffffff;

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

    text-decoration: none;

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


.mission-story__link span {
    display: inline-block;

    margin-left: 4px;

    transition: transform 0.25s ease;
}


.mission-story__link:hover {
    opacity: 0.75;
}


.mission-story__link:hover span {
    transform: translateX(6px);
}


/* =========================================================
   ПРАВА ФОТОГРАФІЯ
   ========================================================= */

.mission-story__photo {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #e9e6dc;
}


.mission-story__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    /*
       Це керує кадруванням.
       50% = горизонталь
       58% = вертикаль

       Якщо захочеш показати більше верху:
       object-position: 50% 40%;

       більше низу:
       object-position: 50% 70%;
    */
    object-position: 50% 58%;

    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}


/* легке затемнення біля зеленого блока */

.mission-story__photo::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(7, 55, 28, 0.10) 0%,
            rgba(7, 55, 28, 0) 16%
        );
}


/* дуже легкий hover */

.mission-story__content:hover .mission-story__photo img {
    transform: scale(1.015);
}


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

@media (max-width: 1100px) {

    .mission-story__content {
        grid-template-columns: 38% 62%;
        height: 570px;
    }


    .mission-story__text {
        padding: 45px;
    }


    .mission-story__title {
        font-size: clamp(43px, 5vw, 60px);
    }

}


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

@media (max-width: 768px) {

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

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

    .reports-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .reports-page .container {
        width: calc(100% - 24px);
        max-width: none;

        margin-inline: auto;
        padding-left: 0;
        padding-right: 0;
    }

    .reports-page img {
        max-width: 100%;
    }


    /* =====================================================
       INTRO
    ===================================================== */

    .reports-intro {
        padding:
            42px
            0
            50px;

        background:
            radial-gradient(
                circle at 90% 8%,
                rgba(180, 206, 133, 0.16),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                #f7f2e7 0%,
                #fffaf2 100%
            );
    }

    .reports-intro::before {
        width: 180px;
        height: 180px;

        top: -65px;
        right: -75px;

        opacity: 0.4;
    }

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

        gap: 32px;
    }

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

    .reports-intro-script {
        margin-bottom: 8px;

        font-size: 16px !important;
        line-height: 1.35;
    }

    .reports-intro .section-label {
        margin-bottom: 10px;

        font-size: 9px;
    }

    .reports-intro-title {
        max-width: 8.5ch;

        margin: 0;

        font-size:
            clamp(46px, 13vw, 60px);

        line-height: 0.87;

        letter-spacing: -0.055em;
    }

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

        margin-top: 20px;

        font-size: 14px;

        line-height: 1.6;
    }

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

        width: 100%;

        gap: 10px;

        margin-top: 24px;
    }

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

        min-height: 52px;

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

        padding:
            0
            20px;

        border-radius: 999px;
    }

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

        min-height: 48px;

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

        padding: 0 18px;

        border:
            1px solid
            rgba(39, 110, 54, 0.18);

        border-radius: 999px;

        font-size: 13px;
    }


    /* =====================================================
       INTRO VISUAL — COMPACT COLLAGE
    ===================================================== */

    .reports-intro-visual {
        position: relative;

        width: 100%;
        min-height: 340px;
    }

    .reports-intro-photo {
        box-shadow:
            0 12px 28px
            rgba(40, 43, 34, 0.14);
    }

    .reports-intro-photo::before {
        width: 46px;
        height: 10px;

        top: -5px;
    }

    .reports-intro-photo-main {
        top: 8px;
        right: 0;

        width: 82%;

        padding:
            5px
            5px
            28px;

        transform: rotate(2deg);
    }

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

    .reports-intro-photo-small {
        right: auto;
        left: 0;
        bottom: 0;

        width: 43%;

        padding:
            5px
            5px
            27px;

        transform: rotate(-4deg);
    }

    .reports-intro-photo-small img {
        aspect-ratio: 4 / 5;

        object-fit: cover;
    }

    .reports-intro-photo figcaption {
        font-size: 8px;
    }

    .reports-intro-note {
        right: 3px;
        bottom: 8px;
        left: auto;

        width: 130px;

        padding:
            9px
            10px;

        font-size: 9px;
        line-height: 1.3;

        transform: rotate(3deg);
    }


    /* =====================================================
       MAIN FEED
    ===================================================== */

    .reports-feed {
        padding:
            46px
            0
            58px;
    }

    .reports-feed-layout {
        display: flex;
        flex-direction: column;

        gap: 46px;
    }

    .reports-stream {
        width: 100%;
    }

    .reports-stream-heading {
        display: block;

        margin-bottom: 26px;
    }

    .reports-stream-heading h2 {
        max-width: 9ch;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.92;
    }

    .reports-stream-heading > p {
        max-width: 29ch;

        margin-top: 13px;

        font-size: 13px;

        line-height: 1.55;
    }


    /* =====================================================
       FEATURED POST
    ===================================================== */

    .report-post-featured {
        display: flex;
        flex-direction: column;

        margin-bottom: 18px;

        border-radius: 20px;
    }

    .report-post-featured-image {
        min-height: 0;
        height: 270px;
    }

    .report-post-featured-image img {
        height: 100%;

        object-fit: cover;
    }

    .report-post-photo-label {
        top: 12px;
        left: 12px;

        padding:
            6px
            9px;

        font-size: 9px;
    }

    .report-post-featured-content {
        padding:
            22px
            18px
            24px;
    }

    .report-post-meta {
        margin-bottom: 8px;
    }

    .report-post-meta time,
    .report-post-meta span {
        font-size: 9px;
    }

    .report-post-featured-content h3 {
        max-width: 12ch;

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

        line-height: 0.98;
    }

    .report-post-featured-content p {
        margin-top: 12px;

        font-size: 13px;

        line-height: 1.55;
    }

    .report-post-footer {
        align-items: flex-start;
        flex-direction: column;

        gap: 7px;

        margin-top: 18px;
    }

    .report-post-footer a {
        font-size: 12px;
    }

    .report-post-footer span {
        font-size: 9px;
    }


    /* =====================================================
       TWO POSTS — SWIPE
    ===================================================== */

    .reports-two-column {
        display: flex;

        width: calc(100% + 12px);

        gap: 12px;

        margin:
            0
            -6px
            48px;

        padding:
            0
            6px
            10px;

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

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }

    .reports-two-column::-webkit-scrollbar {
        display: none;
    }

    .report-post-medium {
        flex:
            0 0
            min(78vw, 290px);

        width: min(78vw, 290px);

        scroll-snap-align: start;

        border-radius: 18px;
    }

    .report-post-medium figure {
        aspect-ratio: 4 / 3;
    }

    .report-post-body {
        padding:
            17px
            15px
            18px;
    }

    .report-post-body h3 {
        font-size: 24px;
    }

    .report-post-body p {
        margin-top: 9px;

        font-size: 11px;

        line-height: 1.5;
    }

    .report-post-body > a {
        margin-top: 11px;

        font-size: 11px;
    }


    /* =====================================================
       FACEBOOK
    ===================================================== */

    .reports-sidebar {
        width: 100%;
    }

    .reports-sidebar-sticky {
        position: static;

        top: auto;
    }

    .reports-sidebar-heading {
        margin-bottom: 18px;
    }

    .reports-sidebar-heading h2 {
        max-width: 7ch;

        font-size:
            clamp(38px, 11vw, 48px);
    }

    .reports-sidebar-heading > p:last-child {
        max-width: 30ch;

        margin-top: 10px;

        font-size: 12px;

        line-height: 1.5;
    }

    .facebook-widget {
        width: 100%;

        padding: 5px;

        border-radius: 16px;

        box-shadow:
            0 10px 24px
            rgba(39, 47, 34, 0.08);
    }

    .facebook-widget .fb-page {
        width: 100% !important;
    }

    .reports-facebook-link {
        min-height: 46px;

        align-items: center;

        margin-top: 10px;

        padding:
            0
            16px;

        font-size: 12px;
    }

    .reports-sidebar-note {
        margin-top: 10px;

        padding:
            12px
            13px;

        font-size: 11px;

        border-radius: 13px;
    }


    /* =====================================================
       FULL PHOTO STORY
    ===================================================== */

    .report-photo-story--full {
        width: calc(100% - 12px);

        margin:
            48px
            auto
            0;

        padding:
            26px
            10px
            18px;

        border-radius: 22px;
    }

    .report-photo-story-header {
        display: block;

        padding:
            0
            6px;
    }

    .report-photo-story-header h2 {
        max-width: 9ch;

        margin-top: 10px;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.92;
    }

    .report-photo-story-lead {
        max-width: 29ch;

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.5;
    }


    /* PHOTO MOSAIC */

    .report-full-gallery {
        display: grid;

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

        gap: 6px;

        margin-top: 22px;
    }

    .report-gallery-item:nth-child(n) {
        grid-column: auto;
        grid-row: auto;

        padding: 4px;

        border-radius: 10px;
    }

    .report-gallery-item:nth-child(1) {
        grid-column:
            1
            / 3;
    }

    .report-gallery-item:nth-child(1) img {
        height: 220px;
        min-height: 0;
    }

    .report-gallery-item:nth-child(4),
    .report-gallery-item:nth-child(7) {
        grid-column:
            1
            / 3;
    }

    .report-gallery-item img,
    .report-gallery-item:nth-child(1) img {
        width: 100%;
        height: 145px;

        object-fit: cover;
    }

    .report-gallery-item:nth-child(1) img,
    .report-gallery-item:nth-child(4) img,
    .report-gallery-item:nth-child(7) img {
        height: 210px;
    }


    /* =====================================================
       REELS
    ===================================================== */

    .reports-reels {
        padding:
            50px
            0;
    }

    .reports-reels-heading {
        width: calc(100% - 24px);

        margin-inline: auto;
    }

    .reports-reels-heading h2 {
        max-width: 7ch;

        font-size:
            clamp(42px, 13vw, 56px);

        line-height: 0.88;
    }

    .reports-reels-heading > p {
        max-width: 28ch;

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.5;
    }

    .reports-reels-window {
        margin-top: 24px;

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

        scrollbar-width: none;
    }

    .reports-reels-window::-webkit-scrollbar {
        display: none;
    }

    .reports-reels-track {
        width: max-content;

        gap: 10px;

        padding:
            0
            12px
            10px;

        animation: none !important;
    }

    .reports-reel {
        flex:
            0 0
            165px;

        width: 165px;
        height: 290px;

        border-radius: 18px;
    }

    .reports-reel--clone {
        display: none;
    }

    .reports-reel-overlay {
        padding:
            14px
            12px;
    }


    /* =====================================================
       MOVING POSTS — SWIPE
    ===================================================== */

    .reports-moving-posts {
        padding:
            48px
            0;
    }

    .reports-moving-posts-heading {
        width: calc(100% - 24px);

        margin-inline: auto;
    }

    .reports-moving-posts-heading h2 {
        max-width: 8ch;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.92;
    }

    .reports-moving-posts-heading > p {
        max-width: 28ch;

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.5;
    }

    .reports-moving-posts-window {
        margin-top: 24px;

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

        scrollbar-width: none;
    }

    .reports-moving-posts-window::-webkit-scrollbar {
        display: none;
    }

    .reports-moving-posts-track {
        width: max-content;

        gap: 10px;

        padding:
            0
            12px
            10px;

        animation: none !important;
    }

    .reports-moving-post {
        flex:
            0 0
            min(76vw, 265px);

        width: min(76vw, 265px);

        border-radius: 18px;
    }

    .reports-moving-post-caption {
        padding:
            12px
            13px
            14px;
    }


    /* =====================================================
       QUOTE
    ===================================================== */

    .reports-quote-break--wide {
        width: calc(100% - 24px);

        margin:
            46px
            auto;

        padding:
            34px
            22px;

        border-radius: 22px;
    }

    .reports-quote-break--wide blockquote {
        max-width: 13ch;

        margin-inline: auto;

        font-size:
            clamp(25px, 7.5vw, 34px);

        line-height: 1.05;
    }


    /* =====================================================
       HUMANITARIAN MISSION
    ===================================================== */

    .mission-story {
        width: calc(100% - 24px);

        margin:
            48px
            auto
            56px;
    }

    .mission-story__content {
        display: flex;
        flex-direction: column;

        width: 100%;

        height: auto;

        overflow: hidden;

        border-radius: 22px;

        box-shadow:
            0 14px 32px
            rgba(31, 51, 32, 0.12);
    }

    .mission-story__text {
        min-height: 0;

        padding:
            28px
            22px
            30px;
    }

    .mission-story__script {
        margin-bottom: 9px;

        font-size: 14px;
    }

    .mission-story__meta {
        gap: 9px;

        margin-bottom: 14px;

        font-size: 8px;
    }

    .mission-story__title {
        max-width: 9ch;

        margin-bottom: 15px;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.9;
    }

    .mission-story__description {
        max-width: 29ch;

        margin-bottom: 16px;

        font-size: 12px;

        line-height: 1.5;
    }

    .mission-story__link {
        font-size: 11px;
    }

    .mission-story__photo {
        height: 300px;
    }

    .mission-story__photo img {
        object-position: 50% 55%;
    }


    /* =====================================================
       NEWS
    ===================================================== */

    .reports-news-section {
        padding:
            48px
            0;
    }

    .reports-news-heading {
        display: block;

        margin-bottom: 24px;
    }

    .reports-news-heading h2 {
        max-width: 8ch;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.92;
    }

    .reports-news-heading > p {
        max-width: 28ch;

        margin-top: 12px;

        font-size: 12px;

        line-height: 1.5;
    }

    .reports-news-grid--large {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;
    }

    .report-news-card {
        border-radius: 18px;
    }

    .report-news-card figure {
        height: 215px;
    }

    .report-news-card h3 {
        font-size: 24px;

        line-height: 1;
    }

    .report-news-card p {
        font-size: 11px;

        line-height: 1.5;
    }


    /* =====================================================
       MINI NEWS
    ===================================================== */

    .reports-mini-heading {
        margin-top: 42px;
    }

    .reports-mini-heading h2 {
        font-size:
            clamp(34px, 10vw, 44px);
    }

    .reports-mini-grid--large {
        display: flex;
        flex-direction: column;
    }

    .reports-mini-grid--large article {
        display: grid;

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

        gap:
            5px
            10px;

        padding:
            15px
            0;

        border-bottom:
            1px solid
            rgba(40, 89, 46, 0.11);
    }

    .reports-mini-grid--large article > * {
        grid-column: 2;
    }

    .reports-mini-grid--large article::before {
        grid-column: 1;
        grid-row:
            1
            / 4;
    }

    .reports-mini-grid--large article a {
        grid-column: 2;

        font-size: 10px;
    }


    /* =====================================================
       FINAL BLOCK
    ===================================================== */

    .reports-final {
        padding:
            50px
            0
            58px;
    }

    .reports-final-inner {
        display: flex;
        flex-direction: column;

        gap: 28px;
    }

    .reports-final-content h2 {
        max-width: 9ch;

        font-size:
            clamp(38px, 11vw, 50px);

        line-height: 0.92;
    }

    .reports-final-content p {
        max-width: 29ch;

        font-size: 12px;

        line-height: 1.5;
    }

    .reports-final-gallery {
        position: relative;

        min-height: 310px;
    }

    .reports-final-note {
        max-width: 135px;

        padding:
            9px
            10px;

        font-size: 9px;
    }

}



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

@media (max-width: 390px) {

    .reports-page .container {
        width: calc(100% - 18px);
    }

    .reports-intro-title {
        font-size: 44px;
    }

    .reports-intro-visual {
        min-height: 315px;
    }

    .reports-intro-photo-main {
        width: 84%;
    }

    .reports-intro-photo-small {
        width: 40%;
    }

    .reports-intro-note {
        width: 118px;

        font-size: 8px;
    }

    .report-post-featured-image {
        height: 245px;
    }

    .report-post-featured-content h3 {
        font-size: 28px;
    }

    .report-post-medium {
        flex-basis: 260px;

        width: 260px;
    }

    .report-gallery-item img {
        height: 130px;
    }

    .report-gallery-item:nth-child(1) img,
    .report-gallery-item:nth-child(4) img,
    .report-gallery-item:nth-child(7) img {
        height: 185px;
    }

    .reports-reel {
        flex-basis: 150px;

        width: 150px;
        height: 265px;
    }

    .mission-story__photo {
        height: 270px;
    }

}




/* =========================================================
   REPORTS — MOBILE FIXES
   ВСТАВИТИ В САМИЙ КІНЕЦЬ reports.css
========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       1. ВЕРХНІЙ КОЛАЖ
       Робимо компактним, без величезного пустого поля
    ===================================================== */

    .reports-intro-visual {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            0.42fr
            0.58fr !important;

        grid-template-rows:
            auto
            auto !important;

        align-items: end !important;

        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        gap:
            10px
            8px !important;

        margin-top: 8px !important;

        padding:
            12px
            0
            18px !important;
    }


    /* велике фото */

    .reports-intro-photo-main {
        position: relative !important;

        grid-column:
            1
            / 3 !important;

        grid-row: 1 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: end !important;

        width: 88% !important;

        margin: 0 !important;

        padding:
            6px
            6px
            34px !important;

        transform: rotate(1.5deg) !important;
    }


    .reports-intro-photo-main img {
        width: 100% !important;

        aspect-ratio: 16 / 10 !important;

        object-fit: cover !important;
    }


    /* мале фото */

    .reports-intro-photo-small {
        position: relative !important;

        grid-column: 1 !important;
        grid-row: 2 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        justify-self: start !important;

        width: 100% !important;

        margin:
            -34px
            0
            0
            2px !important;

        padding:
            5px
            5px
            29px !important;

        transform: rotate(-4deg) !important;
    }


    .reports-intro-photo-small img {
        width: 100% !important;

        aspect-ratio: 4 / 5 !important;

        object-fit: cover !important;
    }


    /* записка */

    .reports-intro-note {
        position: relative !important;

        grid-column: 2 !important;
        grid-row: 2 !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        align-self: center !important;

        width: 100% !important;
        max-width: 165px !important;

        margin:
            -10px
            0
            0
            auto !important;

        padding:
            14px
            13px !important;

        font-size: 11px !important;

        line-height: 1.4 !important;

        transform: rotate(2deg) !important;
    }


    .reports-intro-photo figcaption {
        left: 9px !important;
        right: 9px !important;
        bottom: 7px !important;

        font-size: 11px !important;

        line-height: 1.2 !important;
    }


    .reports-intro-photo::before {
        width: 52px !important;
        height: 10px !important;

        top: -5px !important;
    }



    /* =====================================================
       2. ГУМАНІТАРНА МІСІЯ
       Повністю прибираємо desktop split layout
    ===================================================== */

    .mission-story {
        width: calc(100% - 24px) !important;

        margin:
            48px
            auto
            58px !important;
    }


    .mission-story__content {
        display: flex !important;
        flex-direction: column !important;

        grid-template-columns: none !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        overflow: hidden !important;

        border-radius: 22px !important;

        box-shadow:
            0 16px 34px
            rgba(25, 46, 29, 0.13) !important;
    }


    .mission-story__text {
        width: 100% !important;

        min-height: 0 !important;

        padding:
            28px
            22px
            30px !important;

        justify-content: flex-start !important;

        background:
            linear-gradient(
                145deg,
                #0b4525,
                #146532
            ) !important;
    }


    .mission-story__script {
        margin-bottom: 10px !important;

        font-size: 14px !important;

        line-height: 1.2 !important;
    }


    .mission-story__meta {
        display: flex !important;
        flex-wrap: wrap !important;

        gap:
            5px
            12px !important;

        margin-bottom: 16px !important;

        font-size: 8px !important;

        line-height: 1.4 !important;
    }


    .mission-story__title {
        width: 100% !important;
        max-width: 9ch !important;

        margin:
            0
            0
            16px !important;

        font-size:
            clamp(38px, 10.5vw, 49px) !important;

        line-height: 0.92 !important;

        letter-spacing: -0.045em !important;
    }


    /* <br> з HTML лишаємо, але тепер вони не ріжуть текст */

    .mission-story__description {
        max-width: 30ch !important;

        margin:
            0
            0
            18px !important;

        font-size: 12px !important;

        line-height: 1.55 !important;
    }


    .mission-story__link {
        font-size: 12px !important;
    }


    .mission-story__photo {
        width: 100% !important;

        height: 285px !important;
        min-height: 285px !important;
    }


    .mission-story__photo img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;

        object-position: 50% 56% !important;
    }


    .mission-story__photo::after {
        background:
            linear-gradient(
                180deg,
                rgba(7, 55, 28, 0.13),
                transparent 18%
            ) !important;
    }



    /* =====================================================
       3. ФІНАЛЬНИЙ КОЛАЖ
       Фото ближче одне до одного
    ===================================================== */

    .reports-final {
        padding:
            48px
            0
            56px !important;
    }


    .reports-final-inner {
        display: flex !important;
        flex-direction: column !important;

        grid-template-columns: none !important;

        gap: 30px !important;
    }


    .reports-final-content {
        width: 100% !important;
    }


    .reports-final-content h2 {
        max-width: 9ch !important;

        font-size:
            clamp(38px, 11vw, 50px) !important;

        line-height: 0.92 !important;
    }


    .reports-final-content > p:not(.section-label) {
        max-width: 29ch !important;

        margin:
            14px
            0
            20px !important;

        font-size: 12px !important;

        line-height: 1.55 !important;
    }


    .reports-final-content .primary-button {
        min-height: 50px !important;

        padding:
            0
            20px !important;

        border-radius: 999px !important;
    }


    /* сам колаж */

    .reports-final-gallery {
        position: relative !important;

        display: grid !important;

        grid-template-columns:
            0.9fr
            1.1fr !important;

        grid-template-rows:
            auto
            auto !important;

        gap: 9px !important;

        width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        padding:
            8px
            2px
            18px !important;
    }


    .reports-final-gallery figure {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 5px !important;

        box-shadow:
            0 10px 24px
            rgba(42, 46, 36, 0.13) !important;
    }


    /* ліве фото */

    .reports-final-gallery figure:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;

        align-self: end !important;

        transform: rotate(-3deg) !important;
    }


    /* велике праве */

    .reports-final-gallery figure:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;

        transform: rotate(2deg) !important;
    }


    /* третє фото під ними */

    .reports-final-gallery figure:nth-child(3) {
        grid-column:
            1
            / 3 !important;

        grid-row: 2 !important;

        justify-self: center !important;

        width: 58% !important;

        margin-top: -5px !important;

        transform: rotate(-2deg) !important;
    }


    .reports-final-gallery img {
        width: 100% !important;

        aspect-ratio: 4 / 3 !important;

        object-fit: cover !important;
    }


    .reports-final-gallery figure:nth-child(3) img {
        aspect-ratio: 16 / 10 !important;
    }


    /* записка тепер між фотографіями,
       а не висить посеред пустого екрану */

    .reports-final-note {
        position: absolute !important;

        z-index: 10 !important;

        left: 50% !important;
        bottom: 3px !important;

        width: max-content !important;
        max-width: 185px !important;

        padding:
            12px
            15px !important;

        font-size: 12px !important;

        text-align: center !important;

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

        box-shadow:
            0 10px 22px
            rgba(43, 44, 34, 0.12) !important;
    }

}



/* =========================================================
   ЩЕ ТРОХИ КОМПАКТНІШЕ ДЛЯ 390px І МЕНШЕ
========================================================= */

@media (max-width: 390px) {

    .reports-intro-visual {
        grid-template-columns:
            0.4fr
            0.6fr !important;
    }


    .reports-intro-photo-main {
        width: 91% !important;
    }


    .reports-intro-note {
        max-width: 145px !important;

        padding:
            11px
            10px !important;

        font-size: 10px !important;
    }


    .mission-story {
        width: calc(100% - 18px) !important;
    }


    .mission-story__text {
        padding:
            25px
            19px
            27px !important;
    }


    .mission-story__title {
        font-size: 37px !important;
    }


    .mission-story__photo {
        height: 250px !important;
        min-height: 250px !important;
    }


    .reports-final-gallery figure:nth-child(3) {
        width: 64% !important;
    }


    .reports-final-note {
        max-width: 160px !important;

        font-size: 10px !important;
    }

}