@media (min-width: 1025px) {
    /* Hide mobile-only elements on desktop */
    .mobile-only { display: none !important; }
    .desktop-only { display: flex; } /* restore desktop sections */
    section.desktop-only { display: flex; } /* ensure sections show */
    .home-bar.desktop-only { display: flex; }

    html, body {
        height: 100%;
    }

    .main-header {
        align-items: start;
        justify-content: center;
        border-right: 1px solid #ffffff;
        height: 100%;
        width: 80px;
        box-sizing: border-box;
        z-index: 10;
        position: fixed;
        left: 0;
        top: 0;
        background: #1e1e22;
    }

    .logo {
        display: none;
    }

    nav {
        display: none;
    }

    .home-prompt {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 100%;
        cursor: pointer;
    }

    .hamburger {
        display: none;
    }

    /* Hide mobile-only elements on desktop */
    .top-icons {
        display: none;
    }

    .hero-intro-cards {
        display: none;
    }

    .home-section-bars {
        display: none;
    }

    .main-header > .language-toggle {
        display: none;
    }

    /* Language toggle */
    .language-toggle {
        position: fixed;
        bottom: 35px;
        left: 0;
        width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        z-index: 11;
    }

    .language-toggle a {
        opacity: 0.5;
        position: relative;
        cursor: pointer;
        writing-mode: horizontal-tb;
    }

    .language-toggle a.is-active {
        opacity: 1;
        font-weight: 900;
    }

    .language-toggle .diamond {
        width: 10px;
        height: 10px;
        background: #ffffff;
        transform: rotate(45deg);
    }

    /* Main area */
    main {
        position: fixed;
        top: 0;
        left: 80px;
        bottom: 0;
        right: 0;
        overflow: hidden;
        min-width: 1520px;
    }

    /* Sections */
    section {
        position: absolute;
        display: flex;
        left: 0;
        top: 0;
        min-height: 100%;
        width: calc(100vw - 80px - 5 * 80px);
        padding-top: 0;
        transform: translateX(100%);
        background: #1e1e22;
    }

    #section-1 { left: calc(80px * 1); }
    #section-2 { left: calc(80px * 2); }
    #section-3 { left: calc(80px * 3); }
    #section-4 { left: calc(80px * 4); }
    #section-5 { left: calc(80px * 5); }

    /* Section headers (tab strips) */
    .section-header {
        position: absolute;
        top: 0;
        left: -80px;
        display: block;
        height: 100vh;
        width: 80px;
        cursor: pointer;
        box-sizing: border-box;
        background: #1e1e22;
        border-left: 1px solid #ffffff;
        border-right: 1px solid #ffffff;
        z-index: 2;
    }

    .section-header .title {
        transform: rotate(180deg);
        position: absolute;
        bottom: 35px;
        left: calc(50% - 16px);
        writing-mode: vertical-rl;
        text-orientation: mixed;
        color: #ffffff;
        white-space: nowrap;
    }

    .section-header .number {
        position: absolute;
        top: 35px;
        left: 0;
        right: 0;
        text-align: center;
        color: #ffffff;
    }

    /* Active section: bold tab text */
    section.active .section-header .title,
    section.active .section-header .number {
        font-weight: 700;
    }

    /* Container inside each section */
    .container {
        width: 100%;
        display: flex;
        overflow: hidden;
        height: 100vh;
        opacity: 0;
        transition: 0.5s opacity;
    }

    section.active .container {
        opacity: 1;
    }

    /* Left panel (photo area) */
    section:not(.home) .photo-panel {
        position: relative;
        flex-shrink: 0;
        width: 1120px;
        height: 100vh;
        border-right: 1px solid #ffffff;
        overflow: hidden;
    }

    /* Right panel (content area) */
    section:not(.home) .content-panel {
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100vh;
    }

    /* Photo carousel inside left panel */
    .carousel {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .carousel-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1s ease;
        pointer-events: none;
    }

    .carousel-slide.active {
        opacity: 1;
        pointer-events: auto;
    }

    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Diamond pagination */
    .carousel-dots {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 16px;
        z-index: 5;
    }

    .carousel-dot {
        background: #ffffff;
        transform: rotate(45deg);
        cursor: pointer;
        transition: all 0.3s;
    }

    .carousel-dot.active {
        width: 10px;
        height: 10px;
        opacity: 1;
    }

    .carousel-dot.adjacent {
        width: 7px;
        height: 7px;
        opacity: 0.5;
    }

    .carousel-dot.distant {
        width: 5px;
        height: 5px;
        opacity: 0.2;
    }

    /* Introduction / title area in content panel */
    .content-panel .introduction {
        padding: 100px 55px 50px;
    }

    .content-panel .introduction p {
        font-size: 24px;
        line-height: 1.4;
    }

    .content-panel .section-body {
        border-top: 1px solid #ffffff;
        padding: 60px 55px;
    }

    /* Home section */
    .home {
        transform: none;
        width: calc(100vw - 80px - 5 * 80px);
    }

    .home .container {
        flex-direction: column;
        position: relative;
    }

    .home .hero-area {
        position: relative;
        flex: 1;
        overflow: hidden;
    }

    .home .hero-bg {
        position: absolute;
        inset: 0;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .home .atk-photo {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 74%;
        object-fit: cover;
        object-position: center top;
        z-index: 1;
    }

    .home .hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        pointer-events: none;
    }

    .home .hero-intro {
        position: absolute;
        top: 10.4%;
        left: 250px;
        color: #ffffff;
        z-index: 2;
        pointer-events: auto;
    }

    .home .hero-intro .subtitle {
        font-size: 32px;
        text-transform: uppercase;
        margin-bottom: 20px;
        line-height: 1.3;
        font-weight: 400;
    }

    .home .hero-intro .voice-type {
        font-size: 40px;
        font-weight: 900;
        text-transform: uppercase;
        line-height: 50px;
    }

    .home .hero-intro .voice-type .en {
        font-family: 'Rammetto One', cursive;
        font-weight: 400;
        text-transform: capitalize;
    }

    .home .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130px;
        height: 130px;
        cursor: pointer;
        z-index: 3;
        opacity: 0.8;
        transition: opacity 0.3s;
        pointer-events: auto;
    }

    .home .play-button:hover {
        opacity: 1;
    }

    .home .name-banner {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 23.5%;
        background: #484a55;
        border-top: 1px solid #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }

    .home .name-banner img.name-svg-desktop {
        height: 60%;
        width: auto;
    }

    .home .name-banner img.name-svg-mobile {
        display: none;
    }

    .home .name-banner h1 {
        font-family: 'Rammetto One', cursive;
        font-size: min(120px, 7.5vw);
        font-weight: 400;
        letter-spacing: 5px;
        text-transform: uppercase;
        color: #ffffff;
        white-space: nowrap;
    }

    /* Section 01 specific */
    #section-1 .content-panel .text-area {
        padding: 100px 55px 40px;
    }

    #section-1 .content-panel .introduction .section-title {
        font-size: 40px;
        line-height: 60px;
    }

    #section-1 .content-panel .introduction .section-title .rammetto {
        font-size: 40px;
    }

    #section-1 .song-list {
        padding: 30px 55px 60px;
        border-top: 1px solid #ffffff;
    }

    #section-1 .song-list .section-title {
        font-size: 32px;
        line-height: 40px;
    }

    #section-1 .tower-image {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 319px;
        height: 720px;
        border-left: 1px solid #ffffff;
        overflow: hidden;
        opacity: 0.8;
    }

    #section-1 .tower-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #section-1 .content-panel {
        position: relative;
    }

    /* Section 02 specific */
    #section-2 .content-panel .top-area {
        display: flex;
    }

    #section-2 .content-panel .bio-text {
        flex: 1;
        padding: 100px 55px;
    }

    #section-2 .content-panel .bio-text .section-title {
        text-align: right;
    }

    #section-2 .content-panel .side-photo {
        width: 720px;
        border-left: 1px solid #ffffff;
        overflow: hidden;
    }

    #section-2 .content-panel .side-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        mix-blend-mode: luminosity;
    }

    /* Section 03: scrollable content panel with teacher + accordion */
    #section-3 .content-panel {
        overflow-y: auto;
    }

    #section-3 .content-panel .introduction {
        padding: 80px 100px 50px;
    }

    #section-3 .content-panel .teacher-feature {
        display: flex;
        border-top: 1px solid #ffffff;
        min-height: 720px;
    }

    #section-3 .teacher-feature .teacher-photo {
        position: relative;
        width: 720px;
        overflow: hidden;
    }

    #section-3 .teacher-feature .teacher-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #section-3 .teacher-feature .teacher-info {
        display: flex;
        padding: 40px 20px;
        gap: 10px;
    }

    #section-3 .teacher-feature .teacher-caption {
        writing-mode: vertical-rl;
        font-style: italic;
        font-size: 20px;
        color: #d4d1ba;
    }

    #section-3 .teacher-feature .teacher-name {
        writing-mode: vertical-rl;
        font-weight: 900;
        font-size: 32px;
        color: #ffffff;
    }

    /* Accordion rows */
    .accordion-row {
        display: flex;
        border-top: 1px solid #ffffff;
        cursor: pointer;
        min-height: 200px;
        align-items: stretch;
    }

    .accordion-row:last-child {
        border-bottom: 1px solid #ffffff;
    }

    .accordion-row .acc-title {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 30px 40px;
        font-weight: 900;
        font-size: 32px;
        justify-content: center;
    }

    .accordion-row .acc-number {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid #ffffff;
        font-family: 'Rammetto One', cursive;
        font-size: 32px;
    }

    .accordion-row .acc-content {
        display: none;
        padding: 0 40px 30px;
        color: #d4d1ba;
        font-size: 20px;
        line-height: 1.8;
    }

    .accordion-row.is-active .acc-content {
        display: block;
    }

    .accordion-row.is-active {
        flex-direction: column;
    }

    .accordion-row.is-active .acc-header {
        display: flex;
        align-items: stretch;
        min-height: 200px;
    }

    .accordion-row.is-active .acc-title {
        flex: 1;
    }

    .accordion-row.is-active .acc-number {
        width: 200px;
        border-left: 1px solid #ffffff;
    }

    /* Section 04: long scroll with multiple blocks */
    #section-4 .content-panel {
        overflow-y: auto;
    }

    .photo-grid {
        display: flex;
        border-bottom: 1px solid #ffffff;
    }

    .photo-grid .grid-left {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .photo-grid .grid-right {
        flex: 1;
        border-left: 1px solid #ffffff;
        display: flex;
        flex-direction: column;
    }

    .photo-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .photo-grid img.grid-top-img {
        height: 50%;
        object-fit: cover;
    }

    .grid-bottom-row {
        height: 50%;
    }

    .grid-carousel-col {
        width: 45%;
        position: relative;
    }

    .grid-carousel-col .carousel {
        height: 100%;
    }

    .grid-spacer-col {
        flex: 1;
    }

    .photo-grid img.grid-half-img {
        height: 50%;
        object-fit: cover;
    }

    .photo-grid-row {
        display: flex;
    }

    .text-block {
        padding: 60px 100px;
        border-bottom: 1px solid #ffffff;
        text-align: center;
    }

    .text-block .section-title {
        margin-bottom: 30px;
    }

    .text-block p {
        font-size: 24px;
        line-height: 1.4;
        color: #d4d1ba;
        text-align: justify;
    }

    .wide-banner {
        width: 100%;
        border-bottom: 1px solid #ffffff;
        overflow: hidden;
        max-height: 600px;
    }

    .wide-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Roles table */
    .roles-section {
        border-bottom: 1px solid #ffffff;
    }

    .roles-header {
        padding: 40px;
        text-align: center;
        border-bottom: 1px solid #ffffff;
        font-family: 'Rammetto One', cursive;
        font-size: 32px;
        font-style: italic;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .roles-columns {
        display: flex;
    }

    .roles-column {
        flex: 1;
        padding: 40px;
        font-size: 20px;
        line-height: 1.6;
        color: #d4d1ba;
    }

    .roles-column:first-child {
        border-right: 1px solid #ffffff;
    }

    .role-name {
        font-weight: 600;
        font-style: italic;
        color: #d4d1ba;
    }

    .role-entry {
        margin-bottom: 30px;
    }

    /* Section 05: The Voice */
    #section-5 .content-panel {
        display: flex;
        flex-direction: column;
    }

    #section-5 .voice-layout {
        display: flex;
        flex: 1;
    }

    #section-5 .screenshots-stack {
        flex: 0 0 853px;
        display: flex;
        flex-direction: column;
    }

    #section-5 .screenshots-stack img {
        width: 100%;
        height: 480px;
        object-fit: cover;
        display: block;
        border-bottom: 1px solid #ffffff;
    }

    #section-5 .voice-right {
        flex: 1;
        display: flex;
        flex-direction: column;
        border-left: 1px solid #ffffff;
    }

    #section-5 .voice-text {
        flex: 1;
        padding: 60px 55px;
    }

    #section-5 .voice-logo {
        width: 200px;
        margin-bottom: 30px;
    }

    #section-5 .video-thumbnail {
        position: relative;
        border-top: 1px solid #ffffff;
        overflow: hidden;
    }

    #section-5 .video-thumbnail img {
        width: 100%;
        display: block;
    }

    #section-5 .video-thumbnail .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130px;
        height: 130px;
        cursor: pointer;
    }

    footer {
        display: none;
    }
}