@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
}

html:has(body.experience-page) {
    scroll-snap-type: none;
}

body {
    background: #080808;
    color: #ffffff;
    font-family: 'Jost', sans-serif;
    font-weight: 300;
}

a {
    color: inherit;
    text-decoration: none;
}

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


/* =========================
   HEADER
========================= */

.header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 70px;

    padding: 0 32px;

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

    z-index: 100;
}

.logo {
    font-size: 18px;
    font-weight: 500;
}

.menu-button {
    width: 30px;
    height: 30px;

    border: none;
    background: transparent;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    cursor: pointer;
}

.menu-button span {
    display: block;

    width: 22px;
    height: 1px;

    background: white;
}



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

.intro {
    position: relative;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    display: flex;
    align-items: flex-end;
}

.intro-image {
    position: absolute;
    inset: 0;

    background-image: url("images/intro.JPG");
    background-size: cover;
    background-position: center;
}

.intro-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(8,8,8,0) 0%,
            rgba(8,8,8,0.25) 45%,
            rgba(8,8,8,0.95) 85%,
            #080808 100%
        );
}

.intro-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 0 5vw 7vw;
}

.intro-content h1 {
    font-size: 4rem;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke: 1px white;
}

.intro-content p {
    margin-top: 10px;

    font-size: 16px;
    letter-spacing: 0.02em;

    opacity: 0.65;
}

.intro-spacer {
    height: 400px;
    background: #080808;
}


/* =========================
   EXPERIENCES
========================= */

.experiences {
    width: 100%;
}

.experience {
    position: relative;
    scroll-snap-align: start;
    display: block;

    width: 100%;
    height: 56.25vw;

    max-height: none;

    overflow: hidden;

    background: #080808;
}

.experience img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s ease;
}

.experience-overlay {
    position: absolute;
    inset: 0;

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

    transition: background 0.6s ease;
}

.experience-title {
    position: absolute;
    inset: 0;

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

    color: white;
    font-size: 3rem;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;

    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.experience-title span {
    opacity: 0.5;
}


/* =========================
   HOVER
========================= */

@media (hover: hover) {
    .experience:hover img {
        transform: scale(1.015);
        filter: brightness(0.7);
    }

    .experience:hover .experience-overlay {
        background: rgba(0,0,0,0.15);
    }

    .experience:hover .experience-title {
        opacity: 1;
        transform: translateY(0);
    }
}

.experience.touch-active img {
    filter: brightness(0.7);
}

.experience.touch-active .experience-overlay {
    background: rgba(0,0,0,0.15);
}

.experience.touch-active .experience-title {
    opacity: 1;
    transform: translateY(0);
}

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

@media (max-width: 700px) {

    html {
        scroll-snap-type: none;
    }

    .header {
        height: 60px;
        padding: 0 20px;
    }

    .intro {
        height: 100svh;
    }

    .intro-content {
        padding: 0 20px 50px;
    }

    .intro-content h1 {
        font-size: 46px;
    }

    .intro-content p {
        font-size: 12px;
    }

    .intro-spacer {
        height: 100px;
    }

    .experience {
        height: 56.25vw;
    }

    .experience-title {
        font-size: 18px;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .experience-overlay {
        background: rgba(0,0,0,0);
    }


}

/* =========================================================
   INDIVIDUAL EXPERIENCE PAGES
   KLIMAX — FIRST DAY
========================================================= */

.experience-page {
    background: #0e0e0c;
    color: white;
}


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

.experience-intro {
    position: relative;
    width: 100%;
    height: 472px;
    overflow: hidden;
    background: #0e0e0c;
}

.experience-intro-image {
    position: absolute;
    top: 0;
    left: 14.1%;
    width: 85.9%;
    height: 472px;
    overflow: hidden;
    opacity: 0.8;
}

.experience-intro-image img {
    position: absolute;
    width: 75.92%;
    height: 154.56%;
    left: 26.18%;
    top: -15.96%;

    max-width: none;
    object-fit: cover;
}

.experience-intro-gradient {
    position: absolute;
    top: 0;
    left: 36.4%;
    width: 63.6%;
    height: 472px;

    background: linear-gradient(
        to left,
        rgba(14, 14, 12, 0),
        #0e0e0c
    );

    pointer-events: none;
}

.experience-intro-content {
    position: absolute;
    left: 7.7%;
    top: 0;

    z-index: 2;
}

.experience-intro-content h1 {
    position: absolute;
    top: 236px;
    left: 0;

    margin: 0;

    font-size: 64px;
    line-height: normal;
    font-weight: 500;

    white-space: nowrap;
}

.experience-intro-content p {
    position: absolute;
    top: 389px;
    left: 0;

    margin: 0;

    font-size: 32px;
    line-height: 32px;
    font-weight: 400;

    letter-spacing: 0.12em;
    white-space: nowrap;
}


/* =========================
   EXPERIENCE CONTENT
========================= */

.experience-content {
    position: relative;

    width: 100%;
    max-width: 1440px;
    height: 4107px;

    margin: 0 auto;
}


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

.experience-description {
    position: absolute;

    top: 252px;
    right: 17.5%;

    width: 373px;

    text-align: right;
}

.experience-description p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}


/* =========================
   KLIMAX LOGO
========================= */

.experience-logo {
    position: absolute;

    top: 453px;
    left: 14.5%;

    width: 414px;
    height: 158px;
}

.experience-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* =========================
   SMALL IMAGE
========================= */

.experience-image-small {
    position: absolute;

    top: 757px;
    left: 46%;

    width: 664px;
    height: 373px;

    overflow: hidden;
}

.experience-image-small img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================
   FIRST TEXT
========================= */

.experience-text-left {
    position: absolute;

    top: 920px;
    left: 33.3%;

    transform: translateX(-100%);

    width: max-content;

    --reveal-x: -100%;
}

.experience-text-left p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}


/* =========================
   MEDIUM IMAGE
========================= */

.experience-image-medium {
    position: absolute;

    top: 1346px;
    left: 9.5%;

    width: 854px;
    height: 480px;

    overflow: hidden;
}

.experience-image-medium img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================
   IMAGE COUNTER
========================= */

.experience-counter {
    position: absolute;

    top: 1850px;
    left: 65.3%;

    transform: translateX(-50%);

    color: #7a7a7a;

    font-family: monospace;
    font-size: 24px;
    line-height: 32px;

    --reveal-x: -50%;
}


/* =========================
   CENTER TEXT
========================= */

.experience-text-center {
    position: absolute;

    top: 2100px;
    left: 75%;

    transform: translateX(-50%);

    width: max-content;

    --reveal-x: -50%;
}

.experience-text-center p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}


/* =========================
   FULL WIDTH IMAGE
========================= */

.experience-image-full {
    position: absolute;

    top: 2277px;
    left: 0;

    width: 100%;
    height: 809px;

    overflow: hidden;
}

.experience-image-full img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.experience-final-text {
    position: absolute;

    top: 3283px;
    left: 0;

    width: 100%;

    text-align: center;
}

.experience-final-text p {
    margin: 0;

    font-size: 32px;
    line-height: 44px;
    font-weight: 300;
}

.experience-final-text p:first-child {
    transform: translateX(-120px);
}

.experience-final-text p:last-child {
    transform: translateX(120px);
}


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

.experience-navigation {
    position: absolute;

    top: 3917px;
    left: 8.33%;

    width: 83.34%;
    height: 190px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}

.experience-navigation a {
    display: flex;
    align-items: center;
}

.experience-navigation .previous {
    justify-content: flex-start;
}

.experience-navigation .back {
    justify-content: center;
    text-decoration: underline;
}

.experience-navigation .next {
    justify-content: flex-end;
}


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

.experience-page .reveal {
    opacity: 0;
    transform:
        translateX(var(--reveal-x, 0))
        translateY(25px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-page .reveal.visible {
    opacity: 1;
    transform:
        translateX(var(--reveal-x, 0))
        translateY(0);
}

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

@media (max-width: 700px) {

    .experience-intro {
        height: 100svh;
    }

    .experience-intro-image {
        left: 0;
        width: 100%;
        height: 100%;
    }

    .experience-intro-image img {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

        object-fit: cover;
    }

    .experience-intro-gradient {
        left: 0;
        width: 100%;
        height: 100%;

        background:
            linear-gradient(
                to bottom,
                rgba(14,14,12,0) 20%,
                rgba(14,14,12,0.85) 75%,
                #0e0e0c 100%
            );
    }

    .experience-intro-content {
        left: 20px;
        bottom: 50px;
        top: auto;
    }

    .experience-intro-content h1 {
        position: static;

        font-size: 42px;
        line-height: 1.05;

        white-space: normal;
    }

    .experience-intro-content p {
        position: static;

        margin-top: 14px;

        font-size: 13px;
        line-height: 16px;

        letter-spacing: 0.08em;
    }


    /* =====================================================
       MOBILE EXPERIENCE CONTENT
       Keeps the Figma composition and scales it proportionally
    ===================================================== */

    .experience-content {
        position: relative;

        width: 100%;
        height: 285.21vw;

        max-width: none;

        margin: 0;
        padding: 0;
    }


    /* DESCRIPTION */

    .experience-description {
        position: absolute;

        top: 16.5vw;
        right: 17.5%;

        width: 27vw;

        margin: 0;

        text-align: right;
    }

    .experience-description p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* KLIMAX LOGO */

    .experience-logo {
        position: absolute;

        top: 31.46vw;
        left: 14.5%;

        width: 28.75vw;
        height: 10.97vw;

        margin: 0;
    }

    .experience-logo img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* SMALL IMAGE */

    .experience-image-small {
        position: absolute;

        top: 52.57vw;
        left: 46%;

        width: 46.11vw;
        height: 25.9vw;

        margin: 0;

        overflow: hidden;
    }


    /* FIRST TEXT */

    .experience-text-left {
        position: absolute;

        top: 63.89vw;
        left: 40%;

        width: max-content;

        margin: 0;

        --reveal-x: -100%;
    }

    .experience-text-left p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* MEDIUM IMAGE */

    .experience-image-medium {
        position: absolute;

        top: 93.47vw;
        left: 9.5%;

        width: 59.31vw;
        height: 33.33vw;

        margin: 0;

        overflow: hidden;
    }


    /* COUNTER */

    .experience-counter {
        position: absolute;

        top: 128.47vw;
        left: 65%;

        margin: 0;

        --reveal-x: -50%;

        font-size: 1.667vw;
        line-height: 2.222vw;
    }


    /* CENTER TEXT */

    .experience-text-center {
        position: absolute;

        top: 145.3vw;
        left: 65%;

        width: max-content;

        margin: 0;

        --reveal-x: -50%;
    }

    .experience-text-center p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* FULL WIDTH IMAGE */

    .experience-image-full {
        position: absolute;

        top: 158.13vw;
        left: 0;

        width: 100%;
        height: 56.18vw;

        margin: 0;

        overflow: hidden;
    }


    /* FINAL TEXT */

    .experience-final-text {
        position: absolute;

        top: 227.99vw;
        left: 0;

        width: 100%;

        margin: 0;

        text-align: center;
    }

    .experience-final-text p {
        font-size: 2.222vw;
        line-height: 3.056vw;
    }

    .experience-final-text p:first-child {
        transform: translateX(-4.4vw);
    }

    .experience-final-text p:last-child {
        transform: translateX(4.4vw);
    }


    /* NAVIGATION */

    .experience-navigation {
        position: absolute;

        top: 272.01vw;
        left: 8.33%;

        width: 83.34%;
        height: 13.19vw;

        margin: 0;

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;

        font-size: 1.944vw;
        line-height: 2.222vw;
    }

/* =====================================================
   SUNNY ROOFTOP LUNCH — MOBILE
===================================================== */

.sunny-page {
    background: #f2f1ed;
}

.sunny-content {
    height: 286.11vw;
}

.sunny-intro {
    height: 35.76vw;
}

.sunny-intro .experience-intro-content {
    left: 12.5%;
}

.sunny-intro .experience-intro-content h1 {
    top: 13.13vw;

    font-size: 4.44vw;
}

.sunny-intro .experience-intro-content p {
    top: 23.75vw;

    font-size: 2.22vw;
}

.sunny-image-1 {
    top: 0;
    left: 0;

    width: 100%;
    height: 39.79vw;
}

.sunny-text-1 {
    top: 43.54vw;
    left: 56.2%;
}

.sunny-image-2 {
    top: 61.25vw;
    width: 49.24%;
    height: 36.88vw;
}

.sunny-text-2 {
    top: 78.65vw;
}

.sunny-image-3 {
    top: 106.32vw;
    left: 32.5%;

    width: 67.5%;
    height: 39.24vw;
}

.sunny-text-3 {
    top: 143.68vw;
}

.sunny-image-4 {
    top: 160.63vw;

    width: 74.58%;
    height: 41.94vw;
}

.sunny-text-4 {
    top: 203.96vw;
}

.sunny-navigation {
    top: 282.29vw;
}


}


/* =========================================================
   SUNNY ROOFTOP LUNCH
========================================================= */

.sunny-page {
    background: #f2f1ed;
    color: #000;
}

.sunny-intro {
    height: 515px;
    background: #f2f1ed;
}

.sunny-intro .experience-intro-content {
    left: 12.5%;
    top: 0;
}

.sunny-intro .experience-intro-content h1 {
    top: 189px;
    left: 0;

    color: #000;

    font-size: 64px;
    font-weight: 500;
}

.sunny-intro .experience-intro-content p {
    top: 342px;
    left: 0;

    color: #000;

    font-size: 32px;
    font-weight: 400;
}


/* CONTENT */

.sunny-content {
    position: relative;
    width: 100%;
    max-width: none;
    height: 3790px;
    margin: 0;
    padding: 0;
    background: #f2f1ed;
}

/* IMAGES */

.sunny-image-1 {
    position: absolute;

    top: 0;
    left: 0;

    width: 100vw;
    height: 573px;

    overflow: hidden;
}

.sunny-image-1 img {
    position: absolute;

    width: 100%;
    height: auto;

    left: 0;
    top: 50%;

    transform: translateY(-50%);

    object-fit: contain;
}


/* DELICIOUS FOOD */

.sunny-text-1 {
    position: absolute;

    top: 628px;
    left: 50%;

    width: max-content;

    --reveal-x: -50%;
}

.sunny-text-1 p,
.sunny-text-2 p,
.sunny-text-3 p,
.sunny-text-4 p {
    margin: 0;

    color: #000;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}


/* IMAGE 2 */

.sunny-image-2 {
    position: absolute;

    top: 882px;
    left: 0;

    width: 49.24%;
    height: 531px;

    overflow: hidden;
}

.sunny-image-2 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* BLUE SKY */

.sunny-text-2 {
    position: absolute;

    top: 1132px;
    left: 79.44%;

    transform: translateX(-100%);

    width: max-content;
}


/* IMAGE 3 */

.sunny-image-3 {
    position: absolute;

    top: 1531px;
    left: 32.5%;

    width: 67.5%;
    height: 565px;

    overflow: hidden;
}

.sunny-image-3 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* STUNNING VIEWS */

.sunny-text-3 {
    position: absolute;

    top: 2069px;
    left: 14.41%;

    transform: translateX(-50%);

    width: max-content;
}


/* IMAGE 4 */

.sunny-image-4 {
    position: absolute;

    top: 2303px;
    left: 12.71%;

    width: 74.58%;
    height: 604px;

    overflow: hidden;
}

.sunny-image-4 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* PERFECT COMPANION */

.sunny-text-4 {
    position: absolute;

    top: 2930px;
    left: 73.06%;

    transform: translateX(-50%);

    width: max-content;

    text-align: center;
}


/* NAVIGATION */

.sunny-navigation {
    top: 3550px;

    color: #000;
}

.sunny-navigation a {
    color: #000;
}


/* REVEAL */

.sunny-page .reveal {
    opacity: 0;
    transform:
        translateX(var(--reveal-x, 0))
        translateY(25px);

    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.sunny-page .reveal.visible {
    opacity: 1;
    transform:
        translateX(var(--reveal-x, 0))
        translateY(0);
}

/* =========================================================
   SUNNY ROOFTOP LUNCH — MOBILE FIX
========================================================= */

@media (max-width: 700px) {

    .sunny-intro {
        height: 43vw;
    }

    .sunny-intro .experience-intro-content {
        position: absolute;
        left: 12.5%;
        top: 25vw;
        bottom: auto;
    }

    .sunny-intro .experience-intro-content h1 {
        position: static;
        font-size: 4.2vw;
        line-height: 1.1;
    }

    .sunny-intro .experience-intro-content p {
        position: static;
        margin-top: 4vw;
        font-size: 2vw;
        line-height: 1.2;
    }


    .sunny-content {
        height: 287vw;
        max-width: none;
        width: 100%;
    }

    .sunny-text-1 {
        top: 43.54vw;
        left: 50%;
        transform: translateX(-100%);
    }

    .sunny-image-2 {
        top: 61.25vw;
        left: 0;
        width: 49.24%;
        height: 36.88vw;
    }

    .sunny-text-2 {
        top: 78.65vw;
        left: 75%;
        transform: translateX(-100%);
    }

    .sunny-image-3 {
        top: 106.32vw;
        left: 32.5%;
        width: 67.5%;
        height: 39.24vw;
    }

    .sunny-text-3 {
        top: 142vw;
        left: 13%;
        transform: translateX(-50%);
    }

    .sunny-image-4 {
        top: 160.63vw;
        left: 12.71%;
        width: 74.58%;
        height: 41.94vw;
    }

    .sunny-text-4 {
        top: 205vw;
        left: 62%;
        transform: translateX(-50%);
    }

    .sunny-navigation {
        top: calc(100% - 13.19vw);
    }

html:has(body.sunny-page),
body.sunny-page {
    touch-action: pan-y;
}

}


/* =========================================================
   SUNNY ROOFTOP LUNCH — MOBILE TYPOGRAPHY FIX
========================================================= */

@media (max-width: 700px) {

    /* TITLE + DATE */

    .sunny-intro .experience-intro-content h1 {
        font-size: 4.2vw;
        line-height: 1.1;
    }

    .sunny-intro .experience-intro-content p {
        font-size: 2vw;
        line-height: 1.2;
    }


    /* ALL CAPTIONS */

    .sunny-text-1 p,
    .sunny-text-2 p,
    .sunny-text-3 p,
    .sunny-text-4 p {
        font-size: 1.944vw;
        line-height: 2.222vw;
        font-weight: 300;
    }


    /* KEEP FIRST IMAGE FULL WIDTH */

    .sunny-image-1 {
        left: 0;
        width: 100%;
        transform: none;
    }
}


@media (max-width: 700px) {

    .sunny-page {
        scroll-behavior: smooth;
    }

    .sunny-page .sunny-content {
        scroll-snap-align: none;
    }

    html:has(body.sunny-page) {
        scroll-behavior: auto !important;
        scroll-snap-type: none !important;
    }

    body.sunny-page {
        scroll-snap-type: none !important;
    }

    body.sunny-page * {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }

    html,
    body {
        scroll-snap-type: none !important;
    }
}




/* =========================================================
   ORTHODOX DISTRICT
========================================================= */

.orthodox-page {
    background: #0e0e0c;
    color: white;
}


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

.orthodox-intro {
    position: relative;
    height: 705px;
    background: #0e0e0c;
    overflow: hidden;
}

.orthodox-intro-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;
    overflow: hidden;
}

.orthodox-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.orthodox-intro-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 100%;

    background: linear-gradient(
        to right,
        rgba(14,14,12,0) 0%,
        rgba(14,14,12,0.35) 35%,
        #0e0e0c 100%
    );
}

.orthodox-intro .experience-intro-content {
    position: absolute;
    top: 0;
    left: 40%;
    width: 50%;
    text-align: right;
}

.orthodox-intro .experience-intro-content h1 {
    position: absolute;
    top: 236px;
    right: 0;

    margin: 0;

    font-size: 64px;
    line-height: 1;
    font-weight: 500;

    white-space: nowrap;
}

.orthodox-intro .experience-intro-content p {
    position: absolute;
    top: 389px;
    right: 0;

    margin: 0;

    font-size: 32px;
    line-height: 1;
    font-weight: 400;

    letter-spacing: 0.12em;
    white-space: nowrap;
}


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

.orthodox-content {
    position: relative;

    width: 100%;
    height: 4000px;

    max-width: none;
    margin: 0;
    padding: 0;
}


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

.orthodox-description {
    position: absolute;

    top: -30px;
    right: 17.5%;

    width: 500px;

    margin: 0;

    text-align: right;
}

.orthodox-description p {
    margin: 0;

    font-size: 26px;
    line-height: 28px;
    font-weight: 300;
}


/* =========================================================
   FIRST TEXT
========================================================= */

.orthodox-text-1 {
    position: absolute;

    top: 355px;
    left: 20%;

    width: max-content;

    margin: 0;

    --reveal-x: -80px;
}

.orthodox-text-1 p {
    margin: 0;

    font-size: 28px;
    line-height: 28px;
    font-weight: 300;
}


/* =========================================================
   IMAGE 2
========================================================= */

.orthodox-image-1 {
    position: absolute;

    top: 765px;
    left: 19%;

    width: 50%;
    height: 405px;

    margin: 0;

    overflow: hidden;
}

.orthodox-image-1 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   COUNTER
========================================================= */

.orthodox-counter {
    position: absolute;

    top: 1145px;
    left: 12.3%;

    margin: 0;

    font-size: 28px;
    line-height: 28px;
    font-weight: 300;

    --reveal-x: -40px;
}


/* =========================================================
   IMAGE 3
========================================================= */

.orthodox-image-2 {
    position: absolute;

    top: 1265px;
    left: 7.5%;

    width: 49.5%;
    height: 430px;

    margin: 0;

    overflow: hidden;
}

.orthodox-image-2 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   SILHOUETTE
========================================================= */

.orthodox-silhouette {
    position: absolute;

    top: 750px;
    right: -18%;

    width: 76%;
    height: 1000px;

    margin: 0;

    opacity: 0.3;

    z-index: 1;
    overflow: visible;
}

.orthodox-silhouette img {
    width: 270%;
    height: 150%;

    object-fit: contain;
    object-position: left center;

    opacity: 0.2;
    filter: brightness(0.5);
}


/* =========================================================
   CENTER TEXT
========================================================= */

.orthodox-text-2 {
    position: absolute;

    top: 1900px;
    left: 50%;

    width: max-content;

    margin: 0;

    text-align: center;

    --reveal-x: -50%;

    z-index: 2;
}

.orthodox-text-2 p {
    margin: 0;

    font-size: 28px;
    line-height: 28px;
    font-weight: 300;
}


/* =========================================================
   FULL WIDTH IMAGE
========================================================= */

.orthodox-image-full {
    position: absolute;

    top: 2100px;
    left: 0;

    width: 100%;
    height: 809px;

    margin: 0;

    overflow: hidden;
}

.orthodox-image-full img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.orthodox-final-text {
    position: absolute;

    top: 3000px;
    left: 0;

    width: 100%;

    margin: 0;

    text-align: right;
    padding-right: 15%;
}

.orthodox-final-text p {
    margin: 0;

    font-size: 32px;
    line-height: 28px;
    font-weight: 300;
}


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

.orthodox-navigation {
    position: absolute;

    top: 3810px;
    left: 8.33%;

    width: 83.34%;
    height: 190px;

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    font-size: 28px;
    line-height: 32px;
    font-weight: 300;
}

.orthodox-navigation a {
    display: flex;
    align-items: center;
    color: white;
}

.orthodox-navigation .previous {
    justify-content: flex-start;
}

.orthodox-navigation .back {
    justify-content: center;
    text-decoration: underline;
}

.orthodox-navigation .next {
    justify-content: flex-end;
}


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

@media (max-width: 700px) {

    /* -----------------------------------------------------
       INTRO
    ----------------------------------------------------- */

    .orthodox-intro {
        height: 43vw;
    }

    .orthodox-intro-image {
        left: 0;
        width: 48%;
        height: 100%;
    }

    .orthodox-intro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .orthodox-intro-gradient {
        left: 0;
        width: 48%;
        height: 100%;

        background: linear-gradient(
            to right,
            rgba(14,14,12,0) 0%,
            rgba(14,14,12,0.35) 35%,
            #0e0e0c 100%
        );
    }

    .orthodox-intro .experience-intro-content {
        top: 0;
        left: 40%;
        width: 50%;

        text-align: right;
    }

    .orthodox-intro .experience-intro-content h1 {
        top: 13.1vw;
        right: 0;

        font-size: 4.44vw;
        line-height: 1;

        white-space: nowrap;
    }

    .orthodox-intro .experience-intro-content p {
        top: 23.75vw;
        right: 0;

        font-size: 2.22vw;
        line-height: 1;

        letter-spacing: 0.12em;
    }


    /* -----------------------------------------------------
       CONTENT
    ----------------------------------------------------- */

    .orthodox-content {
        width: 100%;
        height: 259vw;

        max-width: none;
        margin: 0;
        padding: 0;

        position: relative;
    }


    /* DESCRIPTION */

    .orthodox-description {
        top: 10.5vw;
        right: 16.5%;

        width: 35vw;

        text-align: right;
    }

    .orthodox-description p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* FIRST TEXT */

    .orthodox-text-1 {
        top: 30vw;
        left: 16%;

        width: max-content;

        --reveal-x: -8vw;
    }

    .orthodox-text-1 p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* IMAGE 2 */

    .orthodox-image-1 {
        top: 50vw;
        left: 22.5%;

        width: 50%;
        height: 28vw;
    }


    /* COUNTER */

    .orthodox-counter {
        top: 74vw;
        left: 12.3%;

        font-size: 1.667vw;
        line-height: 2.222vw;

        --reveal-x: -4vw;
    }


    /* IMAGE 3 */

    .orthodox-image-2 {
        top: 88vw;
        left: 8%;

        width: 49.5%;
        height: 31vw;
    }


    /* SILHOUETTE */

    .orthodox-silhouette {
        top: 72vw;
        right: 0;

        width: 38%;
        height: 70vw;

        opacity: 0.8;

        z-index: 1;
    }   


    /* CENTER TEXT */

    .orthodox-text-2 {
        top: 125vw;
        left: 50%;

        width: max-content;

        transform: translateX(-50%);

        --reveal-x: -50%;
    }

    .orthodox-text-2 p {
        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* FULL IMAGE */

    .orthodox-image-full {
        top: 138vw;
        left: 0;

        width: 100%;
        height: 56.18vw;
    }


    /* FINAL TEXT */

    .orthodox-final-text {
        top: 200vw;
        right: 0;
        left: 0;

        width: 100%;

        padding-right: 10%;

        text-align: right;
    }

    .orthodox-final-text p {
        font-size: 2.222vw;
        line-height: 3.056vw;
    }


    /* NAVIGATION */

    .orthodox-navigation {
        top: calc(100% - 13.19vw);
        left: 8.33%;

        width: 83.34%;
        height: 13.19vw;

        font-size: 1.944vw;
        line-height: 2.222vw;
    }


    /* -----------------------------------------------------
       TOUCH / SCROLL
    ----------------------------------------------------- */

    html:has(body.orthodox-page),
    body.orthodox-page {
        touch-action: pan-y;
    }
}


/* =========================================================
   ORTHODOX — MOBILE FINAL ADJUSTMENTS
========================================================= */

@media (max-width: 700px) {

    /* HERO FULL SCREEN */

    .orthodox-intro {
        height: 100svh;
    }

    .orthodox-intro-image {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .orthodox-intro-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .orthodox-intro-gradient {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        background:
            linear-gradient(
                to bottom,
                rgba(14,14,12,0) 20%,
                rgba(14,14,12,0.15) 50%,
                rgba(14,14,12,0.80) 78%,
                #0e0e0c 100%
            );
    }

    .orthodox-intro .experience-intro-content {
        left: 20px;
        right: 20px;
        bottom: 50px;
        top: auto;

        width: auto;

        text-align: left;
    }

    .orthodox-intro .experience-intro-content h1 {
        position: static;

        font-size: 9vw;
        line-height: 1.05;

        white-space: nowrap;
    }

    .orthodox-intro .experience-intro-content p {
        position: static;

        margin-top: 14px;

        font-size: 3.2vw;
        line-height: 1.2;

        letter-spacing: 0.08em;
    }
}



@media (max-width: 700px) {

    /* =====================================================
       MOBILE TYPOGRAPHY — ALL EXPERIENCE PAGES
    ===================================================== */

    .experience-description p,
    .experience-text p,
    .experience-counter,
    .experience-final-text p,
    .sunny-text-1 p,
    .sunny-text-2 p,
    .sunny-text-3 p,
    .sunny-text-4 p,
    .orthodox-text-1 p,
    .orthodox-text-2 p {
        font-size: 3.4vw;
        line-height: 1.35;
    }

    .experience-navigation,
    .sunny-navigation,
    .orthodox-navigation {
        font-size: 3.2vw;
        line-height: 1.3;
    }

}


@media (max-width: 700px) {

    /* =====================================================
       SUNNY ROOFTOP — MOBILE HERO
    ===================================================== */

    .sunny-intro {
        position: relative;

        height: 56.25vw;

        background: transparent;

        z-index: 2;
        overflow: hidden;
    }

    /* PHOTO */

    .sunny-image-1 {
        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 56.25vw;

        z-index: 1;

        overflow: hidden;
    }

    .sunny-image-1 img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;
    }


    /* DARK GRADIENT OVER PHOTO */

    .sunny-intro::after {
        content: "";

        position: absolute;

        inset: 0;

        z-index: 2;

        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,0) 35%,
                rgba(0,0,0,0.08) 55%,
                rgba(0,0,0,0.45) 100%
            );

        pointer-events: none;
    }


    /* TITLE */

    .sunny-intro .experience-intro-content {
        position: absolute;

        left: 20px;
        right: 20px;

        top: auto;
        bottom: 7vw;

        width: auto;

        z-index: 3;

        text-align: left;
    }

    .sunny-intro .experience-intro-content h1 {
        position: static;

        font-size: 9vw;
        line-height: 1.05;

        white-space: normal;

        color: #000;
    }

    .sunny-intro .experience-intro-content p {
        position: static;

        margin-top: 14px;

        font-size: 3.2vw;
        line-height: 1.2;

        color: #000;
    }


    /* =====================================================
       CONTENT
       First image is now the hero, so remove it from flow
    ===================================================== */

    .sunny-content {
        position: relative;

        height: 230.5vw;
    }

    .sunny-image-1 {
        /* prevent the original content position */
        transform: none;
    }


    /* =====================================================
       REST OF THE EXPERIENCE
    ===================================================== */

    .sunny-text-1 {
        top: 7vw;
    }

    .sunny-image-2 {
        top: 25vw;
    }

    .sunny-text-2 {
        top: 42vw;
    }

    .sunny-image-3 {
        top: 69vw;
    }

    .sunny-text-3 {
        top: 105vw;
    }

    .sunny-image-4 {
        top: 123vw;
    }

    .sunny-text-4 {
        top: 168vw;
    }

    .sunny-navigation {
        top: calc(100% - 13.19vw);
    }
}

@media (max-width: 700px) {

    .experience-page:not(.sunny-page):not(.orthodox-page) 
    .experience-intro-image img {
        object-position: center 42%;
    }

}



/* =========================================================
   ANTWERP W/ BERNAT
========================================================= */

.bernat-page {
    background: #0e0e0c;
    color: white;
}


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

.bernat-intro {
    position: relative;

    width: 100%;
    height: 722px;

    background: #0e0e0c;
    overflow: hidden;
}


/* HERO IMAGE */

.bernat-intro-image {
    position: absolute;

    top: 0;
    left: 32.5%;

    width: 67.5%;
    height: 722px;

    overflow: hidden;

    opacity: 0.8;
}

.bernat-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* HERO GRADIENT */

.bernat-intro-gradient {
    position: absolute;

    top: 0;
    left: 32.5%;

    width: 67.5%;
    height: 722px;

    background: linear-gradient(
        to right,
        #0e0e0c 0%,
        rgba(14,14,12,0.72) 25%,
        rgba(14,14,12,0) 48%
    );

    pointer-events: none;
}


/* HERO TEXT */

.bernat-intro .experience-intro-content {
    position: absolute;

    top: 0;
    left: 9.1%;

    width: auto;

    z-index: 2;
}

.bernat-intro .experience-intro-content h1 {
    position: absolute;

    top: 320px;
    left: 0;

    margin: 0;

    font-size: 64px;
    line-height: 1;

    font-weight: 500;

    white-space: nowrap;
}

.bernat-intro .experience-intro-content p {
    position: absolute;

    top: 475px;
    left: 0;

    margin: 0;

    font-size: 32px;
    line-height: 32px;

    font-weight: 400;

    letter-spacing: 0.12em;

    white-space: nowrap;
}


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

.bernat-content {
    position: relative;

    width: 100%;
    max-width: 1440px;

    height: 7701px;

    margin: 0 auto;
}


/* =========================================================
   TEXT 1
========================================================= */

.bernat-text-1 {
    position: absolute;

    top: 143px;
    left: 63.06%;

    width: max-content;

    transform: translateX(-100%);

    text-align: right;

    --reveal-x: -100%;
}

.bernat-text-1 p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;

    font-weight: 300;
}


/* =========================================================
   IMAGE 1
========================================================= */

.bernat-image-1 {
    position: absolute;

    top: 277px;
    left: 16.11%;

    width: 67.78%;
    height: 549px;

    overflow: hidden;
}

.bernat-image-1 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TEXT 2
========================================================= */

.bernat-text-2 {
    position: absolute;

    top: 929px;
    left: 17.64%;

    width: max-content;

    text-align: left;
}

.bernat-text-2 p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;

    font-weight: 300;
}


/* =========================================================
   IMAGE 2
========================================================= */

.bernat-image-2 {
    position: absolute;

    top: 1063px;
    left: 47.5%;

    width: 36.39%;
    height: 385px;

    overflow: hidden;
}

.bernat-image-2 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   COUNTERS
========================================================= */

.bernat-counter {
    position: absolute;

    color: #7a7a7a;

    font-family: monospace;

    font-size: 24px;
    line-height: 32px;

    font-weight: 400;
}

.bernat-counter-1 {
    top: 1469px;
    left: 80.38%;

    transform: translateX(-50%);

    --reveal-x: -50%;
}

.bernat-counter-2 {
    top: 2077px;
    left: 19.62%;

    transform: translateX(-50%);

    --reveal-x: -50%;
}


/* =========================================================
   IMAGE 3
========================================================= */

.bernat-image-3 {
    position: absolute;

    top: 1651px;
    left: 16.11%;

    width: 38.06%;
    height: 403px;

    overflow: hidden;
}

.bernat-image-3 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   FULL WIDTH IMAGE
========================================================= */

.bernat-image-full {
    position: absolute;

    top: 2453px;
    left: 0;

    width: 100%;
    height: 809px;

    overflow: hidden;
}

.bernat-image-full img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TEXT 3
========================================================= */

.bernat-text-3 {
    position: absolute;

    top: 4119px;
    left: 23.33%;

    width: max-content;

    transform: translateX(-50%);

    text-align: center;

    --reveal-x: -50%;
}

.bernat-text-3 p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;

    font-weight: 300;
}


/* =========================================================
   IMAGE 4
========================================================= */

.bernat-image-4 {
    position: absolute;

    top: 3529px;
    left: 26.81%;

    width: 61.74%;
    height: 500px;

    overflow: hidden;
}

.bernat-image-4 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   IMAGE 5
========================================================= */

.bernat-image-5 {
    position: absolute;

    top: 4375px;
    left: 18.96%;

    width: 46.04%;
    height: 497px;

    overflow: hidden;
}

.bernat-image-5 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   TEXT 4
========================================================= */

.bernat-text-4 {
    position: absolute;

    top: 4905px;
    left: 50%;

    width: max-content;

    transform: translateX(-50%);

    text-align: center;

    --reveal-x: -50%;
}

.bernat-text-4 p {
    margin: 0;

    font-size: 28px;
    line-height: 32px;

    font-weight: 300;
}


/* =========================================================
   IMAGE 6
========================================================= */

.bernat-image-6 {
    position: absolute;

    top: 4970px;
    left: 34.93%;

    width: 46.04%;
    height: 497px;

    overflow: hidden;
}

.bernat-image-6 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.bernat-image-final {
    position: absolute;

    top: 5985px;
    left: 9.93%;

    width: 50%;
    height: 961px;

    overflow: hidden;
}

.bernat-image-final img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


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

.bernat-final-text {
    position: absolute;

    top: 6882px;
    left: 87.78%;

    width: max-content;

    transform: translateX(-100%);

    text-align: right;

    --reveal-x: -100%;
}

.bernat-final-text p {
    margin: 0;

    font-size: 32px;
    line-height: 32px;

    font-weight: 300;
}


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

.bernat-navigation {
    position: absolute;

    top: 7511px;
    left: 8.33%;

    width: 83.34%;
    height: 190px;

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    align-items: center;

    font-size: 28px;
    line-height: 32px;

    font-weight: 300;
}

.bernat-navigation a {
    display: flex;
    align-items: center;
}

.bernat-navigation .previous {
    justify-content: flex-start;
}

.bernat-navigation .back {
    justify-content: center;
    text-decoration: underline;
}

.bernat-navigation .next {
    justify-content: flex-end;
}


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

@media (max-width: 700px) {


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

    .bernat-intro {
        height: 100svh;
    }

    .bernat-intro-image {
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        opacity: 0.8;
    }

    .bernat-intro-image img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center center;
    }

    .bernat-intro-gradient {
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        background:
            linear-gradient(
                to bottom,
                rgba(14,14,12,0) 20%,
                rgba(14,14,12,0.15) 48%,
                rgba(14,14,12,0.82) 78%,
                #0e0e0c 100%
            );
    }

    .bernat-intro .experience-intro-content {
        position: absolute;

        left: 20px;
        right: 20px;

        top: auto;
        bottom: 50px;

        width: auto;

        z-index: 2;
    }

    .bernat-intro .experience-intro-content h1 {
        position: static;

        font-size: 9vw;
        line-height: 1.05;

        white-space: normal;
    }

    .bernat-intro .experience-intro-content p {
        position: static;

        margin-top: 14px;

        font-size: 3.2vw;
        line-height: 1.2;

        letter-spacing: 0.08em;
    }


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

    .bernat-content {
        width: 100%;
        max-width: none;

        height: 640vw;

        margin: 0;
        padding: 0;

        position: relative;
    }


    /* =====================================================
       TEXT 1
    ===================================================== */

    .bernat-text-1 {
        top: 12vw;
        left: 50%;

        width: 78%;

        transform: translateX(-50%);

        text-align: right;

        --reveal-x: -50%;
    }

    .bernat-text-1 p {
        font-size: 3.4vw;
        line-height: 1.35;
    }


    /* =====================================================
       IMAGE 1
    ===================================================== */

    .bernat-image-1 {
        top: 30vw;
        left: 7.5%;

        width: 85%;
        height: 47.8vw;
    }


    /* =====================================================
       TEXT 2
    ===================================================== */

    .bernat-text-2 {
        top: 84vw;
        left: 50%;

        width: 78%;

        transform: translateX(-50%);

        text-align: left;

        --reveal-x: -50%;
    }

    .bernat-text-2 p {
        font-size: 3.4vw;
        line-height: 1.35;
    }


    /* =====================================================
       IMAGE 2
    ===================================================== */

    .bernat-image-2 {
        top: 104vw;
        left: 46%;

        width: 47%;
        height: 34.6vw;
    }


    /* =====================================================
       COUNTER 1
    ===================================================== */

    .bernat-counter-1 {
        top: 140vw;
        left: 88%;

        transform: translateX(-100%);

        --reveal-x: -100%;

        font-size: 2.8vw;
        line-height: 1.3;
    }


    /* =====================================================
       IMAGE 3
    ===================================================== */

    .bernat-image-3 {
        top: 153vw;
        left: 7.5%;

        width: 47%;
        height: 34.6vw;
    }


    /* =====================================================
       COUNTER 2
    ===================================================== */

    .bernat-counter-2 {
        top: 191vw;
        left: 12%;

        transform: none;

        --reveal-x: 0;

        font-size: 2.8vw;
        line-height: 1.3;
    }


    /* =====================================================
       FULL WIDTH IMAGE
    ===================================================== */

    .bernat-image-full {
        top: 209vw;
        left: 0;

        width: 100%;
        height: 56.18vw;
    }


    /* =====================================================
       TEXT 3
    ===================================================== */

    .bernat-text-3 {
        top: 280vw;
        left: 50%;

        width: 85%;

        transform: translateX(-50%);

        text-align: center;

        --reveal-x: -50%;
    }

    .bernat-text-3 p {
        font-size: 3.4vw;
        line-height: 1.35;
    }


    /* =====================================================
       IMAGE 4
    ===================================================== */

    .bernat-image-4 {
        top: 301vw;
        left: 10%;

        width: 80%;
        height: 45vw;
    }


    /* =====================================================
       IMAGE 5
    ===================================================== */

    .bernat-image-5 {
        top: 358vw;
        left: 8%;

        width: 68%;
        height: 51vw;
    }


    /* =====================================================
       TEXT 4
    ===================================================== */

    .bernat-text-4 {
        top: 417vw;
        left: 50%;

        width: 85%;

        transform: translateX(-50%);

        text-align: center;

        --reveal-x: -50%;
    }

    .bernat-text-4 p {
        font-size: 3.4vw;
        line-height: 1.35;
    }


    /* =====================================================
       IMAGE 6
    ===================================================== */

    .bernat-image-6 {
        top: 435vw;
        left: 28%;

        width: 64%;
        height: 48vw;
    }


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

    .bernat-image-final {
        top: 500vw;
        left: 9%;

        width: 55%;
        height: 73.4vw;
    }


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

    .bernat-final-text {
        top: 580vw;
        left: 90%;

        width: 48%;

        transform: translateX(-100%);

        text-align: right;

        --reveal-x: -100%;
    }

    .bernat-final-text p {
        font-size: 3.4vw;
        line-height: 1.35;
    }


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

    .bernat-navigation {
        top: calc(100% - 13.19vw);

        left: 8.33%;

        width: 83.34%;
        height: 13.19vw;

        font-size: 3.2vw;
        line-height: 1.3;
    }


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

    html:has(body.bernat-page),
    body.bernat-page {
        touch-action: pan-y;

        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    body.bernat-page * {
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }

}