/* GLOBAL */

:root {
    --green-dark: #176b3a;
    --green-main: #31b86b;
    --green-bright: #8eff7a;
    --green-soft: #dffff0;
    --green-mint: #b9ffd4;
    --aqua-glow: #7fffee;
    --white-gloss: rgba(255,255,255,0.85);
    --text-dark: #17422a;
}


body {
    margin: 0;
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(220, 255, 235, 0.25),
            rgba(23, 107, 58, 0.28)
        ),
        url("images/backgroundgreen.jpg");

    background-size: 900px auto;
    background-repeat: repeat;
    background-position: top center;
    background-attachment: fixed;

    font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
    text-align: center;
    padding-top: 80px;
    color: #17422a;

cursor: url("cursors/normal-select.cur"), auto;

}

/* CURSORS */
a,
button,
.nav-card,
.nav-button,
.subpage-dock a,
.photo-choice-card,
.carousel-arrow,
.carousel-photo,
.music-button,
.window-buttons button {
    cursor: url("cursors/link-select.cur"), pointer;
}

input,
textarea,
[contenteditable="true"] {
    cursor: url("cursors/text-select.cur"), text;
}

h1 {
    color: #5a8fd8;

    font-size: 3rem;

    text-shadow: 2px 2px 5px white;
}

p {
    color: #2f5f44;
    margin-bottom: 25px;
}


/*HTML, BODY */
html {
    min-height: 100%;
    background-color: #176b3a;
}

body {
    min-height: 100vh;
    min-height: 100dvh;

    margin: 0;
    padding: 0;

    background-color: #176b3a;

    background-image:
        linear-gradient(
            rgba(223,255,240,0.18),
            rgba(23,107,58,0.22)
        ),
        url("images/backgroundgreen.jpg");

    background-size: 900px auto;
    background-repeat: repeat;
    background-position: top center;
    background-attachment: fixed;
}

@media (max-width: 850px) {
    body {
        background-attachment: scroll;
        background-size: 650px auto;
        background-position: top center;
        background-repeat: repeat;
    }

    .home-window {
        min-height: calc(100dvh - 40px);
    }
}



/* HOMEPAGE DESKTOP PORTAL */

.home-window {
    position: relative;
    z-index: 2;
}

.home-dashboard {
    padding: 30px;

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;

    align-items: start;
}

.home-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.profile-widget,
.home-welcome-card {
    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.profile-widget {
    padding: 24px 20px;
}

.profile-widget img {
    width: 140px;
    height: 140px;

    object-fit: cover;

    border-radius: 50%;

    border: 6px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 10px 22px rgba(0,80,35,0.22);

    margin-bottom: 16px;
}

.home-logo {
    margin: 0 0 8px;

    color: #176b3a;

    font-size: 2.4rem;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.home-tagline {
    margin: 0 0 16px;

    color: #2f5f44;

    font-weight: bold;
    font-size: 14px;
}

.status-bubble {
    display: inline-block;

    padding: 9px 14px;

    border-radius: 999px;

    color: #176b3a;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.92),
            rgba(223,255,240,0.78)
        );

    border: 2px solid white;

    font-size: 13px;
    font-weight: bold;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.12);
}

.home-music-widget {
    width: auto;
    margin: 0;
}

.home-main {
    min-width: 0;
}

.home-welcome-card {
    padding: 24px;

    margin-bottom: 24px;

    text-align: left;
}

.home-welcome-card h2 {
    margin: 0 0 10px;

    color: #176b3a;

    font-size: 2rem;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.45);
}

.home-welcome-card p {
    margin: 0;

    color: #2f5f44;

    line-height: 1.5;
}

.home-nav-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 18px;
}

.home-nav-card {
    position: relative;

    min-height: 118px;

    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;

    align-items: center;

    padding: 18px 20px;

    border-radius: 26px;

    text-decoration: none;
    text-align: left;

    color: #17422a;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.65) 15%,
            rgba(199,255,218,0.85) 48%,
            rgba(107,232,141,0.82) 100%
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        inset 0 -5px 12px rgba(0,100,45,0.18),
        0 7px 16px rgba(0,85,35,0.18);

    overflow: hidden;

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.home-nav-card::before {
    content: "";

    position: absolute;
    top: 6px;
    left: 10px;
    right: 10px;

    height: 38%;

    border-radius: 20px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.75),
            rgba(255,255,255,0.12)
        );

    pointer-events: none;
}

.home-nav-card:hover {
    transform: translateY(-4px) scale(1.03);

    filter: brightness(1.08) saturate(1.15);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,1),
        inset 0 -5px 12px rgba(0,100,45,0.18),
        0 12px 24px rgba(0,85,35,0.28);
}

.home-nav-icon {
    grid-row: 1 / 3;

    position: relative;
    z-index: 1;

    width: 52px;
    height: 52px;

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

    font-size: 30px;

    border-radius: 18px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.2);
}

/* HOMEPAGE NAV PNG ICONS */

.home-nav-icon img {
  width: 34px;
  height: 34px;

  display: block;

  object-fit: contain;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.75))
    drop-shadow(1px 1px 2px rgba(0,80,35,0.35));

  pointer-events: none;
}

@media (max-width: 850px) {
  .home-nav-icon img {
    width: 30px;
    height: 30px;
  }
}

.home-nav-icon img[src$="book.png"] {
  width: 38px;
  height: 32px;
}

.home-nav-icon img[src$="videocamera.png"] {
  width: 38px;
  height: 34px;
}

.home-nav-icon img[src$="bed.png"] {
  width: 37px;
  height: 34px;
}


.home-nav-title {
    position: relative;
    z-index: 1;

    color: #176b3a;

    font-size: 20px;
    font-weight: bold;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.85);
}

.home-nav-desc {
    position: relative;
    z-index: 1;

    color: #2f5f44;

    font-size: 13px;

    margin-top: 4px;
}

.bedroom-home-card {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.98) 0%,
            rgba(223,255,240,0.8) 18%,
            rgba(142,255,122,0.9) 50%,
            rgba(49,184,107,0.9) 100%
        );
}


/* MOBILE I THINK */

@media (max-width: 850px) {
    .home-dashboard {
        grid-template-columns: 1fr;

        padding: 22px 14px;
    }

    .home-sidebar {
        gap: 18px;
    }

    .profile-widget img {
        width: 120px;
        height: 120px;
    }

    .home-logo {
        font-size: 2rem;
    }

    .home-welcome-card {
        text-align: center;
    }

    .home-welcome-card h2 {
        font-size: 1.7rem;
    }

    .home-nav-grid {
        grid-template-columns: 1fr;
    }

    .home-nav-card {
        min-height: 105px;
        grid-template-columns: 52px 1fr;
        padding: 16px;
    }

    .home-nav-icon {
        width: 46px;
        height: 46px;
        font-size: 26px;
    }

    .home-nav-title {
        font-size: 18px;
    }

    .home-nav-desc {
        font-size: 12px;
    }
}

.music-button {
    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dffff0 35%,
            #31b86b
        );

    border: 2px solid white;

    border-radius: 999px;

    padding: 10px 22px;

    color: white;
    font-weight: bold;

    cursor: url("cursors/link-select.cur"), pointer;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.7);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.22);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.music-button:hover {
    transform: translateY(-2px) scale(1.05);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 6px 14px rgba(0,80,35,0.3);
}

/* FLOATING HOMEPAGE SPARKLES */

.sparkle {
    position: fixed;

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

    font-size: 28px;

    text-shadow:
        0 0 6px rgba(142,255,122,0.9),
        0 0 14px rgba(127,255,238,0.75),
        2px 2px 0 rgba(23,107,58,0.2);

    pointer-events: none;

    z-index: 1;

    animation:
        sparkleFloat 4s ease-in-out infinite,
        sparkleTwinkle 1.8s ease-in-out infinite alternate;
}

.sparkle1 {
    top: 14%;
    left: 7%;
    font-size: 32px;
    animation-delay: 0s;
}

.sparkle2 {
    top: 26%;
    right: 8%;
    font-size: 24px;
    animation-delay: 0.4s;
}

.sparkle3 {
    bottom: 20%;
    left: 10%;
    font-size: 26px;
    animation-delay: 0.8s;
}

.sparkle4 {
    bottom: 14%;
    right: 12%;
    font-size: 34px;
    animation-delay: 1.2s;
}

.sparkle5 {
    top: 54%;
    left: 4%;
    font-size: 22px;
    animation-delay: 1.6s;
}

@keyframes sparkleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(8deg);
    }

    100% {
        transform: translateY(0) rotate(0deg);
    }
}

@keyframes sparkleTwinkle {
    from {
        opacity: 0.35;
        filter: brightness(0.9);
    }

    to {
        opacity: 1;
        filter: brightness(1.35);
    }
}

.sparkle6 {
    top: 8%;
    right: 26%;
    font-size: 20px;
    animation-delay: 2s;
}

.sparkle7 {
    bottom: 34%;
    right: 5%;
    font-size: 25px;
    animation-delay: 2.4s;
}

.sparkle8 {
    top: 72%;
    left: 22%;
    font-size: 18px;
    animation-delay: 2.8s;
}

/* XP WINDOW */

.window {
    width: 900px;
    max-width: 92%;
    margin: auto;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.72),
            rgba(213,255,231,0.58)
        );

    border-radius: 22px;
    overflow: hidden;

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.9),
        0 15px 40px rgba(0,80,35,0.25);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.titlebar {
    background:
        linear-gradient(
            to bottom,
            #dffff0 0%,
            #8eff7a 12%,
            #31b86b 50%,
            #176b3a 100%
        );

    color: white;
    padding: 10px 15px;

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

    font-weight: bold;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.7);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.85),
        inset 0 -3px 8px rgba(0,70,30,0.35);
}

.window-buttons button {
    width: 25px;
    height: 25px;
    margin-left: 5px;

    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 7px;

    background:
        linear-gradient(
            to bottom,
            white,
            #c9ffd9
        );

    color: var(--green-dark);
    font-weight: bold;

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,1),
        0 2px 4px rgba(0,80,35,0.25);
}

.window .welcome,
.window .navigation {

    padding:20px;

}

.online {

    font-size:12px;

    opacity:0.8;

}

footer {
    margin-top: 50px;
    padding-bottom: 25px;

    color: var(--green-dark);

    font-size: 14px;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.8);
}

/* MOBILE LAYOUT */

@media (max-width: 850px) {
    .window {
        width: 96%;
        max-width: 96%;

        margin: 18px auto 28px;

        border-radius: 24px;
    }

    .page-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .titlebar {
        font-size: 13px;
    }

}

@media (max-width: 850px) {
    .home-dashboard {
        padding: 18px 10px;
    }

    .profile-widget,
    .home-welcome-card,
    .home-nav-card,
    .music-player {
        border-radius: 24px;
    }

    .home-nav-grid {
        gap: 14px;
    }

    .home-nav-card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* MUSIC ROOM PAGE */

.music-room-page {
    padding: 35px 25px 45px;
}

.music-intro-card {
    width: 680px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.music-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.music-intro-card p {
    margin-bottom: 0;
}

.music-shelf {
    width: 850px;
    max-width: 90%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.music-release-card {
    position: relative;

    min-height: 430px;

    display: block;

    padding: 18px;

    border-radius: 34px;

    text-decoration: none;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96),
            rgba(215,255,230,0.82),
            rgba(49,184,107,0.84)
        );

    border: 4px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.82),
        0 14px 35px rgba(0,80,35,0.24);

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.music-release-card::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 38%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.music-release-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07) saturate(1.08);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 18px 42px rgba(0,80,35,0.34);
}

.album-cover-wrap {
    position: relative;

    z-index: 1;

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 28px;

    overflow: hidden;

    border: 4px solid rgba(255,255,255,0.96);

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 10px 22px rgba(0,60,25,0.25);
}

.album-cover-wrap::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.18),
            transparent 38%,
            rgba(0,40,18,0.15)
        );

    pointer-events: none;
}

.album-cover-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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

.music-release-card:hover .album-cover-wrap img {
    transform: scale(1.08) rotate(1deg);

    filter: saturate(1.12) brightness(1.03);
}

.music-release-info {
    position: absolute;

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

    z-index: 3;

    padding: 16px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.92),
            rgba(223,255,240,0.78)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,40,18,0.22);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    color: #17422a;
}

.music-type {
    display: inline-block;

    margin-bottom: 8px;
    padding: 6px 11px;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    border: 2px solid white;

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

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.14);
}

.music-release-info h2 {
    margin: 0 0 8px;

    color: #176b3a;

    font-size: 22px;

    text-shadow:
        1px 1px 0 white;
}

.music-release-info p {
    margin: 0;

    color: #2f5f44;

    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 900px) {
    .music-shelf {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .music-release-card {
        min-height: 420px;
    }

    .music-release-info h2 {
        font-size: 21px;
    }
}

/* GLOSSY MUSIC PLAYER PAGE */

.music-player-window {
    width: 900px;
    max-width: 92%;

    margin: 40px auto 60px;

    border-radius: 26px;

    overflow: hidden;

    border: 4px solid rgba(255,255,255,0.96);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.78),
            rgba(213,255,231,0.62)
        );

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 18px 45px rgba(0,70,30,0.28);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.music-player-content {
    padding: 35px 28px 42px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,0.75),
            transparent 28%
        ),
        linear-gradient(
            to bottom,
            rgba(235,255,243,0.82),
            rgba(185,255,212,0.55)
        );
}

.song-player-layout {
    width: 820px;
    max-width: 92%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 28px;

    align-items: center;
}

.song-cover-panel,
.song-info-panel {
    border-radius: 34px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 14px 35px rgba(0,80,35,0.22);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.song-cover-panel {
    padding: 24px;
}

.song-cover {
    width: 100%;

    display: block;

    border-radius: 50%;

    border: 6px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 12px 28px rgba(0,60,25,0.28);
}

.song-info-panel {
    padding: 28px;
    text-align: left;
}

.song-info-panel h1 {
    margin: 10px 0 8px;

    color: #176b3a;

    font-size: 3rem;

    text-align: left;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.song-album-name {
    margin: 0 0 22px;

    color: #2f5f44;

    font-weight: bold;
}

.music-control-panel {
    padding: 18px;

    border-radius: 26px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.84),
            rgba(223,255,240,0.66)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 20px rgba(0,80,35,0.14);

    text-align: center;
}

.music-controls {
    margin-bottom: 14px;
}

.glossy-song-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    margin-top: 18px;
}

.glossy-song-navigation a {
    display: block;

    padding: 12px 15px;

    border-radius: 999px;

    text-decoration: none;
    text-align: center;

    color: white;
    font-weight: bold;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    border: 2px solid white;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.22);

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.glossy-song-navigation a:hover {
    transform: translateY(-2px) scale(1.04);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 6px 14px rgba(0,80,35,0.28);
}

@media (max-width: 850px) {
    .music-player-content {
        padding: 24px 12px 34px;
    }

    .song-player-layout {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .song-cover-panel {
        max-width: 300px;
        margin: 0 auto;
    }

    .song-info-panel {
        text-align: center;
    }

    .song-info-panel h1 {
        text-align: center;
        font-size: 2.3rem;
    }

    .glossy-song-navigation {
        grid-template-columns: 1fr;
    }
}

/* LOADING SCREEN */

#loading-screen {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(circle at 20% 20%, rgba(142,255,122,0.75), transparent 28%),
        radial-gradient(circle at 80% 15%, rgba(127,255,238,0.55), transparent 30%),
        linear-gradient(
            180deg,
            #dffff0,
            #ffffff
        );

    display: flex;

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

    z-index: 9999;
}

.loading-box {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95),
            rgba(223,255,240,0.9)
        );

    padding: 30px;

    border-radius: 28px;

    border: 2px solid white;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.18);
}

.loading-box h2 {
    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.8);
}

.progress-container {
    width: 250px;
    height: 20px;

    background: #eafff2;

    border-radius: 20px;

    overflow: hidden;

    margin: 20px auto;

    border: 2px solid white;

    box-shadow:
        inset 0 2px 5px rgba(0,80,35,0.12);
}

.progress-bar {
    height: 100%;
    width: 0%;

    background:
        linear-gradient(
            to right,
            #7fffee,
            #8eff7a,
            #31b86b
        );

    animation: loading 2s forwards;
}

#loading-text {
    color: #2f5f44;
}

/* SCROLLBAR */

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-track {
    background: #eafff2;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            #dffff0,
            #8eff7a,
            #31b86b
        );

    border-radius: 20px;

    border: 2px solid white;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.9);
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #7fffee,
            #31b86b
        );
}

.desktop-button {

    display:inline-block;

    margin-top:20px;

    padding:10px 20px;

    background:linear-gradient(
        to bottom,
        white,
        #dff5ff
    );

    border-radius:20px;

    text-decoration:none;

    color:#5a8fd8;

    box-shadow:
    0 4px 10px rgba(0,0,0,0.1);

}

/* PORTFOLIO */
.page-content {

    padding: 30px;

    min-height: 400px;

}

.room-header {

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

    padding:25px;

    border-radius:25px;

    max-width:600px;

    margin:20px auto;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.1);

}

.folder-menu {

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin:30px auto;

}

.folder {

background:
linear-gradient(
to bottom,
white,
#dff5ff
);

padding:15px 25px;

border-radius:20px;

color:#4b7dbb;

font-weight:bold;

box-shadow:
0 5px 10px rgba(0,0,0,0.1);

}

.intro-box {

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

    padding:20px;

    border-radius:20px;

    margin:20px auto;

    max-width:500px;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.1);

}

.camera-box {

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

padding:20px;

border-radius:20px;

max-width:500px;

margin:20px auto;

}

.gallery {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}

.gallery-title {

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

    display: inline-block;

    padding: 10px 20px;

    border-radius: 15px;

    margin-top: 40px;

    color: #4b7dbb;

}

.gallery img {

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:20px;

    border:5px solid white;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.15);

    transition:0.3s;

}

.gallery img:hover {

    transform:scale(1.05);

}

/* SIMPLE PHOTOGRAPHY HUB */

.simple-photo-page {
    padding: 35px 25px 45px;
}

.photo-intro-card {
    width: 680px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.86),
            rgba(223,255,240,0.68)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    backdrop-filter: blur(8px);
}

.photo-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.photo-intro-card p {
    margin-bottom: 0;
}


.photo-choice-grid {
    width: 820px;
    max-width: 90%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.photo-choice-card {
    position: relative;

    height: 360px;

    display: block;

    border-radius: 34px;

    overflow: hidden;

    text-decoration: none;

    border: 4px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.75),
        0 14px 35px rgba(0,80,35,0.25);

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.photo-choice-card img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    filter: saturate(1.05) brightness(0.95);

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

.photo-choice-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.08),
            rgba(15,80,35,0.18),
            rgba(0,40,18,0.72)
        );

    z-index: 1;
}

.photo-choice-card::after {
    content: "";

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 36%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.45),
            rgba(255,255,255,0.04)
        );

    z-index: 2;

    pointer-events: none;
}

.photo-choice-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 18px 42px rgba(0,80,35,0.35);
}

.photo-choice-card:hover img {
    transform: scale(1.08);

    filter: saturate(1.18) brightness(1.02);
}

.photo-choice-label {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 3;

    padding: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.74)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,40,18,0.22);

    backdrop-filter: blur(6px);

    color: #17422a;
}

.photo-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 8px;

    border-radius: 16px;

    font-size: 26px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.2);
}

.photo-choice-label h2 {
    margin: 0 0 6px;

    color: #176b3a;

    font-size: 24px;

    text-shadow:
        1px 1px 0 white;
}

.photo-choice-label p {
    margin: 0;

    color: #2f5f44;

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

@media (max-width: 800px) {
    .photo-choice-grid {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .photo-choice-card {
        height: 330px;
    }

    .photo-choice-label h2 {
        font-size: 22px;
    }
}


/* PHOTO CAROUSEL */

.photo-carousel {
    width: 820px;
    max-width: 92%;

    margin: 35px auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.carousel-stage {
    position: relative;

    width: 640px;
    max-width: 80vw;
    height: 430px;

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

    perspective: 1000px;
}

.carousel-photo {
    position: absolute;

    width: 360px;
    height: 360px;

    object-fit: cover;

    border-radius: 28px;

    border: 5px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.8),
        0 12px 30px rgba(0,65,30,0.28);

    cursor: pointer;

    transition:
        transform 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease,
        z-index 0.45s ease;
}

.active-photo {
    z-index: 3;

    opacity: 1;

    transform:
        translateX(0)
        scale(1)
        rotateY(0deg);

    filter: brightness(1);
}

.prev-photo {
    z-index: 2;

    opacity: 0.78;

    transform:
        translateX(-210px)
        scale(0.78)
        rotateY(18deg);

    filter: brightness(0.88) saturate(0.9);
}

.next-photo {
    z-index: 2;

    opacity: 0.78;

    transform:
        translateX(210px)
        scale(0.78)
        rotateY(-18deg);

    filter: brightness(0.88) saturate(0.9);
}

.prev-photo:hover {
    opacity: 0.95;

    transform:
        translateX(-240px)
        scale(0.84)
        rotateY(12deg);

    filter: brightness(1);
}

.next-photo:hover {
    opacity: 0.95;

    transform:
        translateX(240px)
        scale(0.84)
        rotateY(-12deg);

    filter: brightness(1);
}

.carousel-arrow {
    width: 48px;
    height: 48px;

    border-radius: 50%;

    border: 2px solid white;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    color: white;

    font-size: 36px;
    font-weight: bold;

    line-height: 1;

    cursor: pointer;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.7);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 5px 12px rgba(0,80,35,0.22);

    transition: 0.2s;
}

.carousel-arrow:hover {
    transform: scale(1.1);
    filter: brightness(1.08);
}

.carousel-caption {
    display: inline-block;

    margin: 10px auto 25px;
    padding: 10px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.75)
        );

    border: 2px solid white;

    color: #176b3a;
    font-weight: bold;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.14);
}

.lightbox {
    position: fixed;

    inset: 0;

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

    background: rgba(0, 25, 10, 0.82);

    z-index: 99999;

    cursor: zoom-out;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 18px;

    border: 5px solid white;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.45);
}

@media (max-width: 800px) {
    .photo-carousel {
        gap: 8px;
    }

    .carousel-stage {
        width: 92vw;
        height: 360px;
        max-width: 92vw;
    }

    .carousel-photo {
        width: 250px;
        height: 250px;
        border-radius: 22px;
    }

    .prev-photo {
        transform:
            translateX(-120px)
            scale(0.72)
            rotateY(16deg);
    }

    .next-photo {
        transform:
            translateX(120px)
            scale(0.72)
            rotateY(-16deg);
    }

    .prev-photo:hover {
        transform:
            translateX(-135px)
            scale(0.76)
            rotateY(12deg);
    }

    .next-photo:hover {
        transform:
            translateX(135px)
            scale(0.76)
            rotateY(-12deg);
    }

    .carousel-arrow {
        width: 40px;
        height: 40px;
        font-size: 30px;
    }
    
    .subpage-dock {
    max-width: 86%;
}

}

/* PHOTO DECK CAROUSEL ANIMATION */

.carousel-stage.turning-next .active-photo {
    animation: activeToLeft 0.42s ease forwards;
}

.carousel-stage.turning-next .next-photo {
    animation: nextToActive 0.42s ease forwards;
}

.carousel-stage.turning-next .prev-photo {
    animation: prevFadeBack 0.42s ease forwards;
}


.carousel-stage.turning-prev .active-photo {
    animation: activeToRight 0.42s ease forwards;
}

.carousel-stage.turning-prev .prev-photo {
    animation: prevToActive 0.42s ease forwards;
}

.carousel-stage.turning-prev .next-photo {
    animation: nextFadeBack 0.42s ease forwards;
}


@keyframes nextToActive {
    from {
        transform:
            translateX(210px)
            scale(0.78)
            rotateY(-18deg);

        opacity: 0.78;
        filter: brightness(0.88) saturate(0.9);
        z-index: 2;
    }

    to {
        transform:
            translateX(0)
            scale(1)
            rotateY(0deg);

        opacity: 1;
        filter: brightness(1);
        z-index: 5;
    }
}

@keyframes activeToLeft {
    from {
        transform:
            translateX(0)
            scale(1)
            rotateY(0deg);

        opacity: 1;
        filter: brightness(1);
        z-index: 3;
    }

    to {
        transform:
            translateX(-210px)
            scale(0.78)
            rotateY(18deg);

        opacity: 0.78;
        filter: brightness(0.88) saturate(0.9);
        z-index: 2;
    }
}

@keyframes prevFadeBack {
    from {
        transform:
            translateX(-210px)
            scale(0.78)
            rotateY(18deg);

        opacity: 0.78;
    }

    to {
        transform:
            translateX(-330px)
            scale(0.65)
            rotateY(25deg);

        opacity: 0;
    }
}


@keyframes prevToActive {
    from {
        transform:
            translateX(-210px)
            scale(0.78)
            rotateY(18deg);

        opacity: 0.78;
        filter: brightness(0.88) saturate(0.9);
        z-index: 2;
    }

    to {
        transform:
            translateX(0)
            scale(1)
            rotateY(0deg);

        opacity: 1;
        filter: brightness(1);
        z-index: 5;
    }
}

@keyframes activeToRight {
    from {
        transform:
            translateX(0)
            scale(1)
            rotateY(0deg);

        opacity: 1;
        filter: brightness(1);
        z-index: 3;
    }

    to {
        transform:
            translateX(210px)
            scale(0.78)
            rotateY(-18deg);

        opacity: 0.78;
        filter: brightness(0.88) saturate(0.9);
        z-index: 2;
    }
}

@keyframes nextFadeBack {
    from {
        transform:
            translateX(210px)
            scale(0.78)
            rotateY(-18deg);

        opacity: 0.78;
    }

    to {
        transform:
            translateX(330px)
            scale(0.65)
            rotateY(-25deg);

        opacity: 0;
    }
}


.carousel-stage.is-resetting .carousel-photo {
    transition: none;
    animation: none;

}

.active-photo:hover {
    transform:
        translateX(0)
        scale(1.04)
        rotateY(0deg);

    filter: brightness(1.06) saturate(1.08);
}

@keyframes slideInPrev {
    from {
        transform: translateX(-35px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}
/* VIDEOGRAPHY HUB */

.simple-video-page {
    padding: 35px 25px 45px;
}

.video-intro-card {
    width: 680px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.86),
            rgba(223,255,240,0.68)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.video-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.video-intro-card p {
    margin-bottom: 0;
}


.video-choice-grid {
    width: 820px;
    max-width: 90%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.video-choice-card {
    position: relative;

    min-height: 360px;

    display: block;

    border-radius: 34px;

    overflow: hidden;

    text-decoration: none;

    border: 4px solid rgba(255,255,255,0.95);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95),
            rgba(215,255,230,0.8),
            rgba(49,184,107,0.88)
        );

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.75),
        0 14px 35px rgba(0,80,35,0.25);

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.video-choice-card::after {
    content: "";

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 36%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.video-choice-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 18px 42px rgba(0,80,35,0.35);
}

/* VIDEOGRAPHY PREVIEW PNG ICONS NEEMA FIX THIS TOO */

.video-choice-preview img {
  width: 92px;
  height: 92px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.8))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));

  pointer-events: none;
}

.video-choice-preview img[src$="videocamera.png"] {
  width: 104px;
  height: 96px;
}

@media (max-width: 850px) {
  .video-choice-preview img {
    width: 78px;
    height: 78px;
  }

  .video-choice-preview img[src$="videocamera.png"] {
    width: 88px;
    height: 80px;
  }
}

.film-preview {
    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #dffff0 35%,
            #8eff7a 58%,
            #176b3a
        );
}

.project-preview {
    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #7fffee 30%,
            #b9ffd4 58%,
            #31b86b
        );
}

.video-choice-label {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 3;

    padding: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.76)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,40,18,0.22);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    color: #17422a;
}

.video-choice-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    margin-bottom: 8px;

    border-radius: 16px;

    font-size: 26px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.2);
}

.video-choice-label h2 {
    margin: 0 0 6px;

    color: #176b3a;

    font-size: 24px;

    text-shadow:
        1px 1px 0 white;
}

.video-choice-label p {
    margin: 0;

    color: #2f5f44;

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

@media (max-width: 800px) {
    .video-choice-grid {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .video-choice-card {
        min-height: 330px;
    }

    .video-choice-label h2 {
        font-size: 22px;
    }
}

/* SHORT FILMS PAGE */

.short-film-page {
    padding: 35px 25px 45px;
}

.film-shelf {
    width: 820px;
    max-width: 90%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.film-card {
    position: relative;

    min-height: 420px;

    display: block;

    border-radius: 34px;

    overflow: hidden;

    text-decoration: none;

    border: 4px solid rgba(255,255,255,0.95);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95),
            rgba(215,255,230,0.8),
            rgba(49,184,107,0.88)
        );

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.75),
        0 14px 35px rgba(0,80,35,0.25);

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.film-card::after {
    content: "";

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 34%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.film-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 18px 42px rgba(0,80,35,0.35);
}

.film-poster {
    height: 250px;

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

    font-size: 72px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #dffff0 35%,
            #8eff7a 58%,
            #176b3a
        );

    text-shadow:
        2px 2px 0 white,
        0 0 14px rgba(127,255,238,0.75);

    box-shadow:
        inset 0 -10px 20px rgba(0,80,35,0.18);
}

.film-icon {
    width: 110px;
    height: 110px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    color: white;

    font-size: 48px;
    font-weight: bold;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.7);

    border: 3px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,1),
        0 8px 18px rgba(0,80,35,0.28);
}

.film-info {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 22px;

    z-index: 3;

    padding: 18px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.76)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,40,18,0.22);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    color: #17422a;
}

.film-info h2 {
    margin: 0 0 8px;

    color: #176b3a;

    font-size: 23px;

    text-shadow:
        1px 1px 0 white;
}

.film-info p {
    margin: 0 0 12px;

    color: #2f5f44;

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

.film-status {
    display: inline-block;

    padding: 8px 13px;

    border-radius: 999px;

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

    border: 2px solid white;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.16);
}

.available-status {
    color: white;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);
}

.locked-film {
    cursor: url("cursors/link-select.cur"), not-allowed;

    filter: saturate(0.75);
}

.locked-film:hover {
    transform: translateY(-4px) scale(1.015);

    filter: saturate(0.75) brightness(1.03);
}

.locked-poster {
    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #dffff0 35%,
            #8acfa3 58%,
            #3f7352
        );
}

.locked-status {
    color: white;

    background:
        linear-gradient(
            to bottom,
            #b9ffd4,
            #679f78,
            #3f7352
        );

    text-shadow:
        1px 1px 2px rgba(0,60,25,0.8);
}

.locked-film::before {
    content: "LOCKED: Coming soon!";

    position: absolute;
    left: 50%;
    top: 18px;

    transform: translateX(-50%) translateY(-8px);

    width: max-content;
    max-width: 82%;

    padding: 10px 14px;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96),
            rgba(223,255,240,0.86)
        );

    border: 2px solid white;

    color: #176b3a;

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

    box-shadow:
        0 6px 14px rgba(0,50,20,0.22);

    opacity: 0;

    z-index: 5;

    pointer-events: none;

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

.locked-film:hover::before {
    opacity: 1;

    transform: translateX(-50%) translateY(0);
}

@media (max-width: 800px) {
    .film-shelf {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .film-card {
        min-height: 400px;
    }

    .film-info h2 {
        font-size: 21px;
    }
}

/* GREEN GLOSSY FILM PLAYER */

.film-player-window {
    width: 900px;
    max-width: 92%;

    margin: 40px auto 60px;

    border-radius: 26px;

    overflow: hidden;

    border: 4px solid rgba(255,255,255,0.96);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.78),
            rgba(213,255,231,0.62)
        );

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 18px 45px rgba(0,70,30,0.28);

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.film-player-titlebar {
    background:
        linear-gradient(
            to bottom,
            #dffff0 0%,
            #8eff7a 12%,
            #31b86b 50%,
            #176b3a 100%
        );

    color: white;

    padding: 12px 16px;

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

    font-size: 18px;
    font-weight: bold;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.85),
        inset 0 -4px 8px rgba(0,70,30,0.35);
}

.film-player-content {
    padding: 32px;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,0.75),
            transparent 28%
        ),
        linear-gradient(
            to bottom,
            rgba(235,255,243,0.82),
            rgba(185,255,212,0.55)
        );
}

.film-now-playing {
    width: 680px;
    max-width: 88%;

    margin: 0 auto 24px;
    padding: 22px;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.72)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 20px rgba(0,80,35,0.14);
}

.film-now-playing h1 {
    margin: 0 0 8px;

    color: #176b3a;

    font-size: 2.7rem;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.film-now-playing p {
    margin: 0;

    color: #2f5f44;
}

.video-frame {
    position: relative;

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

    margin: 0 auto;

    padding: 12px;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95),
            rgba(185,255,212,0.78),
            rgba(49,184,107,0.75)
        );

    border: 3px solid rgba(255,255,255,0.96);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 14px 35px rgba(0,70,30,0.28);
}

.video-frame::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 18px;
    right: 18px;

    height: 34%;

    border-radius: 22px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.36),
            rgba(255,255,255,0.04)
        );

    pointer-events: none;

    z-index: 2;
}

.video-frame iframe {
    position: relative;

    z-index: 1;

    width: 100%;
    aspect-ratio: 16 / 9;

    display: block;

    border: none;
    border-radius: 20px;

    background: #00190a;

    box-shadow:
        0 8px 20px rgba(0,40,18,0.25);
}

.film-control-panel {
    width: 760px;
    max-width: 88%;

    margin: 24px auto 0;
    padding: 16px;

    border-radius: 26px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.85),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 20px rgba(0,80,35,0.15);
}

.film-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 14px;
}



/* PLAYER BUTTON IMAGE ICONS */

.film-controls button {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 6px;
}

/* GLOSSY PLAYER BUTTONS WITH IMAGE ICONS */

.film-controls button {
  position: relative;

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

  width: 48px;
  height: 40px;
  padding: 6px;

  border-radius: 16px;
  border: 2px solid white;

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #eafff2 28%,
      #8eff7a 58%,
      #31b86b 100%
    );

  box-shadow:
    inset 0 2px 4px rgba(255,255,255,0.95),
    inset 0 -4px 8px rgba(0,80,35,0.22),
    0 4px 10px rgba(0,80,35,0.22);

  overflow: hidden;
}

.film-controls button::before {
  content: "";

  position: absolute;
  top: 4px;
  left: 6px;
  right: 6px;

  height: 40%;

  border-radius: 12px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.85),
      rgba(255,255,255,0.12)
    );

  pointer-events: none;
  z-index: 1;
}


.film-controls button img {
  width: 22px;
  height: 22px;
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

@media (max-width: 850px) {
  .film-controls button img {
    width: 20px;
    height: 20px;
  }

}




.film-controls button:hover {
    transform: translateY(-2px) scale(1.08);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 6px 14px rgba(0,80,35,0.3);
}

.film-controls button:active {
    transform: translateY(1px) scale(0.98);
}

.film-progress {
    width: 92%;
    height: 16px;

    margin: 0 auto 12px;

    border-radius: 999px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #eafff2,
            #c9ffd9
        );

    border: 2px solid white;

    box-shadow:
        inset 0 2px 5px rgba(0,80,35,0.14);
}

.film-progress-bar {
    width: 42%;
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            to right,
            #7fffee,
            #8eff7a,
            #31b86b
        );

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.9);
}

.film-progress-bar {
      width: 0%;
}

.film-progress {
    cursor: url("cursors/link-select.cur"), pointer;
}

.player-status {
    display: inline-block;

    margin: 0;
    padding: 8px 16px;

    border-radius: 999px;

    color: #176b3a;
    font-size: 14px;
    font-weight: bold;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.92),
            rgba(223,255,240,0.78)
        );

    border: 2px solid white;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.12);
}

@media (max-width: 800px) {
    .film-player-content {
        padding: 22px 12px;
    }

    .film-now-playing h1 {
        font-size: 2rem;
    }

#youtube-player {
    position: relative;

    z-index: 1;

    width: 100%;
    aspect-ratio: 16 / 9;

    display: block;

    border: none;
    border-radius: 20px;

    background: #00190a;

    box-shadow:
        0 8px 20px rgba(0,40,18,0.25);
}

#youtube-player iframe {
    width: 100%;
    height: 100%;

    border-radius: 20px;
}

    .film-control-panel {
        max-width: 90%;
        padding: 14px 10px;
    }

    .film-controls button {
        width: 42px;
        height: 36px;
        font-size: 13px;
    }
}

/* VIDEO PROJECT ARCHIVE */

.project-archive-page {
    padding: 35px 25px 45px;
}

.project-card-grid {
    width: 820px;
    max-width: 90%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.project-card {
    position: relative;

    min-height: 360px;

    display: block;

    border-radius: 32px;

    overflow: hidden;

    text-decoration: none;

    border: 4px solid rgba(255,255,255,0.95);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.95),
            rgba(215,255,230,0.82),
            rgba(49,184,107,0.86)
        );

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.78),
        0 14px 35px rgba(0,80,35,0.24);

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

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

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 34%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.55),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.project-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 18px 42px rgba(0,80,35,0.34);
}

.project-preview {
    height: 185px;

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

    font-size: 78px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #7fffee 28%,
            #b9ffd4 56%,
            #31b86b
        );

    text-shadow:
        2px 2px 0 white,
        0 0 14px rgba(127,255,238,0.75);

    box-shadow:
        inset 0 -10px 20px rgba(0,80,35,0.18);
}

/* VIDEO PROJECT ARCHIVE PNG PREVIEW ICONS */

.project-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
}

.project-preview img {
  width: 96px;
  height: 96px;

  display: block;
  object-fit: contain;

  position: relative;
  z-index: 3;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.8))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));

  pointer-events: none;
}

.project-preview img[src$="videocamera.png"] {
  width: 116px;
  height: 106px;
}

.project-preview img[src$="clapper.png"] {
  width: 96px;
  height: 96px;
}

.project-preview img[src$="sparkles.png"] {
  width: 92px;
  height: 92px;
}

@media (max-width: 850px) {
  .project-preview img {
    width: 84px;
    height: 84px;
  }

  .project-preview img[src$="videocamera.png"] {
    width: 100px;
    height: 92px;
  }

  .project-preview img[src$="clapper.png"] {
    width: 84px;
    height: 84px;
  }

  .project-preview img[src$="sparkles.png"] {
    width: 82px;
    height: 82px;
  }
}

.project-info {
    position: absolute;

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

    z-index: 3;

    padding: 16px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.91),
            rgba(223,255,240,0.77)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,40,18,0.22);

    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    color: #17422a;
}

.project-info h2 {
    margin: 0 0 8px;

    color: #176b3a;

    font-size: 21px;

    text-shadow:
        1px 1px 0 white;
}

.project-info p {
    margin: 0 0 12px;

    color: #2f5f44;

    font-size: 13px;
    line-height: 1.35;
}

.project-status {
    display: inline-block;

    padding: 8px 13px;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    border: 2px solid white;

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

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.16);
}

@media (max-width: 900px) {
    .project-card-grid {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .project-card {
        min-height: 335px;
    }

    .project-info h2 {
        font-size: 20px;
    }
}

/* LOCAL VIDEO PLAYER */

.local-video {
    position: relative;

    z-index: 1;

    width: 100%;

    aspect-ratio: 16 / 9;

    display: block;

    object-fit: contain;

    border: none;
    border-radius: 20px;

    background: #00190a;

    box-shadow:
        0 8px 20px rgba(0,40,18,0.25);
}


/* ALBUM TRACKLIST PAGE */

.album-tracklist-page {
    padding: 35px 25px 45px;
}

.album-hero {
    width: 860px;
    max-width: 92%;

    margin: 20px auto 35px;

    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;

    align-items: start;
}

.album-art-panel,
.album-track-panel {
    border-radius: 34px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 14px 35px rgba(0,80,35,0.22);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.album-art-panel {
    padding: 24px;

    position: sticky;
    top: 25px;
}

.album-cover-large {
    width: 100%;

    display: block;

    border-radius: 50%;

    border: 6px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        0 12px 28px rgba(0,60,25,0.28);
}

.album-track-panel {
    padding: 26px;
    text-align: left;
}

.album-track-panel h1 {
    margin: 8px 0 10px;

    color: #176b3a;

    font-size: 2.7rem;

    text-align: left;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.album-track-panel p {
    margin: 0 0 22px;

    color: #2f5f44;
}

.track-list {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    gap: 11px;
}

.track-list li {
    margin: 0;
    padding: 0;
}

.track-list a {
    position: relative;

    display: grid;
    grid-template-columns: 48px 1fr 42px;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    border-radius: 18px;

    text-decoration: none;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96),
            rgba(185,255,212,0.78),
            rgba(49,184,107,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    color: #17422a;

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.95),
        0 5px 12px rgba(0,80,35,0.15);

    cursor: url("cursors/link-select.cur"), pointer;

    overflow: hidden;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.track-list a::before {
    content: "";

    position: absolute;
    top: 4px;
    left: 8px;
    right: 8px;

    height: 38%;

    border-radius: 14px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.58),
            rgba(255,255,255,0.05)
        );

    pointer-events: none;
}

.track-list a:hover {
    transform: translateX(6px) scale(1.015);

    filter: brightness(1.08) saturate(1.08);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,1),
        0 8px 18px rgba(0,80,35,0.24);
}

.track-number {
    position: relative;
    z-index: 1;

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

    width: 38px;
    height: 38px;

    border-radius: 14px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    border: 2px solid white;

    font-size: 13px;
    font-weight: bold;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 3px 8px rgba(0,80,35,0.16);
}

.track-name {
    position: relative;
    z-index: 1;

    color: #176b3a;

    font-size: 17px;
    font-weight: bold;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.85);
}

.track-play {
    position: relative;
    z-index: 1;

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

    width: 34px;
    height: 34px;

    border-radius: 50%;

    color: white;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    border: 2px solid white;

    font-size: 13px;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 3px 8px rgba(0,80,35,0.18);
}

@media (max-width: 850px) {
    .album-hero {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .album-art-panel {
        position: static;
        max-width: 320px;
        margin: 0 auto;
    }

    .album-track-panel {
        text-align: center;
    }

    .album-track-panel h1 {
        text-align: center;
        font-size: 2.2rem;
    }

    .track-list a {
        grid-template-columns: 42px 1fr 38px;
        text-align: left;
    }

    .track-name {
        font-size: 15px;
    }
}
.spinning-cd {

animation:spin 8s linear infinite;

border-radius:50%;

}

/* ALBUM PAGE */

.album-page {

    max-width:600px;

    margin:30px auto;

    padding:25px;

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

    border-radius:25px;

    box-shadow:
    0 5px 15px rgba(0,0,0,0.1);

}

.album-page img {

    width:250px;

    border-radius:20px;

    margin-bottom:20px;

}

.album-page ol {

    text-align:left;

    max-width:300px;

    margin:20px auto;

    color:#555;

}

.music-player audio {

width:100%;

margin-top:10px;

}

.spinning-cd {

width:250px;

border-radius:50%;

animation:spin 8s linear infinite;

}

.cd-display {

margin:30px auto;

text-align:center;

}

/* SONG PAGE */

.song-player {

max-width:700px;

margin:30px auto;

}

.player-content audio {

width:100%;

margin-top:20px;

}

.song-navigation {

display:flex;

justify-content:space-between;

margin-top:20px;

gap:20px;

}

.song-navigation a {

flex:1;

max-width:220px;

}

.direction-entry {
    width: 830px;
    max-width: 92%;

    margin: 0 auto 35px;
    padding: 22px;

    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 24px;

    align-items: center;

    border-radius: 36px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.82),
            rgba(223,255,240,0.62)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 14px 35px rgba(0,80,35,0.22);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* DIRECTION MINI CAROUSEL */

.direction-carousel {
    position: relative;

    width: 100%;
    height: 300px;

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

    border-radius: 32px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.72)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 12px 28px rgba(0,80,35,0.22);
}

.direction-carousel::before {
    content: "";

    position: absolute;

    top: 10px;
    left: 14px;
    right: 14px;

    height: 34%;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.52),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.direction-carousel-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    cursor: url("cursors/link-select.cur"), zoom-in;

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

.direction-carousel-image:hover {
    transform: scale(1.04);

    filter: brightness(1.06) saturate(1.08);
}

.direction-carousel-image.switching {
    opacity: 0;
    transform: scale(0.96);
}

/* BIG CLICKABLE CAROUSEL BUTTONS */

.direction-carousel-button {
    position: absolute;

    top: 50%;

    z-index: 10;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    border: 3px solid white;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    color: white;

    font-size: 34px;
    font-weight: bold;

    line-height: 1;

    cursor: url("cursors/link-select.cur"), pointer;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 5px 12px rgba(0,80,35,0.28);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.direction-carousel-button:hover {
    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,1),
        0 7px 16px rgba(0,80,35,0.35);
}

.prev-direction-photo {
    left: 14px;

    transform: translateY(-50%);
}

.next-direction-photo {
    right: 14px;

    transform: translateY(-50%);
}

.prev-direction-photo:hover {
    transform: translateY(-50%) scale(1.12);
}

.next-direction-photo:hover {
    transform: translateY(-50%) scale(1.12);
}

.direction-carousel-count {
    position: absolute;

    left: 50%;
    bottom: 12px;

    transform: translateX(-50%);

    z-index: 9;

    margin: 0;
    padding: 7px 13px;

    border-radius: 999px;

    color: #176b3a;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.94),
            rgba(223,255,240,0.82)
        );

    border: 2px solid white;

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

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.16);
}

/* DIRECTION CAROUSEL MOBILE */

@media (max-width: 850px) {
    .direction-entry,
    .reverse-entry {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .reverse-entry .direction-carousel,
    .reverse-entry .direction-text {
        order: initial;
    }

    .direction-text {
        text-align: center;
    }

    .direction-text h2 {
        font-size: 1.7rem;
    }

    .direction-carousel {
        height: 280px;
    }

    .direction-carousel-button {
        width: 52px;
        height: 52px;

        font-size: 34px;

        z-index: 20;
    }

    .prev-direction-photo {
        left: 12px;
    }

    .next-direction-photo {
        right: 12px;
    }

    .direction-carousel-count {
        bottom: 10px;
    }
}

/* DIRECTION LIGHTBOX */

.direction-lightbox {
    position: fixed;

    inset: 0;

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

    background: rgba(0, 25, 10, 0.84);

    z-index: 99999;

    cursor: zoom-out;
}

.direction-lightbox.active {
    display: flex;
}

.direction-lightbox img {
    max-width: 92vw;
    max-height: 88vh;

    object-fit: contain;

    border-radius: 18px;

    border: 5px solid white;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.45);
}

@media (max-width: 850px) {
    .direction-carousel {
        min-height: 300px;
    }

    .direction-carousel-image {
        min-height: 300px;
    }

    .direction-carousel-button {
        width: 38px;
        height: 38px;
        font-size: 28px;
    }
}


/* ABOUT STORYBOOK PAGE */

.about-page {
    padding: 35px 25px 45px;
}

.about-intro-card {
    width: 720px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.about-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.about-intro-card p {
    margin-bottom: 0;
}


/* STORYBOOK */

.storybook {
    position: relative;

    width: 840px;
    max-width: 92%;

    margin: 0 auto 22px;
    padding: 22px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    border-radius: 38px;
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.82),
            rgba(223,255,240,0.62)
        );

    border: 4px solid rgba(255,255,255,0.96);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 16px 40px rgba(0,80,35,0.24);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

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

.storybook::before {
    content: "";

    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 50%;

    width: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(23,107,58,0.35),
            transparent
        );

    box-shadow:
        0 0 12px rgba(23,107,58,0.2);

    z-index: 3;
}

.storybook-page {
    position: relative;

    height: 390px;

    border-radius: 30px;
    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.92),
            rgba(223,255,240,0.74)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 10px 24px rgba(0,80,35,0.17);

    box-sizing: border-box;
}

.photo-page-side::before,
.text-page-side::before {
    content: "";

    position: absolute;
    top: 10px;
    left: 14px;
    right: 14px;

    height: 34%;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.52),
            rgba(255,255,255,0.05)
        );

    z-index: 2;

    pointer-events: none;
}

.photo-page-side img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

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

.photo-page-side img:hover {
    transform: scale(1.04);

    filter: brightness(1.05) saturate(1.08);
}

.text-page-side {
    padding: 34px 30px;

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

    text-align: left;

    box-sizing: border-box;
}

.storybook-label {
    display: inline-block;

    width: fit-content;

    margin-bottom: 12px;
    padding: 7px 12px;

    border-radius: 999px;

    color: white;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    border: 2px solid white;

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

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.14);
}

.text-page-side h2 {
    margin: 0 0 14px;

    color: #176b3a;

    font-size: 2.2rem;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.45);
}

.text-page-side p {
    margin: 0;

    color: #2f5f44;

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


/* STORYBOOK ANIMATION */

.storybook.fade-out {
    opacity: 0.55;
    transform: scale(0.985);
}

.storybook.turning-next .photo-page-side,
.storybook.turning-next .text-page-side {
    animation: storyTurnNext 0.35s ease;
}

.storybook.turning-prev .photo-page-side,
.storybook.turning-prev .text-page-side {
    animation: storyTurnPrev 0.35s ease;
}

@keyframes storyTurnNext {
    from {
        opacity: 0;
        transform: translateX(35px) rotateY(-8deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

@keyframes storyTurnPrev {
    from {
        opacity: 0;
        transform: translateX(-35px) rotateY(8deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}


/* STORYBOOK BUTTONS */

.storybook-controls {
    width: 620px;
    max-width: 86%;

    margin: 18px auto 34px;

    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.storybook-controls button {
    padding: 12px 20px;

    border-radius: 999px;

    border: 2px solid white;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    color: white;

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

    cursor: url("cursors/link-select.cur"), pointer;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 5px 12px rgba(0,80,35,0.22);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.storybook-controls button:hover {
    transform: translateY(-2px) scale(1.05);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 7px 16px rgba(0,80,35,0.3);
}

.storybook-controls button:active {
    transform: translateY(1px) scale(0.98);
}


/* ABOUT STORYBOOK MOBILE */

@media (max-width: 850px) {
    .storybook {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .storybook::before {
        display: none;
    }

    .storybook-page {
        height: auto;
        min-height: 300px;
    }

    .photo-page-side {
        height: 300px;
    }

    .photo-page-side img {
        height: 100%;
    }

    .text-page-side {
        padding: 28px 22px;
        text-align: center;
    }

    .storybook-label {
        margin-left: auto;
        margin-right: auto;
    }

    .text-page-side h2 {
        font-size: 1.8rem;
    }

    .text-page-side p {
        font-size: 15px;
        line-height: 1.55;
    }

    .storybook-controls {
        max-width: 88%;
    }
}

/* CONTACT PAGE */

.contact-page {
    padding: 35px 25px 45px;
}

.contact-intro-card {
    width: 720px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.contact-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.contact-intro-card p {
    margin-bottom: 0;
}

.contact-layout {
    width: 840px;
    max-width: 92%;

    margin: 0 auto 30px;

    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;

    align-items: stretch;
}

.contact-card,
.contact-form {
    border-radius: 34px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 14px 35px rgba(0,80,35,0.22);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.contact-mailbox {
    padding: 28px 22px;

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

    text-align: center;
}

.mailbox-icon {
    width: 100px;
    height: 100px;

    margin: 0 auto 18px;

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

    border-radius: 32px;

    font-size: 56px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    border: 3px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 8px 18px rgba(0,80,35,0.22);
}

.contact-mailbox h2 {
    margin: 0 0 12px;

    color: #176b3a;

    font-size: 1.9rem;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.45);
}

.contact-mailbox p {
    color: #2f5f44;

    line-height: 1.45;
}

.contact-mini-links {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 12px;
}

.contact-mini-links a {
    display: block;

    padding: 10px 14px;

    border-radius: 999px;

    text-decoration: none;

    color: white;
    font-weight: bold;
    font-size: 13px;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    border: 2px solid white;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.2);

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.contact-mini-links a:hover {
    transform: translateY(-2px) scale(1.04);

    filter: brightness(1.08);
}

.contact-form {
    padding: 26px;

    text-align: left;
}

.contact-form label {
    display: block;

    margin: 0 0 7px;

    color: #176b3a;

    font-weight: bold;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.85);
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    margin-bottom: 16px;
    padding: 12px 14px;

    border-radius: 18px;

    border: 2px solid rgba(255,255,255,0.95);

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96),
            rgba(234,255,242,0.88)
        );

    color: #17422a;

    font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif;
    font-size: 14px;

    box-shadow:
        inset 0 2px 5px rgba(0,80,35,0.1),
        0 4px 10px rgba(0,80,35,0.08);

    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;

    border-color: #8eff7a;

    box-shadow:
        inset 0 2px 5px rgba(0,80,35,0.1),
        0 0 0 4px rgba(142,255,122,0.28);
}

.contact-submit-button {
    display: block;

    width: 100%;

    padding: 13px 18px;

    border-radius: 999px;

    border: 2px solid white;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    color: white;

    font-weight: bold;
    font-size: 15px;

    cursor: url("cursors/link-select.cur"), pointer;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 5px 12px rgba(0,80,35,0.22);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.contact-submit-button:hover {
    transform: translateY(-2px) scale(1.02);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 7px 16px rgba(0,80,35,0.3);
}

.contact-note {
    width: 620px;
    max-width: 88%;

    margin: 0 auto 28px;
    padding: 12px 18px;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.68)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 6px 14px rgba(0,80,35,0.12);
}

.contact-note p {
    margin: 0;

    color: #2f5f44;
    font-size: 13px;
    font-weight: bold;
}

@media (max-width: 850px) {
    .contact-layout {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .contact-mailbox {
        padding: 24px 20px;
    }

    .contact-form {
        padding: 22px;
    }

    .mailbox-icon {
        width: 86px;
        height: 86px;
        font-size: 48px;
    }
}

/* CONTACT FORM MESSAGE */

.form-message {
    min-height: 22px;

    margin: 0 0 15px;
    padding: 10px 14px;

    border-radius: 18px;

    font-size: 13px;
    font-weight: bold;

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.75)
        );

    border: 2px solid rgba(255,255,255,0.95);

    color: #176b3a;

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.1);
}

.form-message:empty {
    display: none;
}

.form-success {
    color: #176b3a;
}

.form-error {
    color: #8b2f2f;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.94),
            rgba(255,225,225,0.82)
        );
}

/* SUBPAGE DOCK MENU */

.subpage-dock {
    width: 760px;
    max-width: 88%;

    margin: 45px auto 20px;
    padding: 14px;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    border-radius: 26px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.75),
            rgba(223,255,240,0.55)
        );

    border: 2px solid rgba(255,255,255,0.9);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 8px 20px rgba(0,80,35,0.15);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.subpage-dock a {
    display: inline-block;

    padding: 9px 14px;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    color: #176b3a;

    text-decoration: none;
    font-weight: bold;
    font-size: 13px;

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

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 3px 8px rgba(0,80,35,0.18);

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.subpage-dock a:hover {
    transform: translateY(-2px) scale(1.05);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 5px 12px rgba(0,80,35,0.25);
}

@media (max-width: 700px) {
    body {
        background-size: 520px auto;
        background-attachment: scroll;
        padding-top: 30px;
    }

    .window {
        width: 94%;
    }

    .logo {
        font-size: 2.6rem;
    }

    .welcome {
        width: auto;
        padding: 22px;
    }

    .navigation {
        grid-template-columns: 1fr;
        width: 88%;
    }

    .bedroom-card {
        grid-column: span 1;
    }

    .nav-card {
        grid-template-columns: 50px 1fr;
        padding: 15px;
    }

    .nav-icon {
        width: 46px;
        height: 46px;
        font-size: 26px;
    }

    .nav-title {
        font-size: 18px;
    }

    .nav-desc {
        font-size: 12px;
    }
}

/* ABOUT PAGE MOBILE COMPACT FIX */

@media (max-width: 850px) {
    .about-page {
        padding: 18px 10px 28px;
    }

    .about-intro-card {
        margin: 12px auto 18px;
        padding: 18px;
    }

    .about-intro-card h1 {
        font-size: 1.8rem;
    }

    .about-intro-card p {
        font-size: 14px;
        margin-bottom: 0;
    }

    .storybook {
        width: 94%;
        padding: 12px;
        gap: 10px;
        margin-bottom: 12px;
        border-radius: 26px;
    }

    .storybook-page {
        min-height: unset;
        height: auto;
        border-radius: 22px;
    }

    .photo-page-side {
        height: 190px;
    }

    .photo-page-side img {
        height: 100%;
        min-height: unset;
        object-fit: cover;
    }

    .text-page-side {
        min-height: unset;
        padding: 18px 16px;
    }

    .storybook-label {
        margin-bottom: 8px;
        padding: 6px 10px;
        font-size: 11px;
    }

    .text-page-side h2 {
        font-size: 1.45rem;
        margin-bottom: 8px;
    }

    .text-page-side p {
        font-size: 13px;
        line-height: 1.45;
    }

    .storybook-controls {
        margin: 10px auto 20px;
        gap: 10px;
    }

    .storybook-controls button {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* PHOTO CAROUSEL SAFE MOBILE FIX */

@media (max-width: 850px) {

    .titlebar {
        gap: 8px;
    }

    .titlebar .online {
        display: none;
    }

    .carousel-window,
    .photo-gallery-window {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);

        margin: 8px auto 22px;

        border-radius: 24px;
    }

    .carousel-intro,
    .photo-intro,
    .gallery-intro,
    .photo-intro-card {
        width: 86%;
        max-width: 86%;

        margin: 18px auto 24px;
        padding: 22px 16px;

        border-radius: 26px;
    }

    .carousel-intro h1,
    .photo-intro h1,
    .gallery-intro h1,
    .photo-intro-card h1 {
        font-size: 2rem;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .carousel-intro p,
    .photo-intro p,
    .gallery-intro p,
    .photo-intro-card p {
        font-size: 14px;
        line-height: 1.45;
    }

    .carousel-stage {
        position: relative;

        width: 100%;
        height: 360px;

        margin: 10px auto 14px;

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

        overflow: hidden;
    }

    .prev-photo,
    .next-photo {
        display: none;
    }

    .active-photo {
        position: relative;

        width: 76%;
        height: 320px;

        left: auto;
        right: auto;
        top: auto;

        transform: none;

        opacity: 1;
        z-index: 4;
    }

    .carousel-photo {
        max-width: none;
        max-height: none;

        object-fit: cover;

        border-radius: 28px;
    }

    .carousel-arrow {
        position: absolute;
        top: 50%;

        width: 48px;
        height: 48px;

        transform: translateY(-50%);

        z-index: 10;

        font-size: 30px;
    }

    .prev-arrow {
        left: 10px;
    }

    .next-arrow {
        right: 10px;
    }

    .photo-title {
        margin: 10px auto 20px;

        font-size: 1.45rem;
    }

    .subpage-dock {
        width: 86%;
        max-width: 86%;

        margin: 18px auto 24px;
        padding: 14px;

        gap: 10px;
    }

    .subpage-dock a {
        font-size: 13px;
        padding: 9px 12px;
    }
}

/* VIDEOGRAPHY MOBILE COMPACT FIX */

@media (max-width: 850px) {
    .video-page,
    .videography-page {
        padding: 18px 10px 28px;
    }

    .video-choice-grid,
    .folder-menu,
    .project-grid {
        gap: 14px;
        margin-top: 16px;
    }

    .video-choice-card,
    .folder,
    .project-card,
    .film-card {
        padding: 18px 16px;
        border-radius: 24px;
    }

    .video-choice-card h2,
    .folder h2,
    .project-card h2,
    .film-card h2 {
        font-size: 1.35rem;
        margin-bottom: 8px;
    }

    .video-choice-card p,
    .folder p,
    .project-card p,
    .film-card p {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 10px;
    }
}

/* WORK WITH ME / SERVICES PAGE */

.services-page {
    padding: 35px 25px 45px;
}

.services-intro-card,
.services-note-card,
.booking-notes-card,
.services-cta-card {
    width: 720px;
    max-width: 88%;

    margin: 20px auto 35px;
    padding: 25px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 10px 25px rgba(0,80,35,0.16);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.services-intro-card h1 {
    margin-top: 0;
    margin-bottom: 12px;

    color: #176b3a;

    text-shadow:
        2px 2px 0 white,
        0 0 12px rgba(142,255,122,0.65);
}

.services-intro-card p,
.services-note-card p,
.services-cta-card p {
    margin-bottom: 0;

    color: #2f5f44;

    line-height: 1.55;
}

.services-note-card {
    margin-top: -15px;
}

.services-note-card strong {
    color: #176b3a;
}

.services-section-title {
    margin: 38px auto 22px;
    text-align: center;
}

.services-section-title h2 {
    display: inline-block;

    margin: 0;
    padding: 11px 22px;

    border-radius: 999px;

    color: #176b3a;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.94),
            rgba(223,255,240,0.76)
        );

    border: 2px solid rgba(255,255,255,0.95);

    font-size: 1.45rem;

    text-shadow:
        1px 1px 0 white;

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,0.95),
        0 7px 16px rgba(0,80,35,0.15);
}

.services-grid {
    width: 850px;
    max-width: 92%;

    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.service-card {
    position: relative;

    min-height: 390px;

    padding: 22px 18px;

    border-radius: 34px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.96) 0%,
            rgba(255,255,255,0.68) 16%,
            rgba(199,255,218,0.86) 50%,
            rgba(49,184,107,0.82) 100%
        );

    border: 4px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.9),
        inset 0 -7px 14px rgba(0,100,45,0.16),
        0 14px 35px rgba(0,80,35,0.22);

    color: #17422a;

    transition:
        transform 0.25s ease,
        filter 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card::before {
    content: "";

    position: absolute;
    top: 12px;
    left: 16px;
    right: 16px;

    height: 34%;

    border-radius: 28px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.58),
            rgba(255,255,255,0.06)
        );

    z-index: 1;

    pointer-events: none;
}

.service-card:hover {
    transform: translateY(-7px) scale(1.035);

    filter: brightness(1.07) saturate(1.08);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,1),
        inset 0 -7px 14px rgba(0,100,45,0.16),
        0 18px 42px rgba(0,80,35,0.34);
}

.featured-service {
    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.98) 0%,
            rgba(223,255,240,0.8) 18%,
            rgba(142,255,122,0.9) 50%,
            rgba(49,184,107,0.9) 100%
        );
}

.service-icon {
    position: relative;
    z-index: 2;

    width: 62px;
    height: 62px;

    margin: 0 auto 15px;

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

    border-radius: 22px;

    font-size: 34px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #b9ffd4 45%,
            #31b86b
        );

    border: 3px solid white;

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 6px 14px rgba(0,80,35,0.22);
}

.service-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 10px;

    color: #176b3a;

    font-size: 1.35rem;

    text-shadow:
        1px 1px 0 white;
}

.service-price {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin: 0 0 14px;
    padding: 8px 13px;

    border-radius: 999px;

    color: white;
    font-weight: bold;
    font-size: 13px;

    background:
        linear-gradient(
            to bottom,
            #8eff7a,
            #31b86b,
            #176b3a
        );

    border: 2px solid white;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.8);

    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.95),
        0 4px 8px rgba(0,80,35,0.16);
}

.service-card p {
    position: relative;
    z-index: 2;

    color: #2f5f44;

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

.service-card ul {
    position: relative;
    z-index: 2;

    margin: 14px auto 0;
    padding-left: 22px;

    max-width: 210px;

    text-align: left;

    color: #2f5f44;

    font-size: 13px;
    line-height: 1.55;
}

.booking-notes-card {
    text-align: left;
}

.booking-notes-card h2,
.services-cta-card h2 {
    margin-top: 0;
    margin-bottom: 14px;

    color: #176b3a;

    text-align: center;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.45);
}

.booking-notes-card ul {
    margin: 0;
    padding-left: 22px;

    color: #2f5f44;

    line-height: 1.7;
}

.services-cta-card {
    text-align: center;
}

.services-contact-button {
    display: inline-block;

    margin-top: 22px;
    padding: 12px 24px;

    border-radius: 999px;

    text-decoration: none;

    color: white;
    font-weight: bold;

    background:
        linear-gradient(
            to bottom,
            white,
            #b9ffd4 42%,
            #31b86b
        );

    border: 2px solid white;

    text-shadow:
        1px 1px 2px rgba(0,80,35,0.75);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 5px 12px rgba(0,80,35,0.22);

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.services-contact-button:hover {
    transform: translateY(-2px) scale(1.05);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 7px 16px rgba(0,80,35,0.3);
}


/* SERVICES MOBILE FIX */

@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr;
        width: 86%;
    }

    .service-card {
        min-height: auto;
    }
}

@media (max-width: 850px) {
    .services-page {
        padding: 18px 10px 28px;
    }

    .services-intro-card,
    .services-note-card,
    .booking-notes-card,
    .services-cta-card {
        width: 86%;
        max-width: 86%;

        margin: 18px auto 24px;
        padding: 22px 16px;

        border-radius: 26px;
    }

    .services-intro-card h1 {
        font-size: 2rem;
        line-height: 1.1;
        margin-bottom: 12px;
    }

    .services-intro-card p,
    .services-note-card p,
    .services-cta-card p {
        font-size: 14px;
        line-height: 1.45;
    }

    .services-section-title {
        margin: 28px auto 16px;
    }

    .services-section-title h2 {
        font-size: 1.25rem;
        padding: 10px 18px;
    }

    .services-grid {
        width: 86%;
        max-width: 86%;

        gap: 16px;
        margin-bottom: 26px;
    }

    .service-card {
        padding: 22px 16px;
        border-radius: 26px;
    }

    .service-icon {
        width: 54px;
        height: 54px;

        border-radius: 18px;

        font-size: 30px;
    }

    .service-card h3 {
        font-size: 1.25rem;
    }

    .service-card p {
        font-size: 13px;
        line-height: 1.45;
    }

    .service-card ul {
        max-width: 240px;

        font-size: 13px;
        line-height: 1.5;
    }

    .booking-notes-card {
        text-align: center;
    }

    .booking-notes-card ul {
        text-align: left;
        font-size: 13px;
        line-height: 1.55;
    }
}

/* LANGUAGE SWITCHER */
.language-switcher {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  font-family: inherit;
}

.language-button {
  background: #fff;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: 3px 3px 0 #000;
}

.language-menu {
  display: none;
  position: absolute;
  bottom: 48px;
  right: 0;
  background: #fff;
  border: 2px solid #000;
  border-radius: 12px;
  min-width: 150px;
  box-shadow: 3px 3px 0 #000;
  overflow: hidden;
}

.language-menu.show {
  display: block;
}

.language-menu a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
}

.language-menu a:hover {
  background: #f3d7ff;
}

@media (max-width: 600px) {
  .language-switcher {
    bottom: 16px;
    right: 16px;
    z-index: 99999;
  }

  .language-menu {
    bottom: 48px;
    right: 0;
  }

  .language-button {
    padding: 7px 12px;
    font-size: 0.9rem;
  }
}

/* ANIMATIONS */

@keyframes float {

    0% {

        transform: translateY(0px);

    }


    50% {

        transform: translateY(-15px);

    }


    100% {

        transform: translateY(0px);

    }

}

@keyframes spin {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

@keyframes loading {

    from {

        width: 0%;

    }

    to {

        width: 100%;

    }

}

/* FINAL MOBILE PATCH — paste at the very bottom */

/* Universal mobile safety */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

/* Give mobile pages breathing room */
@media (max-width: 850px) {
  body {
    padding-top: 18px;
  }

  .window,
  .film-player-window,
  .music-player-window {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 12px auto 28px;
  }

  .page-content,
  .film-player-content,
  .music-player-content {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ABOUT STORYBOOK MOBILE PHOTO FIX */
@media (max-width: 850px) {
  .storybook {
    width: 94%;
    max-width: 94%;
  }

  .photo-page-side {
    height: 300px;
  }

  .photo-page-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}

/* FINAL PHOTO CAROUSEL MOBILE FIX */

@media (max-width: 850px) {
  .photo-carousel {
    position: relative;

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

    margin: 24px auto 22px;

    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    justify-items: center;

    gap: 6px;
  }

  .carousel-stage {
    position: relative;

    grid-column: 2;

    width: 100%;
    max-width: 78vw;
    height: auto;
    min-height: 340px;

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

    overflow: visible;
  }

  .carousel-photo {
    border-radius: 26px;
    object-fit: cover;
  }

  .prev-photo,
  .next-photo {
    display: none !important;
  }

  .active-photo {
    position: relative !important;

    width: min(72vw, 310px) !important;
    height: 330px !important;

    transform: none !important;
    opacity: 1 !important;
    z-index: 5 !important;
  }

  .carousel-arrow {
    position: static !important;

    transform: none !important;

    width: 44px;
    height: 44px;

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

    z-index: 20;
  }

  .left-arrow {
    grid-column: 1;
  }

  .right-arrow {
    grid-column: 3;
  }

  .carousel-stage.turning-next .active-photo,
  .carousel-stage.turning-next .next-photo,
  .carousel-stage.turning-next .prev-photo,
  .carousel-stage.turning-prev .active-photo,
  .carousel-stage.turning-prev .prev-photo,
  .carousel-stage.turning-prev .next-photo {
    animation: none !important;
  }
}

/* HIDE XP WINDOW BUTTONS ON MOBILE */
@media (max-width: 850px) {
  .window-buttons {
    display: none !important;
  }

  .titlebar,
  .film-player-titlebar {
    justify-content: center;
    text-align: center;
  }
}

/* FILM PLAYER MOBILE VIDEO WIDTH FIX */
@media (max-width: 850px) {
  .video-frame {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border-radius: 24px;
  }

  .video-frame iframe,
  .video-frame video,
  #youtube-player,
  #youtube-player iframe,
  .local-video {
    width: 100%;
    max-width: 100%;
    display: block;
    border-radius: 18px;
  }

  .film-control-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* FINAL ABOUT STORYBOOK DESKTOP + MOBILE IMAGE FIX */

/* Desktop storybook */
@media (min-width: 851px) {
  .storybook {
    grid-template-columns: 1fr 1fr;
  }

  .storybook-page {
    height: 390px;
  }

  .photo-page-side {
    height: 390px;
  }

  .photo-page-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
object-position: center top;
  }
}

/* Mobile storybook */
@media (max-width: 850px) {
  .storybook {
    grid-template-columns: 1fr;
    width: 94%;
    max-width: 94%;
  }

  .storybook-page {
    height: auto;
  }

  .photo-page-side {
    height: 300px;
  }

  .photo-page-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}
/* EMERGENCY STORYBOOK TEXT FIX */

@media (min-width: 851px) {
  .storybook {
    align-items: stretch;
  }

  .storybook-page {
    height: auto !important;
    min-height: 390px;
    overflow: visible !important;
  }

  .photo-page-side {
    height: auto !important;
    min-height: 390px;
  }

  .photo-page-side img {
    height: 100%;
    min-height: 390px;
    object-fit: cover !important; /* CHECK THIS NEEMA CHECK THIS */
    object-position: center center !important;
    background: rgba(223,255,240,0.75);
  }

  .text-page-side {
    height: auto !important;
    min-height: 390px;
    justify-content: center;
    overflow: visible !important;
  }
}

@media (max-width: 850px) {
  .storybook-page {
    height: auto !important;
    overflow: hidden;
  }

  .text-page-side {
    height: auto !important;
    overflow: visible !important;
  }

  .photo-page-side {
    height: 300px !important;
  }

  .photo-page-side img {
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* PHOTOGRAPHY CHOICE PNG ICONS */

.photo-choice-icon img {
  width: 30px;
  height: 30px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.75))
    drop-shadow(1px 1px 2px rgba(0,80,35,0.35));

  pointer-events: none;
}

.photo-choice-icon img[src$="leaves.png"] {
  width: 32px;
  height: 32px;
}

.photo-choice-icon img[src$="light.png"] {
  width: 30px;
  height: 30px;
}

/* VIDEOGRAPHY PREVIEW IMAGE FIX */

.video-choice-preview {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative;

  font-size: 0 !important;
}

.video-choice-preview img {
  width: 96px;
  height: 96px;

  display: block;
  object-fit: contain;

  margin: auto;

  position: relative;
  z-index: 3;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.8))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));

  pointer-events: none;
}

.video-choice-preview img[src$="videocamera.png"] {
  width: 112px;
  height: 102px;
}

.video-choice-preview img[src$="film.png"] {
  width: 104px;
  height: 104px;
}

@media (max-width: 850px) {
  .video-choice-preview img {
    width: 82px;
    height: 82px;
  }

  .video-choice-preview img[src$="videocamera.png"] {
    width: 94px;
    height: 86px;
  }

  .video-choice-preview img[src$="film.png"] {
    width: 88px;
    height: 88px;
  }
}

/* VIDEOGRAPHY CHOICE SMALL PNG ICONS */

.video-choice-icon img {
  width: 30px;
  height: 30px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,0.75))
    drop-shadow(1px 1px 2px rgba(0,80,35,0.35));

  pointer-events: none;
}

.video-choice-icon img[src$="sparkles.png"] {
  width: 32px;
  height: 32px;
}

.video-choice-icon img[src$="clapper.png"] {
  width: 31px;
  height: 31px;
}

/* FINAL HOMEPAGE NOW PLAYING CD FIX */

.home-music-widget .album-art,
.album-art {
  width: 110px !important;
  height: 110px !important;

  min-width: 110px !important;
  min-height: 110px !important;

  margin: 0 auto 14px !important;

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

  font-size: 0 !important;
  line-height: 0 !important;

  overflow: visible !important;

  animation: spin 8s linear infinite;
}

.home-music-widget .album-art img,
.album-art img {
  width: 100px !important;
  height: 100px !important;

  display: block !important;
  object-fit: contain !important;

  opacity: 1 !important;
  visibility: visible !important;

  transform: none !important;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.75))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));
}

@media (max-width: 850px) {
  .home-music-widget .album-art,
  .album-art {
    width: 92px !important;
    height: 92px !important;

    min-width: 92px !important;
    min-height: 92px !important;
  }

  .home-music-widget .album-art img,
  .album-art img {
    width: 84px !important;
    height: 84px !important;
  }
}

/* VIDEOGRAPHY BIG PREVIEW ICON POSITION FIX */

.video-choice-preview img[src$="film.png"] {
  width: 118px !important;
  height: 118px !important;

  transform: translateY(5px);
}

.video-choice-preview img[src$="videocamera.png"] {
  width: 124px !important;
  height: 116px !important;

  transform: translateY(-15px);
}

@media (max-width: 850px) {
  .video-choice-preview img[src$="film.png"] {
    width: 112px !important;
    height: 112px !important;

    transform: translateY(34px);
  }

  .video-choice-preview img[src$="videocamera.png"] {
    width: 118px !important;
    height: 108px !important;

    transform: translateY(-18px);
  }
}

/* VIDEOGRAPHY PREVIEW BOX SOFTENING */

.video-choice-preview {
  margin: 14px 18px 0;

  border-radius: 28px;

  overflow: hidden;

  min-height: 190px;
}

@media (max-width: 850px) {
  .video-choice-preview {
    margin: 14px 16px 0;

    height: 210px;
    min-height: 210px;

    border-radius: 28px;

    overflow: hidden;
  }
}

/* FINAL VIDEOGRAPHY MOBILE CLEANUP */

@media (max-width: 850px) {
  .simple-video-page {
    padding: 24px 10px 36px !important;
  }

  .video-choice-grid {
    width: 86% !important;
    max-width: 86% !important;

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

    gap: 28px !important;
    margin: 0 auto 35px !important;
  }

  .video-choice-card {
    position: relative !important;

    min-height: 430px !important;

    padding: 0 !important;

    border-radius: 34px !important;
    overflow: hidden !important;
  }

  .video-choice-preview {
    width: 100% !important;
    height: 230px !important;

    margin: 0 !important;
    padding: 0 !important;

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

    border-radius: 0 !important;

    overflow: hidden !important;

    font-size: 0 !important;
  }

  .video-choice-preview img {
    position: relative !important;

    display: block !important;
    object-fit: contain !important;

    margin: 0 auto !important;

    z-index: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  .video-choice-preview img[src$="film.png"] {
    width: 120px !important;
    height: 120px !important;

    transform: translateY(10px) !important;
  }

  .video-choice-preview img[src$="videocamera.png"] {
    width: 130px !important;
    height: 120px !important;

    transform: translateY(-50px) !important;
  }

  .video-choice-label {
    left: 20px !important;
    right: 20px !important;
    bottom: 22px !important;

    padding: 22px 18px !important;

    border-radius: 28px !important;

    z-index: 5 !important;
  }

  .video-choice-icon img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  .video-choice-label h2 {
    font-size: 2rem !important;
    line-height: 1.15 !important;
  }

  .video-choice-label p {
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
}

/* FINAL HOMEPAGE NOW PLAYING CD VISIBILITY FIX */

.home-music-widget .album-art {
  position: relative !important;

  width: 98px !important;
  height: 98px !important;

  min-width: 108px !important;
  min-height: 108px !important;

  margin: 0 auto 14px !important;
  padding: 0 !important;

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

  font-size: 0 !important;
  line-height: 0 !important;

  overflow: visible !important;

  z-index: 5 !important;

  animation: spin 8s linear infinite !important;
}

.home-music-widget .album-art img {
  width: 45x !important;
  height: 45px !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

  object-fit: contain !important;

  opacity: 1 !important;
  visibility: visible !important;

  position: relative !important;
  z-index: 6 !important;

  transform: none !important;

}

@media (max-width: 850px) {
  .home-music-widget .album-art {
    width: 65px !important;
    height: 65px !important;

    min-width: 55px !important;
    min-height: 55px !important;
  }

  .home-music-widget .album-art img {
    width: 82px !important;
    height: 82px !important;
  }
}

/* FINAL VIDEO PROJECTS MOBILE PREVIEW FIX */

@media (max-width: 850px) {
  .project-card {
    min-height: 430px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .project-preview {
    width: auto !important;
    height: 210px !important;

    margin: 14px 16px 0 !important;

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

    border-radius: 28px !important;
    overflow: hidden !important;

    font-size: 0 !important;
  }

  .project-preview img {
    position: relative !important;

    display: block !important;
    object-fit: contain !important;

    z-index: 3 !important;

    transform: translateY(-18px) !important;
  }

  .project-preview img[src$="videocamera.png"] {
    width: 100px !important;
    height: 92px !important;
    transform: translateY(-22px) !important;
  }

  .project-preview img[src$="clapper.png"] {
    width: 86px !important;
    height: 86px !important;
    transform: translateY(-18px) !important;
  }

  .project-preview img[src$="sparkles.png"] {
    width: 84px !important;
    height: 84px !important;
    transform: translateY(-18px) !important;
  }

  .project-info {
    left: 20px !important;
    right: 20px !important;
    bottom: 22px !important;

    z-index: 5 !important;

    border-radius: 28px !important;
  }
}

/* FINAL SHORT FILMS MOBILE PREVIEW FIX */

@media (max-width: 850px) {
  .film-card {
    min-height: 430px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .film-poster {
    width: auto !important;
    height: 210px !important;

    margin: 14px 16px 0 !important;

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

    border-radius: 28px !important;
    overflow: hidden !important;

    font-size: 0 !important;
  }

  .film-poster img {
    width: 104px !important;
    height: 104px !important;

    display: block !important;
    object-fit: contain !important;

    position: relative !important;
    z-index: 3 !important;

    transform: translateY(-18px) !important;

    filter:
      drop-shadow(0 2px 0 rgba(255,255,255,0.8))
      drop-shadow(2px 3px 5px rgba(0,80,35,0.35));
  }

  .film-poster .film-icon {
    transform: translateY(-18px) !important;
  }

  .film-info {
    left: 20px !important;
    right: 20px !important;
    bottom: 22px !important;

    z-index: 5 !important;

    border-radius: 28px !important;
  }
}

/* CONTACT MAILBOX PNG ICON */

.mailbox-icon {
  font-size: 0 !important;
}

.mailbox-icon img {
  width: 72px;
  height: 72px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.75))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));

  pointer-events: none;
}

@media (max-width: 850px) {
  .mailbox-icon img {
    width: 66px;
    height: 66px;
  }
}

/* SERVICES PNG ICONS */

.service-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
}

.service-icon img {
  width: 58px;
  height: 58px;

  display: block;
  object-fit: contain;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.75))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));

  pointer-events: none;
}

.service-icon img[src$="plant.png"] {
  width: 50px;
  height: 50px;
}

.service-icon img[src$="sparkles.png"] {
  width: 48px;
  height: 48px;
}

.service-icon img[src$="film.png"] {
  width: 50px;
  height: 50px;
}

.service-icon img[src$="phone.png"] {
  width: 50px;
  height: 50px;
}

.service-icon img[src$="clapper.png"] {
  width: 48px;
  height: 48px;
}

.service-icon img[src$="cd.png"] {
  width: 45px;
  height: 45px;
}

@media (max-width: 850px) {
  .service-icon img {
    width: 50px;
    height: 50px;
  }

  .service-icon img[src$="plant.png"] {
    width: 50px;
    height: 50px;
  }

  .service-icon img[src$="sparkles.png"] {
    width: 48px;
    height: 48px;
  }

  .service-icon img[src$="film.png"] {
    width: 45px;
    height: 45px;
  }
  
  .service-icon img[src$="phone.png"] {
  width: 45px;
  height: 45px;
}

.service-icon img[src$="clapper.png"] {
  width: 40px;
  height: 40px;
}

.service-icon img[src$="cd.png"] {
  width: 40px;
  height: 40px;
}
}

/* FINAL CD RECTANGLE CURSE FIX */

.home-music-widget .album-art {
  width: 104px !important;
  height: 104px !important;

  min-width: 104px !important;
  min-height: 104px !important;

  margin: 0 auto 14px !important;
  padding: 0 !important;

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

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  border-radius: 50% !important;
  overflow: visible !important;

  font-size: 0 !important;
  line-height: 0 !important;

  animation: spin 8s linear infinite !important;
}

.home-music-widget .album-art img {
  width: 75px !important;
  height: 75px !important;

  display: block !important;
  object-fit: contain !important;

  border-radius: 50% !important;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  filter:
    drop-shadow(0 2px 0 rgba(255,255,255,0.75))
    drop-shadow(2px 3px 5px rgba(0,80,35,0.35));
  transform: none !important;

}

@media (max-width: 850px) {
  .home-music-widget .album-art {
    width: 86px !important;
    height: 86px !important;

    min-width: 86px !important;
    min-height: 86px !important;
  }

  .home-music-widget .album-art img {
    width: 82px !important;
    height: 82px !important;
  }
}

.project-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SHORT FILM THUMBNAIL IMAGE */

.film-thumbnail {
  position: relative;

  height: 250px;

  display: block;

  overflow: hidden;

  font-size: 0 !important;
}

.film-thumbnail img {
  width: 100%;
  height: 100%;

  display: block;

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

  border: none;
  border-radius: 0;

  filter: saturate(1.05) brightness(0.95);

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

.film-card:hover .film-thumbnail img {
  transform: scale(1.07);
  filter: saturate(1.15) brightness(1.03);
}

.film-thumbnail::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.10),
      rgba(15,80,35,0.12),
      rgba(0,40,18,0.26)
    );

  pointer-events: none;
}

@media (max-width: 850px) {
  .film-thumbnail {
    width: auto !important;
    height: 210px !important;

    margin: 14px 16px 0 !important;

    border-radius: 28px !important;

    overflow: hidden !important;
  }

  .film-thumbnail img {
    width: 100%;
    height: 100%;

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

    border-radius: 28px !important;
  }
}

/* FINAL SHORT FILM THUMBNAIL FIX */

.film-poster.film-thumbnail {
  height: 250px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  border-radius: 0 !important;
  overflow: hidden !important;

  font-size: 0 !important;
}

.film-poster.film-thumbnail img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

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

  border-radius: 0 !important;

  transform: none !important;
}

@media (max-width: 850px) {
  .film-poster.film-thumbnail {
    width: auto !important;
    height: 210px !important;

    margin: 14px 16px 0 !important;

    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .film-poster.film-thumbnail img {
    width: 100% !important;
    height: 100% !important;

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

    border-radius: 28px !important;

    transform: none !important;
  }
}

/* FINAL VIDEO PROJECT THUMBNAIL FIX */

.project-preview.project-thumbnail {
  height: 185px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  border-radius: 0 !important;
  overflow: hidden !important;

  font-size: 0 !important;
}

.project-preview.project-thumbnail img {
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  display: block !important;

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

  border-radius: 0 !important;

  transform: none !important;
}

@media (max-width: 850px) {
  .project-preview.project-thumbnail {
    width: auto !important;
    height: 210px !important;

    margin: 14px 16px 0 !important;

    border-radius: 28px !important;
    overflow: hidden !important;
  }

  .project-preview.project-thumbnail img {
    width: 100% !important;
    height: 100% !important;

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

    border-radius: 28px !important;

    transform: none !important;
  }
}

/* FINAL STORYBOOK IMAGE FRAME FIX */

.photo-page-side {
  overflow: hidden !important;
}

.photo-page-side img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

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

  border-radius: inherit !important;
}

/* Desktop storybook */
@media (min-width: 851px) {
  .photo-page-side {
    height: auto !important;
    min-height: 390px !important;
  }

  .photo-page-side img {
    min-height: 390px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Mobile storybook */
@media (max-width: 850px) {
  .photo-page-side {
    height: 300px !important;
    min-height: 300px !important;
  }

  .photo-page-side img {
    height: 100% !important;
    min-height: 0 !important;

    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* HOMEPAGE MINI SOCIAL WIDGET */

.mini-social-widget {
    margin-top: 22px;

    padding: 14px;

    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.88),
            rgba(223,255,240,0.7)
        );

    border: 2px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 1px 5px rgba(255,255,255,0.95),
        0 8px 20px rgba(0,80,35,0.14);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.mini-social-widget h3 {
    margin: 0 0 10px;

    color: #176b3a;

    font-size: 1rem;

    text-shadow:
        1px 1px 0 white,
        0 0 8px rgba(142,255,122,0.45);
}


.mini-social-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mini-social-links a {
    width: 42px;
    height: 42px;

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

    border-radius: 15px;

    text-decoration: none;

    color: #176b3a;
    font-weight: bold;
    font-size: 13px;

    background:
        radial-gradient(
            circle at 30% 20%,
            white,
            #dffff0 45%,
            #31b86b
        );

    border: 2px solid white;

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.18);

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.mini-social-links a:hover {
    transform: translateY(-2px) scale(1.08);

    filter: brightness(1.1);
}

.mini-social-widget {
    margin-top: 18px;
}

/* SOCIAL LINKS CARD */

.social-card {
    width: 720px;
    max-width: 88%;

    margin: 0 auto 28px;
    padding: 24px;

    border-radius: 32px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.9),
            rgba(223,255,240,0.72)
        );

    border: 3px solid rgba(255,255,255,0.95);

    box-shadow:
        inset 0 2px 5px rgba(255,255,255,0.95),
        0 12px 28px rgba(0,80,35,0.18);

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.social-card h2 {
    margin: 0 0 10px;

    color: #176b3a;

    font-size: 1.9rem;

    text-shadow:
        2px 2px 0 white,
        0 0 10px rgba(142,255,122,0.45);
}

.social-card p {
    margin: 0 0 18px;

    color: #2f5f44;

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

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.social-links a {
    display: inline-block;

    padding: 10px 16px;

    border-radius: 999px;

    text-decoration: none;

    color: #176b3a;
    font-weight: bold;
    font-size: 14px;

    background:
        linear-gradient(
            to bottom,
            #ffffff,
            #dffff0 45%,
            #b9ffd4
        );

    border: 2px solid white;

    text-shadow:
        1px 1px 0 rgba(255,255,255,0.9);

    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.95),
        0 4px 10px rgba(0,80,35,0.18);

    cursor: url("cursors/link-select.cur"), pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        box-shadow 0.2s ease;
}

.social-links a:hover {
    transform: translateY(-2px) scale(1.05);

    filter: brightness(1.08);

    box-shadow:
        inset 0 2px 4px rgba(255,255,255,1),
        0 7px 16px rgba(0,80,35,0.26);
}

@media (max-width: 850px) {
    .social-card {
        width: 88%;
        padding: 20px 16px;
        border-radius: 26px;
    }

    .social-card h2 {
        font-size: 1.55rem;
    }

    .social-links {
        gap: 10px;
    }

    .social-links a {
        font-size: 13px;
        padding: 9px 13px;
    }
}

/* FINAL FONT CONSISTENCY PATCH */

html,
body,
button,
input,
textarea,
select,
a {
  font-family:
    "Comic Sans MS",
    "Comic Sans",
    "Chalkboard SE",
    "Comic Neue",
    "Trebuchet MS",
    Verdana,
    cursive,
    sans-serif !important;
}