@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --bg-color: #e0e0e0;
    --text-color: #1a1a1a;
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.3);
    --blob-bg: rgba(30, 30, 30, 0.8);
    --blob-text: #ffffff;

    /* Fonts */
    --font-title: 'Zalando Sans Expanded', sans-serif;
    --font-body: 'Google Sans', sans-serif;
    --font-keyword: 'Playfair Display', serif;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    width: 100%;
    overflow-x: hidden;
    position: relative;
    /* Noise texture overlay for premium feel */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* Scrollbar Helper (Lenis generally handles this, but good to have) */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

/* Loading Screen */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.progress-bar {
    width: 200px;
    height: 4px;
    background: #333;
    margin-top: 10px;
    position: relative;
}

.progress {
    width: 0%;
    height: 1px;
    /* Thin line */
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    transition: width 0.3s ease;
}

.progress-overlay {
    width: 0%;
    height: 4px;
    /* Bolder line overlay */
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Navbar */
.navbar-wrapper {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
    /* Let clicks pass through wrapper */
}

.navbar-blob {
    pointer-events: auto;
    background: var(--blob-bg);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform-origin: center top;
    transition: all 0.6s cubic-bezier(0.44, -0.08, 0, 1.38);
    overflow: hidden;
    /* Initial Large State props can be handled here or via JS */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    /* Anchor for highlight */
    align-items: center;
}

.nav-highlight {
    position: absolute;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0;
    /* Hidden initially until JS sets it */
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

.nav-current-label {
    display: none;
    color: var(--blob-text);
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.nav-link {
    color: var(--blob-text);
    text-decoration: none;
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    transition: opacity 0.3s;
}

.nav-link:hover {
    opacity: 0.7;
}

/* Navbar Retracted State */
.navbar-blob.retracted {
    padding: 10px 30px;
    transform: scale(1);
    /* No scale, just layout change */
    min-width: 150px;
    /* Ensure space for title */
}

.navbar-blob.retracted .nav-links {
    display: none;
}

.navbar-blob.retracted .nav-current-label {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Home Section */
#home {
    position: relative;
    height: 120vh;
    /* Extra height for scroll effects */
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20vh;
}

#home-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 0.3;
    filter: blur(5px);
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(8px);
    opacity: 1;
}

.home-content {
    text-align: center;
    z-index: 1;
    pointer-events: none;
    /* Let clicks pass to canvas if needed */
    margin-top: 100px;
}

#home-title {
    font-family: var(--font-title);
    font-weight: 800;
    font-size: clamp(3rem, 10vw, 8rem);
    line-height: 0.9;
    text-transform: uppercase;
    color: #111;
    mix-blend-mode: overlay;
    /* Stylish blend */
    white-space: pre-wrap;
    /* For \n */
}

#home-desc {
    font-family: var(--font-body);
    font-size: 1.5rem;
    margin-top: 20px;
    font-weight: 300;
}

.textArt {
    font-family: var(--font-keyword);
    font-style: italic;
    font-weight: 400;
    font-size: 1.2em;
    /* Slightly larger */
}

.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-title);
    font-size: 12px;
    letter-spacing: 2px;
    opacity: 0.6;
    animation: fadeBounce 2s infinite;
}

@keyframes fadeBounce {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.6;
    }

    50% {
        transform: translate(-50%, 10px);
        opacity: 0.3;
    }
}

/* Variable Text Section */
.variable-text-container {
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


.boldScroll span {
    display: inline-block;
    font-weight: 100;
    will-change: font-weight;
    transition: font-weight 0.1s linear;
}



/* Variable Text Section (ALBUMS) */
.variable-text-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align top */
    width: 100%;
    margin-top: 5px;
    /* REQUEST: 5px margin */
    margin-bottom: 20px;
    z-index: 5;
}

.variable-font {
    font-family: var(--font-title);
    font-size: 15vw;
    font-weight: 100;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
}

/* General Section Styles */
section {
    padding: 100px 5%;
    min-height: 100vh;
    margin-bottom: 50vh;
    width: 100%;
    overflow: hidden;
}

.section-title {
    font-family: var(--font-title);
    margin-bottom: 40px;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

#album .section-title {
    font-size: 15vw;
}


/* Specific sizing for "ABOUT ME" (8 chars + space) -> 90vw / 8 ~= 11.25vw */
#about .section-title {
    font-size: 11vw;
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 10;
}

/* Specific sizing for "GET IN TOUCH" (12 chars + spaces) -> 90vw / 12 ~= 7.5vw */
#contact .section-title {
    font-size: 7.5vw;
}

/* Album Section */
/* Navbar Hidden State */
.navbar-wrapper.hidden {
    transform: translateY(-150%);
    transition: transform 0.5s ease-in-out;
}

/* Album Section */
#album {
    background-color: var(--bg-color);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Start from top */
    min-height: 100vh;
}

#album-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 60px;
    padding-left: 10vw;
    padding-bottom: 50px;
    /* REQUEST: More space below */
    padding-top: 20px;
    width: max-content;
    height: 70vh;
    /* Increased height so covers aren't cut off */
    align-items: flex-start;
}

.album-card {
    position: relative;
    background: none;
    border: none;
    border-radius: 0;
    /* REQUEST: Square default */
    padding: 0;
    width: 400px;
    height: 550px;
    /* Taller to fit */
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s ease, border-radius 0.4s ease;
}

.album-card:hover {
    transform: scale(1.02);
    border-radius: 20px;
    /* REQUEST: Round only on hover */
    z-index: 10;
}

.album-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    /* REQUEST: Square default */
    transition: filter 0.4s ease, border-radius 0.4s ease;
}

.album-card:hover .album-cover {
    filter: blur(8px);
    border-radius: 20px;
    /* REQUEST: Round only on hover */
}

/* Hidden Title Logic */
.album-overlay-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-title);
    font-size: 3rem;
    color: white;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    width: 90%;
    z-index: 2;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.album-card:hover .album-overlay-title {
    opacity: 1;
}

/* Hide original info */
.album-info {
    display: none;
}

/* Album Detail View (Full Screen Overlay) */
#album-detail-view {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-color);
    z-index: 2000;
    overflow-x: auto;
    /* Allow native horizontal scroll */
    overflow-y: hidden;
    display: none;
    flex-direction: row;
    align-items: flex-end;
    /* REQUEST: Images touch bottom */
    padding: 0;
    /* Request: Borderless effect */
    opacity: 0;
    transition: opacity 0.5s ease;
}

#album-detail-view.active {
    display: flex;
    opacity: 1;
}

/* Fixed Header in Detail View */
.detail-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 5px;
    z-index: 2005;
    pointer-events: none;
    /* Let clicks pass */
}

/* Content Wrapper for Detail View */
.detail-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    height: 100%;
    padding-right: 100px;
    padding-left: 5vw;
    /* Intro padding */
    gap: 0;
}

.detail-intro {
    flex-shrink: 0;
    width: 25vw;
    margin-right: 40px;
    padding-bottom: 50px;
    /* Lift text up a bit */
    align-self: center;
}

.detail-nav-btn.back-btn {
    font-size: 1.2rem;
    /* REQUEST: Smaller "back to albums" */
    margin: 0 0 20px 0;
    display: block;
}

.detail-image {
    height: 100%;
    /* REQUEST: Touch bottom */
    width: auto;
    object-fit: cover;
    border-radius: 0;
    /* REQUEST: Not rounded */
    margin-right: 10px;
    /* Small gap */
}

.detail-nav-btn.next-btn {
    font-size: 5rem;
    margin-left: 50px;
    align-self: center;
}

/* Utility to hide standard scrollbar in detail view for cleaner look */
#album-detail-view::-webkit-scrollbar {
    height: 0px;
    background: transparent;
}

.detail-title {
    font-family: var(--font-title);
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 20px;
}

.detail-desc {
    font-family: var(--font-body);
    font-size: 1.2rem;
}

/* About Section */
#about {
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 0;
    /* Remove default padding to control absolute pos */
}

#about-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Flex removed for diagonal manual layout via JS/GSAP */
}

.about-item {
    position: absolute;
    width: 70vw;
    /* Adjust width as needed */
    display: flex;
    align-items: center;
    gap: 50px;
    /* Initial position will be set by JS */
}

/* Maintain inner styling */
.about-text {
    flex: 1;
    font-size: 1.8rem;
    font-family: var(--font-keyword);
    line-height: 1.4;
    text-shadow: 0 4px 10px rgba(255, 255, 255, 0.4);
    opacity: 0;
}

.flip-card {
    background-color: transparent;
    width: 350px;
    height: 480px;
    perspective: 1000px;
    flex: 0 0 350px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
    /* transition is no longer needed for hover, but might be useful if we use JS to animate rotation value directly, 
       but for GSAP scrubbing, we usually don't want CSS transition fighting it. 
       Let's keep it for now but remove the hover rule. 
    */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* REMOVED HOVER FLIP
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}
*/

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.flip-card-front img,
.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* Contact Section */
#contact {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 60px;
    width: 90%;
    text-align: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}

.contact-left,
.contact-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-desc {
    font-family: var(--font-body);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: left;
}

#inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-color);
    outline: none;
    transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.form-group input:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.submit-btn {
    background: var(--text-color);
    color: var(--bg-color);
    border: none;
    border-radius: 10px;
    padding: 15px;
    font-family: var(--font-title);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.submit-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.platform-link,
.email-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 10px;
    border-radius: 10px;
    transition: background 0.3s;
}

.platform-link:hover,
.email-link:hover {
    background: rgba(255, 255, 255, 0.3);
}

.platform-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

footer {
    text-align: center;
    padding: 40px;
    font-size: 0.8rem;
    opacity: 0.5;
}

.footer-login-link {
    color: inherit;
    text-decoration: none;
    margin-left: 10px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: opacity 0.3s;
}

.footer-login-link:hover {
    opacity: 1;
    text-decoration: underline;
}

@media (max-width: 768px) {

    /* --- GLOBAL MOBILE --- */
    body {
        cursor: auto !important;
        /* Reset any custom cursor */
        overflow-x: hidden;
    }

    #loading-screen {
        display: flex !important;
        /* Show loading screen on mobile */
    }

    /* --- NAVBAR --- */
    .navbar-wrapper {
        justify-content: flex-start;
        padding-left: 20px;
        top: 10px;
        width: 100%;
        /* Ensure clicks pass through wrapper but not blob */
        pointer-events: none;
    }

    .navbar-blob {
        padding: 10px 15px;
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        min-width: 50px;
        min-height: 50px;
        border-radius: 15px;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
        pointer-events: auto !important;
        z-index: 2001;
        /* Above almost everything */
    }

    /* Burger Icon */
    .burger-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 25px;
        height: 18px;
        cursor: pointer;
        z-index: 20;
    }

    .burger-menu .line {
        width: 100%;
        height: 2px;
        background: white;
        transition: all 0.3s ease;
    }

    /* Navbar Expanded State */
    .navbar-blob.expanded {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: #000;
        /* Full black background */
        border-radius: 0;
        padding: 40px;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        flex-direction: column;
        overflow: hidden;
    }

    /* Burger Animation when expanded */
    .navbar-blob.expanded .burger-menu {
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .navbar-blob.expanded .burger-menu .line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .navbar-blob.expanded .burger-menu .line:nth-child(2) {
        opacity: 0;
    }

    .navbar-blob.expanded .burger-menu .line:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Hide Desktop Links & Label initially */
    .nav-links,
    .nav-current-label,
    .nav-highlight {
        display: none;
    }

    /* Show links in column when expanded */
    .navbar-blob.expanded .nav-links {
        display: flex;
        flex-direction: column;
        margin-top: 0;
        /* Centered visually via justify-content */
        gap: 40px;
        width: 100%;
        align-items: center;
        animation: fadeInLinks 0.5s ease 0.2s backwards;
    }

    @keyframes fadeInLinks {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

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

    .nav-link {
        font-size: 2.5rem;
        /* Slightly larger */
        font-weight: 800;
        pointer-events: auto;
        /* Ensure clickable */
    }


    /* --- HOME --- */
    #home-title {
        font-size: 12vw;
        /* More punchy on mobile */
        word-break: break-word;
        max-width: 90vw;
    }

    /* --- ALBUMS --- */
    #album {
        height: auto;
        /* Allow natural height */
        min-height: auto;
        overflow: visible;
    }

    #album .section-title {
        font-size: 12vw;
        /* Resized down from 15vw */
        margin-bottom: 40px;
        white-space: normal;
        word-break: break-word;
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    #album-container {
        /* Force Vertical Stack */
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0 5% 100px 5%;
        gap: 120px;
        /* Increased gap */
        transform: none !important;
        /* Kill GSAP transform */
    }

    .album-card {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.2;
        /* Vertical rectangle */
        transform: none !important;
        /* Kill hover transform */
        pointer-events: auto !important;
        position: relative;
        z-index: 1;
    }

    .album-card:hover {
        transform: none;
    }

    .album-cover {
        border-radius: 15px;
        /* Always rounded slightly on mobile */
        pointer-events: none;
        /* Let clicks pass to card */
    }

    /* Mobile: Scroll-triggered Blur & Title */
    .album-card.mobile-active .album-cover {
        filter: blur(10px);
        opacity: 0.6;
    }

    .album-card.mobile-active .album-overlay-title {
        opacity: 1;
        font-size: 2rem;
    }

    /* Detail View Mobile */
    #album-detail-view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        align-items: flex-start;
        overflow-y: auto;
        overflow-x: hidden;
        padding-top: 80px;
        /* Space for header */
    }

    .detail-header-fixed h2 {
        font-size: 10vw !important;
    }

    .detail-content-wrapper {
        flex-direction: column;
        width: 100%;
        padding: 20px;
        align-items: center;
    }

    .detail-intro {
        width: 100%;
        margin-right: 0;
        margin-bottom: 40px;
        text-align: left;
    }

    .detail-image {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        margin-right: 0;
    }

    .detail-nav-btn.next-btn {
        margin: 40px 0 100px 0;
        font-size: 2rem;
    }

    /* --- ABOUT --- */
    #about {
        height: auto;
        overflow: visible;
        padding-bottom: 100px;
    }

    #about .section-title {
        font-size: 12vw;
        /* Resized down */
        position: relative;
        margin-bottom: 80px;
        white-space: normal;
        word-break: break-word;
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    #about-container {
        position: relative;
        /* Reset GSAP pinning context if possible handled in JS, but here we stack */
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 120px;
        transform: none !important;
        padding-bottom: 150px;
    }

    .about-item {
        position: relative !important;
        /* Override inline styles from JS */
        top: auto !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100%;
        flex-direction: column;
        padding: 0 20px;
        align-items: center;
        text-align: center;
        gap: 40px;
    }

    .about-text {
        font-size: 1.5rem;
        opacity: 1 !important;
    }

    .flip-card {
        width: 100%;
        max-width: 350px;
        height: 450px;
    }

    /* --- CONTACT --- */
    .contact-glass {
        padding: 30px 15px;
        /* Reduced padding to save horizontal space */
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        pointer-events: auto !important;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-left {
        order: 1;
        /* Inquiry first */
    }

    .contact-right {
        order: 2;
        /* Connections second */
        display: flex;
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

    #contact .section-title {
        font-size: 8vw;
        /* Consistently scaled for mobile */
        white-space: normal;
        word-break: break-word;
        max-width: 90vw;
        margin: 0 auto 40px auto;
    }

    .platforms-list,
    .emails-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}