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

.projects-hero,
.visual-diary,
.all-projects,
.projects-cta {
    font-family: Arial, sans-serif;
}


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

.projects-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 650px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image: url("../images/products-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.projects-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.55) 42%,
            rgba(0,0,0,.18) 100%
        );

    z-index: 1;
}


.projects-hero-content {
    position: relative;
    z-index: 2;

    width: 84%;
    max-width: 1350px;

    margin: 0 auto;

    padding-top: 55px;
}


.projects-hero-label {
    margin: 0 0 22px;

    color: #d68aa3;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 3px;
}


.projects-hero h1 {
    margin: 0;

    display: flex;
    flex-direction: column;

    font-family: Arial, sans-serif;

    font-size: clamp(52px, 6vw, 88px);

    /* THIN PREVIOUS PAGE STYLE */
    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -2px;
}


.projects-hero h1 span {
    color: #fff;
    font-weight: 400;
}


.projects-hero h1 strong {
    color: #e51d70;
    font-weight: 400;
}


.projects-hero-description {
    max-width: 570px;

    margin: 28px 0 0;

    color: rgba(255,255,255,.88);

    font-size: 16px;
    font-weight: 400;

    line-height: 1.7;
}


.projects-hero-side-text {
    position: absolute;

    right: 6%;
    bottom: 10%;

    z-index: 2;

    display: flex;
    align-items: flex-start;

    gap: 15px;
}


.projects-hero-side-text > span {
    width: 1px;
    height: 72px;

    background: rgba(255,255,255,.7);
}


.projects-hero-side-text p {
    margin: 0;

    color: #fff;

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

    line-height: 1.8;
    letter-spacing: 2px;
}


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

.visual-diary,
.all-projects {
    width: 100%;

    padding: 75px 5% 85px;

    box-sizing: border-box;

    background: #fff;
}


.projects-section-heading {
    max-width: 1200px;

    margin: 0 auto 25px;

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

    gap: 40px;
}


.section-label {
    position: relative;

    margin: 0 0 13px;

    padding-left: 27px;

    color: #333;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2.5px;
}


.section-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 17px;
    height: 2px;

    background: #e51d70;

    transform: translateY(-50%);
}


.projects-section-heading h2 {
    margin: 0;

    color: #111;

    /*
       SAME THIN FONT STYLE
       AS PREVIOUS RAAM PAGES
    */
    font-family: Arial, sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1.5px;

}


.section-description {
    max-width: 280px;

    margin: 0 0 4px;

    color: #555;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   FILTER BUTTONS
========================================================= */

.project-filters {
    max-width: 1200px;

    margin: 0 auto 38px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 8px;
}


.project-filter {
    min-width: 75px;

    padding: 8px 18px;

    border: 1px solid #d2d2d2;
    border-radius: 30px;

    background: #fff;

    color: #222;

    font-family: Arial, sans-serif;

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

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.project-filter:hover,
.project-filter.active {
    background: #111;
    border-color: #111;

    color: #fff;
}


/* =========================================================
   VISUAL DIARY
========================================================= */

.visual-diary {
    width: 100%;
    padding: 75px 5% 90px;
    box-sizing: border-box;
    background: #fff;
}


/* =========================================================
   VISUAL DIARY HEADING
========================================================= */

.projects-section-heading {
    max-width: 1200px;
    margin: 0 auto 35px;

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

    gap: 40px;
}


.projects-section-heading h2 {
    margin: 0;

    color: #111;

    font-family: Arial, sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -1.5px;

    text-transform: none;
}


.section-label {
    position: relative;

    margin: 0 0 13px;

    padding-left: 27px;

    color: #333;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2.5px;
}


.section-label::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 17px;
    height: 2px;

    background: #e51d70;

    transform: translateY(-50%);
}


.section-description {
    max-width: 280px;

    margin: 0 0 4px;

    color: #555;

    font-size: 12px;
    font-weight: 400;

    line-height: 1.6;
}


/* =========================================================
   VISUAL DIARY / REELS
   Instagram-style 9:16 vertical carousel
   ========================================================= */

.reel-carousel {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    overflow: hidden;
}

.reel-track {
    position: relative;
    width: 100%;
    height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Base Reel card */
.reel-card {
    position: absolute;
    top: 50%;
    width: 200px;
    height: 355.56px;
    overflow: hidden;
    border-radius: 14px;
    background: #222;
    cursor: pointer;

    transform: translate(-50%, -50%) scale(.78);

    opacity: .95;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .16);

    transition:
        left .8s cubic-bezier(.22, .61, .36, 1),
        width .8s cubic-bezier(.22, .61, .36, 1),
        height .8s cubic-bezier(.22, .61, .36, 1),
        transform .8s cubic-bezier(.22, .61, .36, 1),
        opacity .8s ease,
        box-shadow .8s ease;

    will-change: left, transform;
    user-select: none;
}


/* =====================================================
   7-REEL DESKTOP — TIGHT CONTINUOUS LAYOUT
===================================================== */


/* REEL 1 */
.reel-card.position-left-extra {
    top: 50%;
    left: 11%;
    width: 145px;
    height: 257.78px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1;
    opacity: .78;
}


/* REEL 2 */
.reel-card.position-left-far {
    top: 50%;
    left: 21%;
    width: 175px;
    height: 311.11px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;
    opacity: .88;
}


/* REEL 3 */
.reel-card.position-left {
    top: 50%;
    left: 34%;
    width: 205px;
    height: 364.44px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    opacity: .96;
}


/* REEL 4 — CENTER */
.reel-card.position-center {
    top: 50%;
    left: 50%;
    width: 300px;
    height: 533.33px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 5;
    opacity: 1;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}


/* REEL 5 */
.reel-card.position-right {
    top: 50%;
    left: 66%;
    width: 205px;
    height: 364.44px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 3;
    opacity: .96;
}


/* REEL 6 */
.reel-card.position-right-far {
    top: 50%;
    left: 79%;
    width: 175px;
    height: 311.11px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;
    opacity: .88;
}


/* REEL 7 */
.reel-card.position-right-extra {
    top: 50%;
    left: 89%;
    width: 145px;
    height: 257.78px;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1;
    opacity: .78;
}
/* ---------------------------------------------------------
   VIDEO
   --------------------------------------------------------- */

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

    display: block;

    object-fit: cover;

    pointer-events: none;
}


/* ---------------------------------------------------------
   DARK GRADIENT OVER VIDEO
   --------------------------------------------------------- */

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

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, .86) 0%,
            rgba(0, 0, 0, .18) 55%,
            rgba(0, 0, 0, 0) 100%
        );

    pointer-events: none;
}


/* ---------------------------------------------------------
   REEL TEXT
   --------------------------------------------------------- */

.reel-card-info {
    position: absolute;

    left: 18px;
    right: 15px;
    bottom: 18px;

    color: #fff;

    pointer-events: none;
}

.reel-card-info span {
    display: block;

    margin-bottom: 7px;

    font-size: 7px;
    font-weight: 600;

    letter-spacing: 1.4px;
}

.reel-card-info h3 {
    margin: 0;

    color: #fff;

    font-family: Arial, sans-serif;

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

    line-height: 1.3;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.reel-card:not(.position-center):hover {
    transform:
        translate(-50%, -50%)
        scale(.93);
}


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

@media (max-width: 768px) {

    .visual-diary {
        padding: 55px 0 70px;
    }

    .projects-section-heading {
        display: block;

        padding: 0 20px;

        margin-bottom: 25px;
    }

    .projects-section-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .section-description {
        max-width: 320px;

        margin-top: 18px;

        font-size: 11px;
    }


    .reel-carousel {
        width: 100%;

        overflow: hidden;
    }


    .reel-track {
        width: 100%;

        height: 410px;
    }


    /* Base mobile card */

    .reel-card {
        width: 105px;
        height: 186.67px;

        border-radius: 12px;
    }


    /* =====================================================
    MOBILE — VISUAL DIARY
    5 VISIBLE REELS
    ===================================================== */

    /* REEL 1 — EXTRA LEFT — HIDDEN */
    .reel-card.position-left-extra {
        display: none;
    }

    /* REEL 2 — LEFT FAR */
    .reel-card.position-left-far {
        display: block;
        top: 50%;
        left: 8%;
        width: 100px;
        height: 177.78px;
        transform: translate(-50%, -50%) scale(.82);
        z-index: 1;
        opacity: .72;
    }

    /* REEL 3 — LEFT */
    .reel-card.position-left {
        display: block;
        top: 50%;
        left: 27%;
        width: 125px;
        height: 222.22px;
        transform: translate(-50%, -50%) scale(.88);
        z-index: 3;
        opacity: .92;
    }

    /* CENTER REEL */
    .reel-card.position-center {
        display: block;
        top: 50%;
        left: 50%;
        width: 190px;
        height: 355.56px;
        transform: translate(-50%, -50%) scale(1);
        z-index: 5;
        opacity: 1;
        box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
    }

    /* REEL 5 — RIGHT */
    .reel-card.position-right {
        display: block;
        top: 50%;
        left: 73%;
        width: 125px;
        height: 222.22px;
        transform: translate(-50%, -50%) scale(.88);
        z-index: 3;
        opacity: .92;
    }

    /* REEL 6 — RIGHT FAR */
    .reel-card.position-right-far {
        display: block;
        top: 50%;
        left: 92%;
        width: 100px;
        height: 177.78px;
        transform: translate(-50%, -50%) scale(.82);
        z-index: 1;
        opacity: .72;
    }

    /* REEL 7 — EXTRA RIGHT — HIDDEN */
    .reel-card.position-right-extra {
        display: none;
    }

    /* Mobile text */

    .reel-card-info {
        left: 13px;
        right: 12px;
        bottom: 13px;
    }

    .reel-card-info span {
        font-size: 6px;

        margin-bottom: 5px;
    }

    .reel-card-info h3 {
        font-size: 11px;
    }
}


/* =========================================================
   ALL PROJECTS
========================================================= */

.all-projects {
    width: 100%;
    padding: 70px 5% 90px;
    box-sizing: border-box;
    background: #fff;
}


/* =========================================================
   ALL PROJECTS — HEADING
========================================================= */

.all-projects .projects-section-heading {
    max-width: 1200px;
    margin: 0 auto 28px;

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

    gap: 40px;
}


.all-projects .projects-section-heading h2 {
    margin: 0;

    color: #111;

    font-family: Arial, sans-serif;
    font-size: clamp(36px, 4vw, 52px);
    font-weight: 400;

    line-height: 1.05;
    letter-spacing: -1.5px;

    text-transform: none;
}


/* =========================================================
   CATEGORY FILTER BUTTONS
========================================================= */

.gallery-filters {
    max-width: 1200px;
    margin: 0 auto 30px;

    display: flex;
    align-items: center;

    gap: 8px;
    flex-wrap: wrap;
}


.gallery-filters .project-filter {
    min-width: 75px;

    padding: 8px 18px;

    border: 1px solid #d2d2d2;
    border-radius: 30px;

    background: #fff;
    color: #222;

    font-family: Arial, sans-serif;

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

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.gallery-filters .project-filter:hover,
.gallery-filters .project-filter.active {
    background: #111;
    border-color: #111;
    color: #fff;
}


/* =========================================================
   ALL PROJECTS — REFERENCE MASONRY LAYOUT
========================================================= */

.projects-gallery {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;

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

    grid-auto-rows: 105px;

    gap: 7px;
}


/* =========================================================
   GALLERY ITEMS
========================================================= */

.gallery-item {
    position: relative;

    overflow: hidden;

    border-radius: 9px;

    background: #eee;

    cursor: pointer;

    min-width: 0;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


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

    display: block;

    object-fit: cover;

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


.gallery-item:hover {
    box-shadow:
        0 12px 28px rgba(0,0,0,.12);
}


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


/* =========================================================
   TOP SECTION
========================================================= */

/* Left — shorter image */

.gallery-item-1 {
    grid-column: 1;
    grid-row: 1 / span 2;
}


/* Middle — taller image */

.gallery-item-2 {
    grid-column: 2;
    grid-row: 1 / span 3;
}


/* Right — taller image */

.gallery-item-3 {
    grid-column: 3;
    grid-row: 1 / span 3;
}


/* =========================================================
   MIDDLE SECTION
========================================================= */

/* Left — taller image */

.gallery-item-4 {
    grid-column: 1;
    grid-row: 3 / span 3;
}


/* Middle — shorter image */

.gallery-item-5 {
    grid-column: 2;
    grid-row: 4 / span 2;
}


/* Right — shorter image */

.gallery-item-6 {
    grid-column: 3;
    grid-row: 4 / span 2;
}


/* =========================================================
   BOTTOM SECTION
========================================================= */

/* Left */

.gallery-item-7 {
    grid-column: 1;
    grid-row: 6 / span 2;
}


/* Middle */

.gallery-item-8 {
    grid-column: 2;
    grid-row: 6 / span 2;
}


/* Right */

.gallery-item-9 {
    grid-column: 3;
    grid-row: 6 / span 2;
}

/* =========================================================
   IMAGE LIGHTBOX
========================================================= */

.project-lightbox {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    padding: 50px;

    box-sizing: border-box;

    background: rgba(0, 0, 0, .94);

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 20000;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}


.project-lightbox.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   LIGHTBOX IMAGE
========================================================= */

.lightbox-image-wrapper {
    width: min(1250px, 88vw);
    height: min(84vh, 820px);

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


.lightbox-image-wrapper img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 5px;

    box-shadow:
        0 25px 80px rgba(0,0,0,.55);
}


/* =========================================================
   LIGHTBOX CLOSE
========================================================= */

.lightbox-close {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

    border: none;

    background: transparent;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 3;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.lightbox-close:hover {
    opacity: .65;

    transform: rotate(90deg);
}


/* =========================================================
   LIGHTBOX ARROWS
========================================================= */

.lightbox-arrow {
    position: absolute;

    top: 50%;

    width: 50px;
    height: 50px;

    border: 1px solid rgba(255,255,255,.7);

    border-radius: 50%;

    background: transparent;

    color: #fff;

    font-size: 21px;
    font-weight: 300;

    cursor: pointer;

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

    transform: translateY(-50%);

    z-index: 3;

    transition:
        background .25s ease,
        color .25s ease;
}


.lightbox-arrow:hover {
    background: #fff;
    color: #111;
}


.lightbox-prev {
    left: 30px;
}


.lightbox-next {
    right: 30px;
}


/* =========================================================
   ALL PROJECTS — MOBILE
========================================================= */

@media (max-width: 768px) {

    .all-projects {
        padding: 55px 20px 65px;
    }


    .all-projects .projects-section-heading {
        display: block;

        margin-bottom: 22px;
    }


    .all-projects .projects-section-heading h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }


    .all-projects .section-description {
        margin-top: 18px;
        max-width: 320px;
    }


    /* FILTERS */

    .gallery-filters {
        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;

        scrollbar-width: none;
    }


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


    .gallery-filters .project-filter {
        flex-shrink: 0;
    }


    /* =====================================================
    MOBILE MASONRY GALLERY
    ===================================================== */

    .projects-gallery {
        display: grid;

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

        grid-auto-rows: 110px;

        gap: 5px;
        }


        .gallery-item-1 {
        grid-column: 1 / span 2;
        grid-row: span 2;
        }


        .gallery-item-2 {
        grid-column: 1;
        grid-row: span 3;
        }


        .gallery-item-3 {
        grid-column: 2;
        grid-row: span 3;
        }


        .gallery-item-4 {
        grid-column: 1 / span 2;
        grid-row: span 2;
        }


        .gallery-item-5,
        .gallery-item-6,
        .gallery-item-7,
        .gallery-item-8,
        .gallery-item-9 {
        grid-column: span 1;
        grid-row: span 2;
        }


        .gallery-item {
            margin-bottom: 5px;

            break-inside: avoid;
            -webkit-column-break-inside: avoid;
        }


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

    .project-lightbox {
        padding: 25px 15px;
    }


    .lightbox-image-wrapper {
        width: 88vw;
        height: 72vh;
    }


    .lightbox-close {
        top: 15px;
        right: 15px;

        font-size: 32px;
    }


    .lightbox-arrow {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }


    .lightbox-prev {
        left: 10px;
    }


    .lightbox-next {
        right: 10px;
    }

}


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

.projects-cta {
    position: relative;

    min-height: 360px;

    display: flex;
    align-items: center;

    padding: 70px 7%;

    box-sizing: border-box;

    overflow: hidden;

    background-image:
        url("../images/products-cta.jpg");

    background-size: cover;
    background-position: center;
}


.projects-cta-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.88),
            rgba(0,0,0,.55),
            rgba(0,0,0,.2)
        );
}


.projects-cta-content {
    position: relative;
    z-index: 2;

    max-width: 520px;
}


.projects-cta-content .section-label {
    color: #fff;
}


.projects-cta h2 {
    margin: 0;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: clamp(38px, 5vw, 62px);

    /* THIN */
    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -1.5px;
}


.projects-cta h2 span {
    color: #e51d70;

    font-weight: 400;
}


.projects-cta-content > p:last-child {
    max-width: 360px;

    margin-top: 22px;

    color: rgba(255,255,255,.85);

    font-size: 12px;

    line-height: 1.6;
}


.projects-cta-button {
    display: inline-flex;

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

    margin-top: 24px;

    padding: 14px 24px;

    border: 1px solid #fff;
    border-radius: 4px;

    color: #fff;

    text-decoration: none;

    font-family: Arial, sans-serif;

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

    transition:
        background .25s ease,
        color .25s ease;
}


.projects-cta-button span {
    margin-left: 15px;
}


.projects-cta-button:hover {
    background: #fff;
    color: #111;
}

/* =========================================================
   CONTACT + FOOTER
========================================================= */

.raam-contact-footer {
    width: 100%;
    background: #211f1d;
    color: #fff;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.raam-contact-row {
    width: 100%;

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

    background: #211f1d;
}


.raam-contact-box {
    min-height: 110px;

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

    gap: 18px;

    border-right: 1px solid rgba(255,255,255,.16);

    color: #fff;
    text-decoration: none;

    transition: background .25s ease;
}


.raam-contact-box:last-child {
    border-right: none;
}


.raam-contact-box:hover {
    background: rgba(255,255,255,.04);
}


/* =========================================================
   CONTACT ICON
========================================================= */

.raam-contact-icon {
    width: 43px;
    height: 43px;

    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;

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

    flex-shrink: 0;

    color: #fff;
}


.raam-contact-icon svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: #fff;
    stroke-width: 1.5;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.raam-contact-icon span {
    font-size: 18px;
    line-height: 1;
}


/* =========================================================
   CONTACT TEXT
========================================================= */

.raam-contact-text {
    display: flex;
    flex-direction: column;
}


.raam-contact-label {
    display: block;

    margin-bottom: 6px;

    color: #fff;

    font-size: 8px;
    font-weight: 600;

    letter-spacing: 1.8px;
}


.raam-contact-value {
    display: block;

    color: #fff;

    font-size: 11px;
}


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

.raam-footer {
    width: 100%;

    background: #211f1d;

    color: #fff;

    padding: 38px 5% 20px;

    box-sizing: border-box;
}


.raam-footer-content {
    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.6fr 1fr 1.3fr 1fr .8fr;

    gap: 35px;

    padding-bottom: 30px;

}


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

.raam-footer-brand img {
    width: 105px;
    height: auto;

    display: block;

    margin-bottom: 15px;
}


.raam-footer-brand p {
    max-width: 210px;

    margin: 0;

    color: rgba(255,255,255,.65);

    font-size: 9px;

    line-height: 1.7;
}


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

.raam-footer-column h4 {
    margin: 0 0 14px;

    color: #fff;

    font-size: 10px;
    font-weight: 600;
}


.raam-footer-column > a {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.65);

    text-decoration: none;

    font-size: 9px;

    transition: color .25s ease;
}


.raam-footer-column > a:hover {
    color: #e51d70;
}


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

.raam-social-links {
    display: flex;

    align-items: center;

    gap: 10px;
}


.raam-social-links a {
    width: 32px;
    height: 32px;

    margin: 0;

    border: 1px solid rgba(255,255,255,.35);

    border-radius: 50%;

    display: flex;

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

    color: #fff;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.raam-social-links a svg {
    width: 14px;
    height: 14px;

    fill: #fff;
}


.raam-social-links a:hover {
    background: #e51d70;
    border-color: #e51d70;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.raam-footer-bottom {
    max-width: 1200px;

    margin: 18px auto 0;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    gap: 20px;
}


.raam-footer-bottom p {
    margin: 0;

    color: rgba(255,255,255,.45);

    font-size: 8px;
}


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

@media (max-width: 768px) {

    .raam-contact-row {
        grid-template-columns: 1fr;
    }


    /* CONTACT BOXES — CENTERED */

    .raam-contact-box {
        min-height: 110px;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 10px;

        padding: 20px 25px;

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,.12);

        text-align: center;

        box-sizing: border-box;
    }


    .raam-contact-box:last-child {
        border-bottom: none;
    }


    .raam-contact-text {
        align-items: center;
    }


    .raam-contact-label,
    .raam-contact-value {
        text-align: center;
    }


    /* FOOTER */

    .raam-footer {
        padding: 50px 25px 18px;
    }


    .raam-footer-content {
        grid-template-columns: 1fr 1fr;

        gap: 35px 25px;
    }


    .raam-footer-brand {
        grid-column: 1 / -1;
    }


    .raam-footer-bottom {
        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

}
/* =========================================================
   PROJECT HEADINGS — MATCH HOME PAGE STYLE
========================================================= */

.projects-hero h1,
.projects-section-heading h2,
.projects-cta h2 {
    font-family: Arial, sans-serif;
    font-weight: 400;
    text-transform: none;
}

/* =========================================================
   FILTERED PROJECTS — AUTO REARRANGE
========================================================= */

.projects-gallery.is-filtered {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
}


/* Remove the special masonry positions while filtering */

.projects-gallery.is-filtered .gallery-item {
    grid-column: auto;
    grid-row: auto;
}


/* First image in each filtered group */

.projects-gallery.is-filtered .gallery-item:first-child {
    grid-column: span 2;
}


/* =========================================================
   FILTERED PROJECTS — MOBILE
========================================================= */

@media (max-width: 768px) {

    .projects-gallery.is-filtered {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
        gap: 5px;
    }

    .projects-gallery.is-filtered .gallery-item {
        grid-column: auto;
        grid-row: auto;
    }

    .projects-gallery.is-filtered .gallery-item:first-child {
        grid-column: span 2;
    }

}

/* CTA DESCRIPTION TEXT */

.projects-cta-content > p {
    color: #fff;
}

/* =========================================================
   PROJECT HERO ANIMATION (SAFE VERSION)
   ========================================================= */

/* Hero content entrance */
.projects-hero-content{
    opacity:0;
    animation:heroContentFade .9s ease-out forwards;
}

/* Label */
.projects-hero-label{
    opacity:0;
    animation:heroFadeUp .7s ease-out .15s forwards;
}

/* Heading */
.projects-hero h1{
    opacity:0;
    animation:heroFadeUp .8s ease-out .35s forwards;
}

/* Description */
.projects-hero-description{
    opacity:0;
    animation:heroFadeUp .8s ease-out .55s forwards;
}

/* Side text */
.projects-hero-side-text{
    opacity:0;
    animation:heroSideIn .8s ease-out .75s forwards;
}

/* -------------------- Keyframes -------------------- */

@keyframes heroContentFade{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes heroFadeUp{
    from{
        opacity:0;
        transform:translateY(24px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroSideIn{
    from{
        opacity:0;
        transform:translateX(24px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

/* Respect reduced-motion */

@media (prefers-reduced-motion: reduce){
    .projects-hero-content,
    .projects-hero-label,
    .projects-hero h1,
    .projects-hero-description,
    .projects-hero-side-text{
        animation:none;
        opacity:1;
    }
}

/* =========================================================
   VISUAL DIARY — SMOOTH ACTIVE REEL ANIMATION
========================================================= */

.reel-card {
    will-change: left, width, height, transform, opacity;
}


/* Center Reel */

.reel-card.position-center {
    filter: brightness(1);
}


/* Side Reels */

.reel-card.position-left,
.reel-card.position-right {
    filter: brightness(.92);
}


/* Outer Reels */

.reel-card.position-left-extra,
.reel-card.position-right-extra {
    filter: brightness(.70);
}

.reel-card.position-left-far,
.reel-card.position-right-far {
    filter: brightness(.78);
}


/* Smooth video transition */

.reel-video {
    transition:
        transform .8s cubic-bezier(.22, .61, .36, 1),
        filter .8s ease;
}


/* Center video */

.reel-card.position-center .reel-video {
    transform: scale(1);
}


/* Side videos */

.reel-card.position-left .reel-video,
.reel-card.position-right .reel-video {
    transform: scale(1.02);
}


/* Outer videos */

.reel-card.position-left-far .reel-video,
.reel-card.position-right-far .reel-video {
    transform: scale(1.04);
}

/* =========================================================
   ALL PROJECTS — GALLERY ANIMATION
========================================================= */

/* Gallery items start slightly lower and transparent */
.gallery-item {
    opacity: 0;
    transform: translateY(25px);
    animation: projectCardReveal .7s ease-out forwards;
}


/* Stagger the cards */

.gallery-item-1 {
    animation-delay: .05s;
}

.gallery-item-2 {
    animation-delay: .12s;
}

.gallery-item-3 {
    animation-delay: .19s;
}

.gallery-item-4 {
    animation-delay: .26s;
}

.gallery-item-5 {
    animation-delay: .33s;
}

.gallery-item-6 {
    animation-delay: .40s;
}

.gallery-item-7 {
    animation-delay: .47s;
}

.gallery-item-8 {
    animation-delay: .54s;
}

.gallery-item-9 {
    animation-delay: .61s;
}


/* Reveal animation */

@keyframes projectCardReveal {

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

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

}


/* Slightly smoother image movement */

.gallery-item img {
    transition:
        transform .7s cubic-bezier(.22,.61,.36,1);
}


/* Hover */

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


/* Keep animation accessible */

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

    .gallery-item {
        animation: none;
        opacity: 1;
        transform: none;
    }

}

/* =========================================================
   CTA — ENTRANCE ANIMATION
========================================================= */

.projects-cta-content {
    opacity: 0;
    animation: ctaContentReveal 1s ease-out .15s forwards;
}


/* CTA label */

.projects-cta-content .section-label {
    opacity: 0;
    animation: ctaFadeUp .7s ease-out .25s forwards;
}


/* CTA heading */

.projects-cta h2 {
    opacity: 0;
    animation: ctaFadeUp .9s ease-out .4s forwards;
}


/* CTA description */

.projects-cta-content > p {
    opacity: 0;
    animation: ctaFadeUp .8s ease-out .6s forwards;
}


/* CTA button */

.projects-cta-button {
    opacity: 0;
    animation: ctaFadeUp .8s ease-out .8s forwards;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes ctaContentReveal {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}


@keyframes ctaFadeUp {

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

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

}


/* =========================================================
   CTA BUTTON HOVER
========================================================= */

.projects-cta-button {
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.projects-cta-button:hover {
    transform: translateY(-2px);
}


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

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

    .projects-cta-content,
    .projects-cta-content .section-label,
    .projects-cta h2,
    .projects-cta-content > p,
    .projects-cta-button {
        animation: none;
        opacity: 1;
        transform: none;
    }

}