/**
 * ============================================================
 * ECHO ENTERTAINMENT - CONTENT STYLES
 * ============================================================
 * 
 * Version 2.1 - Fixed mobile menu alignment, back button, contact
 *               ADDED: Hide original hero page on initial load
 * 
 * ============================================================
 */

/* ==========================================
   CRITICAL: HIDE ORIGINAL HERO/APP CONTENT IMMEDIATELY
   This prevents the original hero page from flashing
   Must be at the TOP of the CSS file for earliest application
   =========================================== */

/* Hide the app-wrapper (original React content) by default */
.app-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* When we explicitly want to show it (class added by JS) */
.app-wrapper.echo-show-original {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Also hide any hero-related elements that might show outside our injected content */
.about__hero-wrapper:not(#echo-injected-content .about__hero-wrapper),
.detail__hero:not(#echo-injected-content .detail__hero),
.detail--first:not(#echo-injected-content .detail--first) {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================
   LOGO SIZE INCREASE (~30% larger)
   =========================================== */


.svgLogo {
    height: 3.9rem !important;
    max-width: calc(3.9rem * 4.82) !important;
}

.svgLogo .svgLogo__lucy {
    height: 3.9rem !important;
    width: 3.9rem !important;
}

.svgLogo--large {
    height: 5.2rem !important;
    max-width: calc(5.2rem * 4.82) !important;
}

.svgLogo--large .svgLogo__lucy {
    height: 5.2rem !important;
    width: 5.2rem !important;
}

@media only screen and (max-width: 768px) {
    .svgLogo {
        height: 3.12rem !important;
        max-width: calc(3.12rem * 2.98) !important;
    }
    
    .svgLogo .svgLogo__lucy {
        height: 3.12rem !important;
        width: 3.12rem !important;
    }
    
    .svgLogo--large {
        height: 3.9rem !important;
        max-width: calc(3.9rem * 2.98) !important;
    }
    
    .svgLogo--large .svgLogo__lucy {
        height: 3.9rem !important;
        width: 3.9rem !important;
    }
}

/* ==========================================
   MUSAI LINK - CHANGE TO "TO MUSAI" & HIDE ARROW
   =========================================== */

/* Hide the arrow icons in the MUSAI link */
.ext-lusion-link svg {
    display: none !important;
}

/* Replace MUSAI text with TO MUSAI */
.ext-lusion-link a.link[href*="musaistudio.com"] {
    font-size: 0 !important;
}

.ext-lusion-link a.link[href*="musaistudio.com"]::after {
    content: 'TO MUSAI';
    font-size: 1.34rem;
    line-height: 100%;
    letter-spacing: 0.02em;
}

/* Footer MUSAI link styling */
.footer .ext-lusion-link a.link[href*="musaistudio.com"]::after {
    font-size: 1.45rem;
}

@media only screen and (max-width: 1024px) {
    .ext-lusion-link a.link[href*="musaistudio.com"]::after {
        font-size: 1.17rem;
    }
}

/* ==========================================
   PRETENDARD FONT FOR KOREAN TEXT
   =========================================== */

/* Apply Pretendard as the primary font for Korean characters */
:root {
    --font-korean: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* Global Korean font fallback - Pretendard will be used for Korean characters */
body,
html,
* {
    font-family: Aeonik, var(--font-korean), sans-serif !important;
}

/* Ensure all text elements use Pretendard for Korean */
p, h1, h2, h3, h4, h5, h6, span, a, li, td, th, label, input, textarea, button, div {
    font-family: Aeonik, var(--font-korean), sans-serif;
}

/* Monospace elements should still use monospace with Korean fallback */
code, pre, .t-title-mono, .about__footer-title {
    font-family: IBMPlexMono-Medium, "Pretendard Variable", Pretendard, monospace !important;
}

/* ==========================================
   CRITICAL: MOBILE HAMBURGER MENU - FORCE RIGHT SIDE
   =========================================== */

/* 
 * The original CSS already positions .navbar__menu with position:fixed; right:2rem
 * We just need to ensure nothing breaks that.
 * This CSS reinforces the positioning.
 */

@media only screen and (max-width: 768px) {
    
    /* Ensure the navbar grid doesn't interfere with hamburger */
    .navbar > .grid-view {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 1.5rem !important;
        padding-right: 4rem !important; /* Leave space for hamburger */
        width: 100% !important;
    }
    
    /* Logo stays on the left */
    .navbar__left {
        flex: 0 0 auto !important;
        width: auto !important;
        grid-column: unset !important;
        order: 1 !important;
    }
    
    /* Views in center - or hide if not needed */
    .navbar__views {
        flex: 1 1 auto !important;
        width: auto !important;
        grid-column: unset !important;
        display: flex !important;
        justify-content: center !important;
        order: 2 !important;
    }
    
    /* CRITICAL: Hamburger menu MUST be fixed position on right */
    .navbar__menu {
        display: flex !important;
        position: fixed !important;
        top: 2rem !important;
        right: 1.5rem !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1001 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        float: none !important;
    }
    
    /* Hide buttons on mobile - they shouldn't show */
    .navbar__buttons {
        display: none !important;
    }
    
    /* Hide theme switcher on mobile */
    .navbar__theme {
        display: none !important;
    }
}

/* Extra small screens - same positioning */
@media only screen and (max-width: 480px) {
    .navbar > .grid-view {
        padding-left: 1rem !important;
        padding-right: 3.5rem !important;
    }
    
    .navbar__menu {
        right: 1rem !important;
        top: 2rem !important;
    }
}

/* ==========================================
   MOBILE MENU - HIDE BACK BUTTON & GO_BACK
   =========================================== */

/* Hide all back-related elements in mobile menu - AGGRESSIVE */
.mobile-menu .go_back,
.mobile-menu .navbar__item.go_back,
.mobile-menu a.go_back,
.mobile-menu [class*="go_back"],
.mobile-menu__row--back,
.go_back {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide any row containing go_back (for browsers that support :has) */
.mobile-menu .mobile-menu__row:has(.go_back) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Target the first row specifically - often the back button */
/* This will be controlled primarily by JS but CSS backup */
.mobile-menu > .mobile-menu__row:first-of-type .go_back,
.mobile-menu > div:first-child .go_back,
.mobile-menu .grid-view > .mobile-menu__row:first-child .go_back {
    display: none !important;
}

/* ==========================================
   DESKTOP NAVBAR - CENTER ALIGNMENT
   =========================================== */

@media only screen and (min-width: 1025px) {
    .navbar .grid-view {
        justify-content: center;
    }
    
    .navbar__left {
        grid-column: span 3 !important;
    }
    
    .navbar__buttons {
        grid-column: span 5 !important;
        justify-content: center !important;
    }
    
    .navbar__views {
        grid-column: span 2 !important;
        justify-content: center !important;
    }
    
    .navbar__theme {
        grid-column: span 2 !important;
    }
}

/* ==========================================
   HIDE THEME SWITCHER EVERYWHERE
   =========================================== */

.navbar__theme,
.theme-switcher {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================
   MOBILE MENU - COMPACT STYLING
   =========================================== */

.mobile-menu__row {
    padding: 1.4rem 2rem !important;
}

.mobile-menu__link-label {
    font-size: 2rem !important;
    line-height: 110% !important;
}

.mobile-menu__ext-links {
    row-gap: 1.4rem !important;
}

.mobile-menu__subscribe {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* ==========================================
   SCROLL CONTAINER - TRANSPARENT FOR PARTICLES
   =========================================== */

.echo-scroll-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    background-color: transparent !important;
    pointer-events: auto;
    touch-action: none;
}

.echo-scroll-content {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-top: 120px;
    /* padding-bottom: 100px; */
    will-change: transform;
    background-color: transparent !important;
}

@media only screen and (max-width: 1024px) {
    .echo-scroll-content {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 768px) {
    .echo-scroll-content {
        padding-top: 80px;
    }
}

#echo-injected-content {
    width: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-out;
    background-color: transparent !important;
}

/* ==========================================
   NAVBAR VISIBILITY FIX
   =========================================== */

.navbar {
    z-index: 100 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: block !important;
}

.navbar > * {
    pointer-events: auto !important;
}

.navbar a,
.navbar button,
.navbar .link {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================
   CURSOR EFFECTS
   =========================================== */

.cursor {
    z-index: 99999 !important;
    pointer-events: none !important;
}

.echo-scroll-container,
.echo-scroll-content,
#echo-injected-content {
    isolation: auto;
}

/* ==========================================
   CONTENT SECTIONS - SEMI-TRANSPARENT
   =========================================== */

.about__content,
.about__footer {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    margin: 0 auto 2rem auto;
    padding: 2.5rem 3rem;
    max-width: 1500px;
    text-align: center;
}

.about__content .about-faq,
.about__footer .about__footer-grid {
    text-align: left;
}

.about__content .about-faq__question,
.about__content .about-faq__answer {
    text-align: left;
}

.about__footer-title {
    text-align: center;
}

@media only screen and (max-width: 768px) {
    .about__content,
    .about__footer {
        margin: 0 auto 1rem auto;
        padding: 1.5rem 1.5rem;
        max-width: calc(100% - 1rem);
    }
}

[data-theme="dark"] .about__content,
[data-theme="dark"] .about__footer {
    background-color: rgba(0, 0, 0, 0.92);
}

/* Also support system dark mode preference */
@media (prefers-color-scheme: dark) {
    .about__content,
    .about__footer {
        background-color: rgba(0, 0, 0, 0.92);
    }
    
    .header.grid-view {
        background-color: rgba(0, 0, 0, 0.92);
    }
}

.header.grid-view {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    text-align: left;
}

@media only screen and (min-width: 769px) {
    margin: 0 auto 2rem auto;
    padding: 3rem 4rem;
    max-width: 1500px;
}

.header.grid-view .header__title {
    text-align: left;
}

.header.grid-view .header__title h1 {
    text-align: left;
}

.header.grid-view .header__description {
    text-align: left;
}

[data-theme="dark"] .header.grid-view {
    background-color: rgba(0, 0, 0, 0.92);
}

@media only screen and (max-width: 768px) {
    .header.grid-view {
        margin: 0 auto 1rem auto;
        padding: 1.5rem 1.5rem;
        max-width: calc(100% - 1rem);
    }
}



.about__hero-wrapper {
    background-color: transparent !important;
}

/* ==========================================
   UTILITY CLASSES
   =========================================== */

.echo-mt-1 { margin-top: 1rem; }
.echo-mt-2 { margin-top: 2rem; }
.echo-mt-3 { margin-top: 3rem; }
.echo-mt-4 { margin-top: 4rem; }
.echo-mt-5 { margin-top: 5rem; }

.echo-mb-1 { margin-bottom: 1rem; }
.echo-mb-2 { margin-bottom: 2rem; }
.echo-mb-3 { margin-bottom: 3rem; }
.echo-mb-4 { margin-bottom: 4rem; }
.echo-mb-5 { margin-bottom: 5rem; }

/* Center filter sections */
.exp-list__filter.grid-view,
.grid-view.echo-mb-3 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
}

.filter {
    justify-content: center;
}

/* ==========================================
   ARTIST VERTICAL LIST LAYOUT
   =========================================== */

.echo-artist-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 0 2rem;
    background-color: transparent !important;
    max-width: 1500px;
    margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
    .echo-artist-list {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 2rem;
        max-width: 600px;
    }
}

@media only screen and (max-width: 768px) {
    .echo-artist-list {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        gap: 0.75rem;
    }
}

/* Artist Row - Horizontal Card */
.echo-artist-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .echo-artist-row {
    background: rgba(30, 30, 30, 0.95);
}

.echo-artist-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Artist Image - Left Side */
.echo-artist-row__image {
    flex-shrink: 0;
    width: 125px;
    height: 125px;
    border-radius: 12px;
    overflow: hidden;
}

@media only screen and (min-width: 1400px) {
    .echo-artist-row__image {
        width: 150px;
        height: 150px;
    }
}

.echo-artist-row__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.echo-artist-row:hover .echo-artist-row__image img {
    filter: saturate(1);
    transform: scale(1.05);
}

/* Artist Info - Center */
.echo-artist-row__info {
    flex: 1;
    min-width: 0;
}

.echo-artist-row__name {
    font-family: Aeonik, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--color-black, #000);
}

@media only screen and (min-width: 1400px) {
    .echo-artist-row__name {
        font-size: 1.8rem;
        margin-bottom: 0.4rem;
    }
}

.echo-artist-row__role {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.8rem;
    letter-spacing: 0.05em;
}

.echo-artist-row__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.echo-artist-row__tag {
    display: inline-block;
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border-radius: 20px;
    letter-spacing: 0.03em;
}

[data-theme="dark"] .echo-artist-row__tag {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

/* Arrow Icon - Right Side */
.echo-artist-row__arrow {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

[data-theme="dark"] .echo-artist-row__arrow {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

.echo-artist-row:hover .echo-artist-row__arrow {
    opacity: 1;
    transform: translateX(0);
}

.echo-artist-row__arrow svg {
    width: 20px;
    height: 20px;
}

/* Mobile adjustments for artist rows */
@media only screen and (max-width: 768px) {
    .echo-artist-row {
        padding: 1rem;
        gap: 1rem;
    }
    
    .echo-artist-row:hover {
        transform: translateX(4px);
    }
    
    .echo-artist-row__image {
        width: 80px;
        height: 80px;
        border-radius: 10px;
    }
    
    .echo-artist-row__name {
        font-size: 1.4rem;
    }
    
    .echo-artist-row__role {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .echo-artist-row__tag {
        font-size: 0.65rem;
        padding: 0.25rem 0.6rem;
    }
    
    .echo-artist-row__arrow {
        width: 32px;
        height: 32px;
        opacity: 1;
        transform: translateX(0);
    }
    
    .echo-artist-row__arrow svg {
        width: 16px;
        height: 16px;
    }
}

/* Tablet adjustments - single column with horizontal hover */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .echo-artist-row:hover {
        transform: translateX(8px);
    }
}

/* ==========================================
   ARTIST MODAL - MODERN BOLD DESIGN
   =========================================== */

.echo-artist-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.echo-artist-modal.active {
    opacity: 1;
    visibility: visible;
}

.echo-artist-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.echo-artist-modal__container {
    position: relative;
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh;
    background: var(--color-white, #fff);
    border-radius: 24px;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .echo-artist-modal__container {
    background: #1a1a1a;
}

.echo-artist-modal.active .echo-artist-modal__container {
    transform: scale(1) translateY(0);
}

.echo-artist-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .echo-artist-modal__close {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

.echo-artist-modal__close:hover {
    transform: rotate(90deg);
}

.echo-artist-modal__close svg {
    width: 24px;
    height: 24px;
}

.echo-artist-modal__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-height: 90vh;
}

@media only screen and (max-width: 900px) {
    .echo-artist-modal__content {
        grid-template-columns: 1fr;
    }
}

.echo-artist-modal__gallery {
    position: relative;
    background: #000;
    min-height: 400px;
}

.echo-artist-modal__main-image {
    width: 100%;
    height: 100%;
    min-height: 400px;
    max-height: 70vh;
    object-fit: cover;
}

.echo-artist-modal__thumbnails {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 12px;
}

.echo-artist-modal__thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.echo-artist-modal__thumb.active,
.echo-artist-modal__thumb:hover {
    opacity: 1;
    border-color: #fff;
}

.echo-artist-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.echo-artist-modal__details {
    padding: 3rem;
    overflow-y: auto;
    max-height: 90vh;
}

@media only screen and (max-width: 900px) {
    .echo-artist-modal__details {
        padding: 2rem;
        max-height: 50vh;
    }
}

@media only screen and (max-width: 768px) {
    .echo-artist-modal__details {
        padding: 1.5rem;
    }
}

.echo-artist-modal__name {
    font-family: Aeonik, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: var(--color-black, #000);
}

[data-theme="dark"] .echo-artist-modal__name {
    color: var(--color-white, #fff);
}

@media only screen and (max-width: 768px) {
    .echo-artist-modal__name {
        font-size: 2.5rem;
    }
}

.echo-artist-modal__role {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 1rem;
    text-transform: uppercase;
    opacity: 0.6;
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
}

.echo-artist-modal__bio {
    font-family: Aeonik, sans-serif;
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--color-black, #000);
    opacity: 0.85;
    margin-bottom: 2rem;
}

[data-theme="dark"] .echo-artist-modal__bio {
    color: var(--color-white, #fff);
}

.echo-artist-modal__section {
    margin-bottom: 1.5rem;
}

.echo-artist-modal__section-title {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.5;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.echo-artist-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.echo-artist-modal__tag {
    display: inline-block;
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 0.4rem 1rem;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border-radius: 20px;
}

[data-theme="dark"] .echo-artist-modal__tag {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

.echo-artist-modal__credits {
    list-style: none;
    padding: 0;
    margin: 0;
}

.echo-artist-modal__credits li {
    font-family: Aeonik, sans-serif;
    font-size: 1.2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-black, #000);
}

[data-theme="dark"] .echo-artist-modal__credits li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white, #fff);
}

.echo-artist-modal__credits li:last-child {
    border-bottom: none;
}

/* HIDDEN - Get in Touch button removed from artist modal */
.echo-artist-modal__contact {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ==========================================
   CONTACT PAGE STYLES
   =========================================== */

.echo-contact-page-wrapper {
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.echo-contact-page-wrapper .echo-contact-modal__content {
    background: #FFFFFF;
    border-radius: 1rem;
    max-width: 1500px;
    width: 100%;
    padding: 3rem;
}

@media only screen and (max-width: 768px) {
    .echo-contact-page-wrapper {
        padding: 2rem 1rem;
        min-height: auto;
    }
    
    .echo-contact-page-wrapper .echo-contact-modal__content {
        padding: 2rem 1.5rem;
        border-radius: 0.75rem;
    }
}

/* Contact page logo */
.echo-contact-logo {
    width: 50%;
    margin: 2rem 0 2.5rem 0;
}

.echo-contact-logo__img {
    width: 50%;
    height: auto;
    display: block;
}

/* Ensure modal styles work in page context */
.echo-contact-page-wrapper .echo-contact-modal__text {
    align-items: flex-start;
}

.echo-contact-page-wrapper .echo-contact-modal__text svg {
    margin-top: 0.15rem;
}

/* Hide the contact modal popup (no longer used) */
.echo-contact-modal {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================
   ABOUT PAGE - PROFESSIONAL CENTERED LAYOUT
   =========================================== */

.echo-about-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 2rem 8rem;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    .echo-about-page {
        padding: 3rem 1.5rem 5rem;
    }
}

/* Hero Section */
.echo-about-hero {
    margin-bottom: 4rem;
}

.echo-about-hero__title {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.02em;
    color: var(--color-black, #000);
    margin: 0;
}

@media (prefers-color-scheme: dark) {
    .echo-about-hero__title {
        color: #fff;
    }
}

[data-theme="dark"] .echo-about-hero__title {
    color: #fff;
}

/* Dividers */
.echo-about-divider {
    width: 60px;
    height: 1px;
    opacity: 0.2;
    margin: 3rem auto;
}

.echo-about-divider--short {
    width: 40px;
    margin: 2.5rem auto;
}

/* Content Sections */
.echo-about-section {
    margin-bottom: 2.5rem;
}

.echo-about-section__title {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--color-black, #000);
    margin: 0 0 2rem 0;
    opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
    .echo-about-section__title {
        color: #fff;
    }
}

[data-theme="dark"] .echo-about-section__title {
    color: #fff;
}

.echo-about-text {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.9;
    color: var(--color-black, #000);
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.01em;
}

.echo-about-text:last-child {
    margin-bottom: 0;
}

@media (prefers-color-scheme: dark) {
    .echo-about-text {
        color: rgba(255, 255, 255, 0.9);
    }
}

[data-theme="dark"] .echo-about-text {
    color: rgba(255, 255, 255, 0.9);
}

/* List Styling */
.echo-about-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.echo-about-list li {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-black, #000);
    position: relative;
    padding-left: 1.5rem;
    text-align: left;
    display: inline-block;
    margin: 0 auto;
}

.echo-about-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    opacity: 0.4;
}

@media (prefers-color-scheme: dark) {
    .echo-about-list li {
        color: rgba(255, 255, 255, 0.85);
    }
}

[data-theme="dark"] .echo-about-list li {
    color: rgba(255, 255, 255, 0.85);
}

@media only screen and (max-width: 768px) {
    .echo-about-list {
        align-items: flex-start;
        padding: 0 1rem;
    }
    
    .echo-about-list li {
        margin: 0;
    }
}

/* Closing Section */
.echo-about-section--closing {
    margin-top: 3rem;
}

/* Final Statement */
.echo-about-final {
    /* 
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    */
}

@media (prefers-color-scheme: dark) {
    .echo-about-final {
        border-top-color: rgba(255, 255, 255, 0.1);
    }
}

[data-theme="dark"] .echo-about-final {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.echo-about-final__text {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.7;
    color: var(--color-black, #000);
    margin: 0 0 1.5rem 0;
}

@media (prefers-color-scheme: dark) {
    .echo-about-final__text {
        color: #fff;
    }
}

[data-theme="dark"] .echo-about-final__text {
    color: #fff;
}

.echo-about-final__cta {
    font-family: 'Pretendard', 'Noto Sans KR', Aeonik, sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-black, #000);
    margin: 2rem 0 0 0;
    letter-spacing: -0.02em;
}

@media (prefers-color-scheme: dark) {
    .echo-about-final__cta {
        color: #fff;
    }
}

[data-theme="dark"] .echo-about-final__cta {
    color: #fff;
}

/* ==========================================
   NEWS GRID
   =========================================== */

.echo-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 0 2rem;
    max-width: 1500px;
    margin: 0 auto;
}

@media only screen and (max-width: 1024px) {
    .echo-news-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 2rem;
    }
}

@media only screen and (max-width: 768px) {
    .echo-news-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        max-width: 500px;
    }
}

.echo-news-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.4s ease;
}

[data-theme="dark"] .echo-news-card {
    background: rgba(30, 30, 30, 0.95);
}

.echo-news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.echo-news-card__image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.echo-news-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-news-card:hover .echo-news-card__image img {
    transform: scale(1.05);
}

.echo-news-card__content {
    padding: 1.5rem;
}

.echo-news-card__date {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.echo-news-card__title {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 1rem;
}

.echo-news-card__excerpt {
    font-size: 1rem;
    line-height: 140%;
    opacity: 0.7;
}

.echo-news-card__category {
    display: inline-block;
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border-radius: 20px;
    margin-top: 1rem;
}

[data-theme="dark"] .echo-news-card__category {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

.echo-news-card--featured {
    grid-column: span 3;
}

@media only screen and (max-width: 1024px) {
    .echo-news-card--featured {
        grid-column: span 2;
    }
}

@media only screen and (max-width: 768px) {
    .echo-news-card--featured {
        grid-column: span 1;
    }
}

.echo-news-card--featured .echo-news-card__image {
    aspect-ratio: 21 / 9;
}

.echo-news-card--featured .echo-news-card__title {
    font-size: 2rem;
}

/* ==========================================
   FORM STYLES
   =========================================== */

.echo-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.echo-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media only screen and (max-width: 768px) {
    .echo-form-row {
        grid-template-columns: 1fr;
    }
}

.echo-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.echo-form-group label {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.5));
}

.echo-form-group input,
.echo-form-group textarea,
.echo-form-group select {
    width: 100%;
    padding: 1.34rem;
    border: 1px solid var(--color-black, #000);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-family: Aeonik, sans-serif;
    font-size: 1.45rem;
    color: var(--color-black, #000);
    transition: border-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

[data-theme="dark"] .echo-form-group input,
[data-theme="dark"] .echo-form-group textarea,
[data-theme="dark"] .echo-form-group select {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--color-black, #fff);
    color: var(--color-black, #fff);
}

.echo-form-group input:focus,
.echo-form-group textarea:focus,
.echo-form-group select:focus {
    outline: none;
    border-color: var(--color-black, #000);
    box-shadow: 0 0 0 2px var(--color-black-semitransparent, rgba(0, 0, 0, 0.2));
}

.echo-form-group textarea {
    min-height: 150px;
    resize: vertical;
}

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

.echo-form .button {
    align-self: flex-start;
    margin-top: 1rem;
}

/* ==========================================
   GET IN TOUCH FORM
   =========================================== */

.echo-get-in-touch-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    flex-wrap: wrap;
}

.echo-get-in-touch-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 1rem 1.5rem;
    border: 1px solid var(--color-black, #000);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 1.17rem;
    font-family: Aeonik, sans-serif;
}

[data-theme="dark"] .echo-get-in-touch-form input[type="email"] {
    background: rgba(0, 0, 0, 0.9);
    border-color: var(--color-black, #fff);
    color: var(--color-white, #fff);
}

.echo-get-in-touch-form input[type="email"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-black-semitransparent, rgba(0, 0, 0, 0.2));
}

.echo-get-in-touch-form .button {
    flex-shrink: 0;
}

.echo-form-success {
    display: none;
    padding: 1rem 1.5rem;
    background: rgba(0, 128, 0, 0.1);
    border: 1px solid rgba(0, 128, 0, 0.3);
    border-radius: 8px;
    color: #006400;
    font-family: Aeonik, sans-serif;
    margin-top: 1rem;
}

.echo-form-success.show {
    display: block;
}

/* ==========================================
   FAQ ACCORDION
   =========================================== */

.echo-faq-item {
    border-bottom: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.2));
}

.echo-faq-item:first-child {
    border-top: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.2));
}

.echo-faq-question {
    width: 100%;
    padding: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: Aeonik, sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    transition: opacity 0.25s ease-in-out;
}

.echo-faq-question:hover {
    opacity: 0.7;
}

.echo-faq-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease-in-out;
    flex-shrink: 0;
}

.echo-faq-item.open .echo-faq-icon {
    transform: rotate(45deg);
}

.echo-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-faq-item.open .echo-faq-answer {
    max-height: 500px;
}

.echo-faq-answer-content {
    padding-bottom: 2rem;
}


@media only screen and (min-width: 0px) and (max-width: 768px) {
    .about-faq__answer{
        font-size: 1.3rem
    }
}

/* ==========================================
   RESPONSIVE HELPERS
   =========================================== */

@media only screen and (max-width: 1024px) {
    .echo-hide-mobile {
        display: none !important;
    }
}

@media only screen and (min-width: 1025px) {
    .echo-hide-desktop {
        display: none !important;
    }
}

/* ==========================================
   DARK THEME ADJUSTMENTS
   =========================================== */

[data-theme="dark"] .echo-artist-row__info {
    color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-artist-row__name {
    color: var(--color-white, #fff);
}

/* ==========================================
   ARTIST TEXT VISIBILITY FIX
   Ensures text is always visible against dark backgrounds
   =========================================== */

/* Force white text on artist rows in dark mode */
[data-theme="dark"] .echo-artist-row__name,
[data-theme="dark"] .echo-artist-row__role,
[data-theme="dark"] .echo-artist-row__info,
[data-theme="dark"] .echo-artist-row__info * {
    color: #fff !important;
}

/* Also add media query fallback for dark preference */
@media (prefers-color-scheme: dark) {
    .echo-artist-row__name,
    .echo-artist-row__role,
    .echo-artist-row__info {
        color: #fff !important;
    }
}

/* ==========================================
   ARTIST MODAL TEXT VISIBILITY FIX
   Ensures all modal text is visible in dark mode
   =========================================== */

/* Force white text in artist modal for dark mode */
[data-theme="dark"] .echo-artist-modal__name,
[data-theme="dark"] .echo-artist-modal__role,
[data-theme="dark"] .echo-artist-modal__bio,
[data-theme="dark"] .echo-artist-modal__section-title,
[data-theme="dark"] .echo-artist-modal__credits li,
[data-theme="dark"] .echo-artist-modal__details {
    color: #fff !important;
}

/* Preserve tag colors in dark mode (inverted) */
[data-theme="dark"] .echo-artist-modal__tag {
    background: #fff !important;
    color: #000 !important;
}

/* IMPORTANT: Keep button text BLACK on white background in artist modal */
[data-theme="dark"] .echo-artist-modal__details .button,
[data-theme="dark"] .echo-artist-modal__details .button span,
[data-theme="dark"] .echo-artist-modal__details .button *,
[data-theme="dark"] .echo-artist-modal .button,
[data-theme="dark"] .echo-artist-modal .button span,
[data-theme="dark"] .echo-artist-modal .button *,
.echo-artist-modal__details .button,
.echo-artist-modal__details .button span,
.echo-artist-modal .button,
.echo-artist-modal .button span {
    color: #000 !important;
}

/* Dark preference fallback for artist modal */
@media (prefers-color-scheme: dark) {
    .echo-artist-modal__name,
    .echo-artist-modal__role,
    .echo-artist-modal__bio,
    .echo-artist-modal__section-title,
    .echo-artist-modal__credits li,
    .echo-artist-modal__details {
        color: #fff !important;
    }
    
    .echo-artist-modal__tag {
        background: #fff !important;
        color: #000 !important;
    }
    
    .echo-artist-modal__container {
        background: #1a1a1a !important;
    }
    
    /* Keep button text black */
    .echo-artist-modal__details .button,
    .echo-artist-modal__details .button span,
    .echo-artist-modal .button,
    .echo-artist-modal .button span {
        color: #000 !important;
    }
}

/* ==========================================
   MOBILE CONTACT SECTION TEXT FIX (ACTIVE)
   Forces white text on mobile regardless of theme attribute
   =========================================== */

@media only screen and (max-width: 768px) {
    /* Force white text on mobile contact/footer sections */
    .about__footer-title,
    .about__footer-content,
    .about__footer-desc,
    .about__footer-desc p,
    .about__footer-grid,
    .about__footer-grid p,
    .about__footer .t-title-mono,
    .about__footer p {
        color: #fff !important;
    }
    
    .about__footer .link,
    .about__footer a:not(.button) {
        color: #fff !important;
    }
    
    
}

/* Desktop dark mode text fixes */
@media (prefers-color-scheme: dark) {
    .about__footer-title,
    .about__footer-content,
    .about__footer-desc,
    .about__footer-desc p,
    .about__footer-grid p,
    .about__footer .t-title-mono,
    .about__footer p,
    .about__content p,
    .about-faq__question,
    .about-faq__answer {
        color: #fff !important;
    }
    
    .about__footer .link,
    .about__footer a:not(.button),
    .about__content .link,
    .about__content a:not(.button) {
        color: #fff !important;
    }
    
    /* Keep button text dark */
    .about__footer .button,
    .about__footer .button span,
    .about__content .button,
    .about__content .button span {
        color: #000 !important;
    }
}

/* Dark theme attribute text fixes (all screens) */
[data-theme="dark"] .about__footer-title,
[data-theme="dark"] .about__footer-content,
[data-theme="dark"] .about__footer-desc,
[data-theme="dark"] .about__footer-desc p,
[data-theme="dark"] .about__footer-grid p,
[data-theme="dark"] .about__footer .t-title-mono,
[data-theme="dark"] .about__footer p,
[data-theme="dark"] .about__content p,
[data-theme="dark"] .about-faq__question,
[data-theme="dark"] .about-faq__answer {
    color: #fff !important;
}

[data-theme="dark"] .about__footer .link,
[data-theme="dark"] .about__footer a:not(.button),
[data-theme="dark"] .about__content .link,
[data-theme="dark"] .about__content a:not(.button) {
    color: #fff !important;
}

/* Keep button text dark in dark theme */
[data-theme="dark"] .about__footer .button,
[data-theme="dark"] .about__footer .button span,
[data-theme="dark"] .about__content .button,
[data-theme="dark"] .about__content .button span {
    color: #000 !important;
}

/* ==========================================
   CONTACT MODAL
   =========================================== */

.echo-contact-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.echo-contact-modal.active {
    opacity: 1;
    visibility: visible;
}

.echo-contact-modal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.echo-contact-modal__container {
    position: relative;
    width: 90vw;
    max-width: 700px;
    max-height: 90vh;
    background: var(--color-white, #fff);
    border-radius: 24px;
    overflow-y: auto;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .echo-contact-modal__container {
    background: #1a1a1a;
}

.echo-contact-modal.active .echo-contact-modal__container {
    transform: scale(1) translateY(0);
}

.echo-contact-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .echo-contact-modal__close {
    background: #ffffff;
    color: #000000;
}

.echo-contact-modal__close:hover {
    transform: rotate(90deg);
}

.echo-contact-modal__close svg {
    width: 24px;
    height: 24px;
}

.echo-contact-modal__content {
    padding: 3rem;
}

@media only screen and (max-width: 768px) {
    .echo-contact-modal__content {
        padding: 2rem 1.5rem;
    }
}

.echo-contact-modal__title {
    font-family: Aeonik, sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

[data-theme="dark"] .echo-contact-modal__title {
    color: #ffffff;
}

@media only screen and (max-width: 768px) {
    .echo-contact-modal__title {
        font-size: 2.2rem;
        color: #ffffff;
    }
}

.echo-contact-modal__subtitle {
    font-family: Aeonik, sans-serif;
    font-size: 1.15rem;
    opacity: 0.7;
    margin-bottom: 2.5rem;
    color: #ffffff;
}

.echo-contact-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media only screen and (max-width: 600px) {
    .echo-contact-modal__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.echo-contact-modal__section {
    padding-bottom: 1rem;
}

.echo-contact-modal__section-title {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.echo-contact-modal__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

[data-theme="dark"] .echo-contact-modal__link {
    color: #ffffff;
}

.echo-contact-modal__link:hover {
    opacity: 0.7;
}

.echo-contact-modal__link svg {
    flex-shrink: 0;
    opacity: 0.7;
    stroke: #1a1a1a;
}

.echo-contact-modal__text {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    color: #1a1a1a;
}

[data-theme="dark"] .echo-contact-modal__text {
    color: #1a1a1a;
}

.echo-contact-modal__text svg {
    flex-shrink: 0;
    opacity: 0.7;
    stroke: #1a1a1a;
}

.echo-contact-modal__social {
    display: flex;
    gap: 1rem;
}

.echo-contact-modal__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #1a1a1a;
    transition: all 0.3s ease;
}

[data-theme="dark"] .echo-contact-modal__social-link {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.echo-contact-modal__social-link:hover {
    background: #ffffff;
    color: #000000;
}

[data-theme="dark"] .echo-contact-modal__social-link:hover {
    background: #ffffff;
    color: #000000;
}

.echo-contact-modal__form-section {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2rem;
}

[data-theme="dark"] .echo-contact-modal__form-section {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.echo-contact-modal__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.echo-contact-modal__form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media only screen and (max-width: 600px) {
    .echo-contact-modal__form-row {
        grid-template-columns: 1fr;
    }
}

.echo-contact-modal__form input,
.echo-contact-modal__form textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    color: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

[data-theme="dark"] .echo-contact-modal__form input,
[data-theme="dark"] .echo-contact-modal__form textarea {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.echo-contact-modal__form input:focus,
.echo-contact-modal__form textarea:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .echo-contact-modal__form input:focus,
[data-theme="dark"] .echo-contact-modal__form textarea:focus {
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.echo-contact-modal__form input::placeholder,
.echo-contact-modal__form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .echo-contact-modal__form input::placeholder,
[data-theme="dark"] .echo-contact-modal__form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.echo-contact-modal__form textarea {
    min-height: 120px;
    resize: vertical;
}

.echo-contact-modal__form .button {
    align-self: flex-start;
    margin-top: 0.5rem;
}

.echo-contact-modal__form-success {
    display: none;
    padding: 1rem 1.5rem;
    background: rgba(0, 128, 0, 0.1);
    border: 1px solid rgba(0, 128, 0, 0.3);
    border-radius: 12px;
    color: #006400;
    font-family: Aeonik, sans-serif;
    margin-top: 1rem;
}

.echo-contact-modal__form-success.show {
    display: block;
}

/* ==========================================
   CONTACT MODAL - MOBILE & DARK MODE TEXT FIX
   Forces white text for visibility on dark backgrounds
   =========================================== */

/* Force dark background on contact modal in dark mode */
@media (prefers-color-scheme: dark) {
    .echo-contact-modal__container {
        background: #1a1a1a !important;
    }
}

/* Mobile: Force all contact modal text to white - HIGH SPECIFICITY */
@media only screen and (max-width: 768px) {
    /* Container background - force dark */
    .echo-contact-modal .echo-contact-modal__container,
    .echo-contact-modal__container {
        background: #1a1a1a !important;
    }
    
    /* Title and subtitle - high specificity */
    .echo-contact-modal .echo-contact-modal__title,
    .echo-contact-modal__content .echo-contact-modal__title,
    .echo-contact-modal__title {
        color: #fff !important;
    }
    
    .echo-contact-modal .echo-contact-modal__subtitle,
    .echo-contact-modal__content .echo-contact-modal__subtitle,
    .echo-contact-modal__subtitle {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Section titles (General Inquiries, Bookings, Location, Follow Us) */
    .echo-contact-modal .echo-contact-modal__section-title,
    .echo-contact-modal__section .echo-contact-modal__section-title,
    .echo-contact-modal__section-title,
    .echo-contact-modal__content p.echo-contact-modal__section-title {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    
    /* Links and text content */
    .echo-contact-modal .echo-contact-modal__link,
    .echo-contact-modal__section .echo-contact-modal__link,
    .echo-contact-modal__link,
    a.echo-contact-modal__link {
        color: #fff !important;
    }
    
    .echo-contact-modal .echo-contact-modal__text,
    .echo-contact-modal__section .echo-contact-modal__text,
    .echo-contact-modal__text,
    p.echo-contact-modal__text {
        color: #fff !important;
    }
    
    /* Social links */
    .echo-contact-modal .echo-contact-modal__social-link,
    .echo-contact-modal__social .echo-contact-modal__social-link,
    .echo-contact-modal__social-link,
    a.echo-contact-modal__social-link {
        background: rgba(255, 255, 255, 0.15) !important;
        color: #fff !important;
    }
    
    .echo-contact-modal__social-link svg,
    .echo-contact-modal .echo-contact-modal__social-link svg {
        color: #fff !important;
        stroke: #fff !important;
    }
    
    /* Form section border */
    .echo-contact-modal .echo-contact-modal__form-section,
    .echo-contact-modal__form-section {
        border-top-color: rgba(255, 255, 255, 0.15) !important;
    }
    
    /* Form inputs - dark background with white text */
    .echo-contact-modal .echo-contact-modal__form input,
    .echo-contact-modal .echo-contact-modal__form textarea,
    .echo-contact-modal__form input,
    .echo-contact-modal__form textarea {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #fff !important;
    }
    
    .echo-contact-modal .echo-contact-modal__form input::placeholder,
    .echo-contact-modal .echo-contact-modal__form textarea::placeholder,
    .echo-contact-modal__form input::placeholder,
    .echo-contact-modal__form textarea::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    .echo-contact-modal__form input:focus,
    .echo-contact-modal__form textarea:focus {
        border-color: #fff !important;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Close button - white background, dark icon */
    .echo-contact-modal .echo-contact-modal__close,
    .echo-contact-modal__close {
        background: #fff !important;
        color: #000 !important;
    }
    
    /* Keep submit button text dark */
    .echo-contact-modal__form .button,
    .echo-contact-modal__form .button span,
    .echo-contact-modal .echo-contact-modal__form .button,
    .echo-contact-modal .echo-contact-modal__form .button span {
        color: #000 !important;
    }
    
    /* SVG icons in contact info */
    .echo-contact-modal__link svg,
    .echo-contact-modal__text svg,
    .echo-contact-modal .echo-contact-modal__link svg,
    .echo-contact-modal .echo-contact-modal__text svg {
        color: #fff !important;
        stroke: #fff !important;
    }
}

/* Also apply for system dark mode preference on all screens */
@media (prefers-color-scheme: dark) {
    .echo-contact-modal__title,
    .echo-contact-modal__subtitle,
    .echo-contact-modal__section-title,
    .echo-contact-modal__link,
    .echo-contact-modal__text {
        color: #fff !important;
    }
    
    .echo-contact-modal__social-link {
        background: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
    }
    
    .echo-contact-modal__form-section {
        border-top-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .echo-contact-modal__form input,
    .echo-contact-modal__form textarea {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #fff !important;
    }
    
    .echo-contact-modal__form input::placeholder,
    .echo-contact-modal__form textarea::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    .echo-contact-modal__close {
        background: #fff !important;
        color: #000 !important;
    }
    
    .echo-contact-modal__link svg,
    .echo-contact-modal__text svg,
    .echo-contact-modal__social-link svg {
        color: #fff !important;
        stroke: #fff !important;
    }
}

/* ==========================================
   FINAL OVERRIDE - CONTACT MODAL WHITE TEXT
   This section MUST remain at the very end of the file
   Forces white text on contact modal for mobile devices
   =========================================== */


/* NON-MEDIA-QUERY OVERRIDE - Apply always for dark modal background */
html body .echo-contact-modal__container {
    background: var(--color-black) !important;
    background-color: var(--color-black) !important;
}

html body .echo-contact-modal__title,
.echo-contact-modal__title,
h2.echo-contact-modal__title {
    color: var(--color-black) !important;
}

html body .echo-contact-modal__subtitle,
.echo-contact-modal__subtitle,
p.echo-contact-modal__subtitle {
    color: rgba(0, 0, 0, 0.7) !important;
}

html body .echo-contact-modal__section-title,
.echo-contact-modal__section-title,
p.echo-contact-modal__section-title {
    color: rgba(0, 0, 0, 0.6) !important;
}

html body .echo-contact-modal__link,
.echo-contact-modal__link,
a.echo-contact-modal__link {
    color: #1a1a1a !important;
}

html body .echo-contact-modal__text,
.echo-contact-modal__text,
p.echo-contact-modal__text {
    color: #1a1a1a !important;
}

html body .echo-contact-modal__social-link,
.echo-contact-modal__social-link,
a.echo-contact-modal__social-link {
    background: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #1a1a1a !important;
}

html body .echo-contact-modal__link svg,
html body .echo-contact-modal__text svg,
html body .echo-contact-modal__social-link svg,
.echo-contact-modal__link svg,
.echo-contact-modal__text svg,
.echo-contact-modal__social-link svg {
    color: #ffffff !important;
    stroke: #1a1a1a !important;
}

html body .echo-contact-modal__form input,
html body .echo-contact-modal__form textarea,
.echo-contact-modal__form input,
.echo-contact-modal__form textarea {
    background: rgba(255, 255, 255, 0.1) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

html body .echo-contact-modal__form input::placeholder,
html body .echo-contact-modal__form textarea::placeholder,
.echo-contact-modal__form input::placeholder,
.echo-contact-modal__form textarea::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

html body .echo-contact-modal__close,
.echo-contact-modal__close {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

html body .echo-contact-modal__close svg,
.echo-contact-modal__close svg {
    color: #000000 !important;
    stroke: #000000 !important;
}

html body .echo-contact-modal__form .button,
html body .echo-contact-modal__form .button span,
.echo-contact-modal__form .button,
.echo-contact-modal__form .button span {
    color: #000000 !important;
}

html body .echo-contact-modal__form-section,
.echo-contact-modal__form-section {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* AGGRESSIVE MOBILE OVERRIDE - Maximum specificity */
@media screen and (max-width: 768px) {
    /* Force dark background on modal container */
    html body .echo-contact-modal .echo-contact-modal__container,
    html body .echo-contact-modal__container,
    .echo-contact-modal__container {
        background: #1a1a1a !important;
        background-color: #1a1a1a !important;
    }
    
    /* Force white text on ALL contact modal elements */
    html body .echo-contact-modal__title,
    html body .echo-contact-modal__content .echo-contact-modal__title,
    .echo-contact-modal__title,
    h2.echo-contact-modal__title {
        color: var(--color-black) !important;
    }
    
    html body .echo-contact-modal__subtitle,
    html body .echo-contact-modal__content .echo-contact-modal__subtitle,
    .echo-contact-modal__subtitle,
    p.echo-contact-modal__subtitle {
        color: rgba(0, 0, 0, 0.7) !important;
    }
    
    html body .echo-contact-modal__section-title,
    html body .echo-contact-modal__section .echo-contact-modal__section-title,
    .echo-contact-modal__section-title,
    p.echo-contact-modal__section-title {
        color: rgba(0, 0, 0, 0.6) !important;
    }
    
    html body .echo-contact-modal__link,
    html body .echo-contact-modal__section .echo-contact-modal__link,
    .echo-contact-modal__link,
    a.echo-contact-modal__link {
        color: #1a1a1a !important;
    }
    
    html body .echo-contact-modal__text,
    html body .echo-contact-modal__section .echo-contact-modal__text,
    .echo-contact-modal__text,
    p.echo-contact-modal__text {
        color: #1a1a1a !important;
    }
    
    /* Social icons */
    html body .echo-contact-modal__social-link,
    html body .echo-contact-modal__social .echo-contact-modal__social-link,
    .echo-contact-modal__social-link,
    a.echo-contact-modal__social-link {
        background: rgba(255, 255, 255, 0.15) !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #1a1a1a !important;
    }
    
    /* SVG icons */
    html body .echo-contact-modal__link svg,
    html body .echo-contact-modal__text svg,
    html body .echo-contact-modal__social-link svg,
    .echo-contact-modal__link svg,
    .echo-contact-modal__text svg,
    .echo-contact-modal__social-link svg {
        color: #ffffff !important;
        stroke: #1a1a1a !important;
        fill: none !important;
    }
    
    /* Form inputs */
    html body .echo-contact-modal__form input,
    html body .echo-contact-modal__form textarea,
    html body .echo-contact-modal__form select,
    .echo-contact-modal__form input,
    .echo-contact-modal__form textarea,
    .echo-contact-modal__form select {
        background: rgba(255, 255, 255, 0.1) !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
    }
    
    html body .echo-contact-modal__form input::placeholder,
    html body .echo-contact-modal__form textarea::placeholder,
    .echo-contact-modal__form input::placeholder,
    .echo-contact-modal__form textarea::placeholder {
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Close button stays white with black icon */
    html body .echo-contact-modal__close,
    .echo-contact-modal__close {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    html body .echo-contact-modal__close svg,
    .echo-contact-modal__close svg {
        color: #000000 !important;
        stroke: #000000 !important;
    }
    
    /* Button text stays black */
    html body .echo-contact-modal__form .button,
    html body .echo-contact-modal__form .button span,
    .echo-contact-modal__form .button,
    .echo-contact-modal__form .button span {
        color: #000000 !important;
    }
    
    /* Form section border */
    html body .echo-contact-modal__form-section,
    .echo-contact-modal__form-section {
        border-top-color: rgba(255, 255, 255, 0.15) !important;
    }
}


/* ==========================================
   FILE UPLOAD COMPONENT
   =========================================== */

.echo-file-upload {
    position: relative;
    border: 2px dashed var(--color-black-semitransparent, rgba(0, 0, 0, 0.3));
    border-radius: 12px;
    padding: 2.5rem 2rem;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.echo-file-upload:hover {
    border-color: var(--color-black, #000);
    background: rgba(255, 255, 255, 0.8);
}

.echo-file-upload--dragover {
    border-color: var(--color-black, #000);
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.01);
}

.echo-file-upload--has-file {
    border-style: solid;
    border-color: var(--color-black, #000);
    cursor: default;
}

.echo-file-upload--error {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.05);
}

/* Hidden file input */
.echo-file-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Upload content area */
.echo-file-upload__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.echo-file-upload__icon {
    width: 48px;
    height: 48px;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.4));
    transition: color 0.3s ease;
}

.echo-file-upload:hover .echo-file-upload__icon {
    color: var(--color-black, #000);
}

.echo-file-upload__text {
    font-family: Aeonik, sans-serif;
    font-size: 1.1rem;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.6));
    margin: 0;
}

.echo-file-upload__browse {
    color: var(--color-black, #000);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.echo-file-upload__hint {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.4));
    margin: 0;
}

/* File preview */
.echo-file-upload__preview {
    display: flex;
    align-items: center;
    justify-content: center;
}

.echo-file-upload__file-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 400px;
}

.echo-file-upload__file-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    color: var(--color-black, #000);
}

.echo-file-upload__file-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.echo-file-upload__filename {
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-black, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echo-file-upload__filesize {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.5));
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Remove file button */
.echo-file-upload__remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: var(--color-black, #000);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.echo-file-upload__remove:hover {
    background: #dc3545;
    transform: scale(1.1);
}

.echo-file-upload__remove svg {
    width: 18px;
    height: 18px;
    color: var(--color-white, #fff);
}

/* Error message */
.echo-file-upload__error {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    font-family: Aeonik, sans-serif;
    font-size: 0.9rem;
    color: #dc3545;
}

/* Dark mode support */
[data-theme="dark"] .echo-file-upload {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .echo-file-upload:hover {
    border-color: var(--color-white, #fff);
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-file-upload--dragover {
    border-color: var(--color-white, #fff);
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-file-upload--has-file {
    border-color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__icon {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .echo-file-upload:hover .echo-file-upload__icon {
    color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__text {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .echo-file-upload__browse {
    color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__hint {
    color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .echo-file-upload__file-icon {
    color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__filename {
    color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__filesize {
    color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] .echo-file-upload__remove {
    background: var(--color-white, #fff);
}

[data-theme="dark"] .echo-file-upload__remove svg {
    color: var(--color-black, #000);
}

[data-theme="dark"] .echo-file-upload__remove:hover {
    background: #dc3545;
}

[data-theme="dark"] .echo-file-upload__remove:hover svg {
    color: #fff;
}

/* System dark mode preference */
@media (prefers-color-scheme: dark) {
    .echo-file-upload {
        background: rgba(0, 0, 0, 0.3);
        border-color: rgba(255, 255, 255, 0.3);
    }
    
    .echo-file-upload:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .echo-file-upload--dragover {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .echo-file-upload--has-file {
        border-color: #fff;
    }
    
    .echo-file-upload__icon {
        color: rgba(255, 255, 255, 0.5);
    }
    
    .echo-file-upload:hover .echo-file-upload__icon {
        color: #fff;
    }
    
    .echo-file-upload__text {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .echo-file-upload__browse {
        color: #fff;
    }
    
    .echo-file-upload__hint {
        color: rgba(255, 255, 255, 0.5);
    }
    
    .echo-file-upload__file-icon {
        color: #fff;
    }
    
    .echo-file-upload__filename {
        color: #fff;
    }
    
    .echo-file-upload__filesize {
        color: rgba(255, 255, 255, 0.6);
    }
    
    .echo-file-upload__remove {
        background: #fff;
    }
    
    .echo-file-upload__remove svg {
        color: #000;
    }
    
    .echo-file-upload__remove:hover {
        background: #dc3545;
    }
    
    .echo-file-upload__remove:hover svg {
        color: #fff;
    }
}

/* Mobile responsiveness */
@media only screen and (max-width: 768px) {
    .echo-file-upload {
        padding: 2rem 1.5rem;
    }
    
    .echo-file-upload__icon {
        width: 40px;
        height: 40px;
    }
    
    .echo-file-upload__text {
        font-size: 1rem;
    }
    
    .echo-file-upload__file-info {
        gap: 0.75rem;
    }
    
    .echo-file-upload__file-icon {
        width: 32px;
        height: 32px;
    }
    
    .echo-file-upload__filename {
        font-size: 0.9rem;
    }
    
    .echo-file-upload__remove {
        width: 32px;
        height: 32px;
    }
    
    .echo-file-upload__remove svg {
        width: 16px;
        height: 16px;
    }
}

/* ==========================================
   HIDE ALL SUBSCRIBE/SUBSCRIPTION ELEMENTS
   =========================================== */

.subscribe-modal,
.subscribe-modal__content,
.subscribe-modal__blocking-bg,
.subscribe-form,
.subscription-form,
.newsletter-form,
.newsletter,
.subscribe,
[class*="subscribe"],
[class*="subscription"],
[class*="newsletter"],
.echo-contact-modal__form-section,
.echo-desktop-contact-form,
#news-contact-form,
.mobile-menu__subscribe {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================
   TIMELINE COMPONENT - IMPRESSIVE DESIGN
   =========================================== */

.echo-timeline-section {
    overflow: visible;
}

.echo-timeline {
    position: relative;
    padding: 3rem 0;
    margin-top: 2rem;
}

/* Timeline Track - The vertical/horizontal line */
.echo-timeline__track {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--color-black-semitransparent, rgba(0, 0, 0, 0.2)) 10%,
        var(--color-black-semitransparent, rgba(0, 0, 0, 0.2)) 90%,
        transparent 100%
    );
}

.echo-timeline__progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(
        to bottom,
        var(--color-black, #000) 0%,
        var(--color-black, #000) 100%
    );
    transition: height 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-timeline-section:hover .echo-timeline__progress {
    height: 100%;
}

/* Timeline Items */
.echo-timeline__item {
    position: relative;
    padding-left: 4rem;
    padding-bottom: 4rem;
    opacity: 0;
    transform: translateX(-20px);
    animation: timelineSlideIn 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.echo-timeline__item:nth-child(2) { animation-delay: 0.2s; }
.echo-timeline__item:nth-child(3) { animation-delay: 0.4s; }
.echo-timeline__item:nth-child(4) { animation-delay: 0.6s; }

.echo-timeline__item:last-child {
    padding-bottom: 0;
}

@keyframes timelineSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Timeline Marker - The dots */
.echo-timeline__marker {
    position: absolute;
    left: -9px;
    top: 0.5rem;
    z-index: 2;
}

.echo-timeline__marker-dot {
    position: relative;
    width: 20px;
    height: 20px;
    background: var(--color-white, #fff);
    border: 2px solid var(--color-black, #000);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-timeline__marker-dot--large {
    width: 28px;
    height: 28px;
    background: var(--color-black, #000);
    border-color: var(--color-black, #000);
    margin-left: -4px;
    margin-top: -4px;
}

.echo-timeline__item:hover .echo-timeline__marker-dot {
    background: var(--color-black, #000);
    transform: scale(1.2);
}

.echo-timeline__item--highlight .echo-timeline__marker-dot {
    background: var(--color-black, #000);
}

/* Pulse Animation */
.echo-timeline__marker-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--color-black, #000);
    opacity: 0;
    animation: timelinePulse 2s ease-out infinite;
}

.echo-timeline__item--highlight .echo-timeline__marker-pulse {
    animation: timelinePulse 1.5s ease-out infinite;
}

@keyframes timelinePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* Ring Animation for highlight */
.echo-timeline__marker-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    border: 2px solid var(--color-black, #000);
    border-radius: 50%;
    opacity: 0.3;
    animation: timelineRing 2s ease-out infinite;
}

@keyframes timelineRing {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}

/* Timeline Content */
.echo-timeline__content {
    position: relative;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.1));
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-timeline__item:hover .echo-timeline__content {
    background: rgba(255, 255, 255, 0.9);
    transform: translateX(8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.echo-timeline__item--highlight .echo-timeline__content {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border-color: var(--color-black, #000);
}

.echo-timeline__item--highlight:hover .echo-timeline__content {
    background: var(--color-black, #000);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Date Styling */
.echo-timeline__date {
    display: flex;
    align-items: baseline;
    gap: 0;
    margin-bottom: 0.75rem;
}

.echo-timeline__year {
    font-family: Aeonik, sans-serif;
    font-size: 3rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.echo-timeline__month {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 1.5rem;
    font-weight: 500;
    opacity: 0.7;
}

/* Title & Description */
.echo-timeline__title {
    font-family: Aeonik, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.echo-timeline__description {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin: 0;
}

.echo-timeline__item--highlight .echo-timeline__description {
    opacity: 0.7;
}

/* Badge */
.echo-timeline__badge {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.4rem 1rem;
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 20px;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
}

/* Dark Mode Support */
[data-theme="dark"] .echo-timeline__content {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-timeline__item:hover .echo-timeline__content {
    background: rgba(40, 40, 40, 0.95);
}

[data-theme="dark"] .echo-timeline__item--highlight .echo-timeline__content {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

[data-theme="dark"] .echo-timeline__marker-dot {
    background: var(--color-black, #000);
    border-color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-timeline__item:hover .echo-timeline__marker-dot {
    background: var(--color-white, #fff);
}

[data-theme="dark"] .echo-timeline__marker-dot--large {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-timeline__marker-pulse,
[data-theme="dark"] .echo-timeline__marker-ring {
    background: var(--color-white, #fff);
    border-color: var(--color-white, #fff);
}

[data-theme="dark"] .echo-timeline__badge {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
}

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
    .echo-timeline__content {
        background: rgba(30, 30, 30, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .echo-timeline__item:hover .echo-timeline__content {
        background: rgba(40, 40, 40, 0.95);
    }
    
    .echo-timeline__item--highlight .echo-timeline__content {
        background: #fff;
        color: #000;
    }
    
    .echo-timeline__marker-dot {
        background: #000;
        border-color: #fff;
    }
    
    .echo-timeline__item:hover .echo-timeline__marker-dot {
        background: #fff;
    }
    
    .echo-timeline__marker-dot--large {
        background: #fff;
        border-color: #fff;
    }
    
    .echo-timeline__badge {
        background: #000;
        color: #fff;
    }
}

/* Mobile Responsive */
@media only screen and (max-width: 768px) {
    .echo-timeline {
        padding: 2rem 0;
    }
    
    .echo-timeline__track {
        left: 10px;
    }
    
    .echo-timeline__item {
        padding-left: 3rem;
        padding-bottom: 3rem;
    }
    
    .echo-timeline__marker {
        left: 1px;
    }
    
    .echo-timeline__marker-dot {
        width: 16px;
        height: 16px;
    }
    
    .echo-timeline__marker-dot--large {
        width: 22px;
        height: 22px;
        margin-left: -3px;
        margin-top: -3px;
    }
    
    .echo-timeline__content {
        padding: 1.25rem 1.5rem;
    }
    
    .echo-timeline__year {
        font-size: 2.2rem;
    }
    
    .echo-timeline__month {
        font-size: 1.2rem;
    }
    
    .echo-timeline__title {
        font-size: 1.25rem;
    }
    
    .echo-timeline__description {
        font-size: 0.75rem;
    }
    
    .echo-timeline__item:hover .echo-timeline__content {
        transform: translateX(4px);
    }
}

/* Tablet */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .echo-timeline__year {
        font-size: 2.5rem;
    }
    
    .echo-timeline__title {
        font-size: 1.35rem;
    }
}

/* ==========================================
   APPLICATION PROCESS FLOW
   =========================================== */

.echo-process-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 2rem 0;
}

.echo-process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.1));
    min-width: 160px;
    transition: all 0.3s ease;
}

.echo-process-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.echo-process-step--final {
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    border-color: var(--color-black, #000);
}

.echo-process-step__number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    font-family: Aeonik, sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
}

.echo-process-step--final .echo-process-step__number {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

.echo-process-step__content {
    text-align: center;
}

.echo-process-step__content h4 {
    font-family: Aeonik, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.echo-process-step__content p {
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin: 0;
}

.echo-process-arrow {
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.3));
}

.echo-process-arrow svg {
    width: 24px;
    height: 24px;
}

@media only screen and (max-width: 768px) {
    .echo-process-flow {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .echo-process-step {
        width: 100%;
        flex-direction: row;
        padding: 1rem 1.5rem;
        min-width: unset;
    }
    
    .echo-process-step__number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .echo-process-step__content {
        text-align: left;
        flex: 1;
    }
    
    .echo-process-arrow {
        transform: rotate(90deg);
    }
}

/* Dark mode */
[data-theme="dark"] .echo-process-step {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-process-step--final {
    background: var(--color-white, #fff);
    color: var(--color-black, #000);
}

@media (prefers-color-scheme: dark) {
    .echo-process-step {
        background: rgba(30, 30, 30, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .echo-process-step--final {
        background: #fff;
        color: #000;
    }
}

/* ==========================================
   INFO CARDS (Video Submission)
   =========================================== */

.echo-info-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.echo-info-card {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    border: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.1));
    transition: all 0.3s ease;
}

.echo-info-card:hover {
    background: rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.echo-info-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black, #000);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.echo-info-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white, #fff);
}

.echo-info-card h4 {
    font-family: Aeonik, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.echo-info-card p {
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.8;
    margin: 0;
}

@media only screen and (max-width: 768px) {
    .echo-info-cards {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */
[data-theme="dark"] .echo-info-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-info-card:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .echo-info-card__icon {
    background: var(--color-white, #fff);
}

[data-theme="dark"] .echo-info-card__icon svg {
    color: var(--color-black, #000);
}

@media (prefers-color-scheme: dark) {
    .echo-info-card {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .echo-info-card:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    
    .echo-info-card__icon {
        background: #fff;
    }
    
    .echo-info-card__icon svg {
        color: #000;
    }
}

/* ==========================================
   BENEFITS GRID
   =========================================== */

.echo-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.echo-benefit-item {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--color-black-semitransparent, rgba(0, 0, 0, 0.1));
    transition: all 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.echo-benefit-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.echo-benefit-item__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-black, #000);
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

.echo-benefit-item__icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white, #fff);
}

.echo-benefit-item h4 {
    font-family: Aeonik, sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.echo-benefit-item p {
    font-family: Aeonik, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0;
}

@media only screen and (max-width: 1024px) {
    .echo-benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* Dark mode */
[data-theme="dark"] .echo-benefit-item {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-benefit-item__icon {
    background: var(--color-white, #fff);
}

[data-theme="dark"] .echo-benefit-item__icon svg {
    color: var(--color-black, #000);
}

@media (prefers-color-scheme: dark) {
    .echo-benefit-item {
        background: rgba(30, 30, 30, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .echo-benefit-item__icon {
        background: #fff;
    }
    
    .echo-benefit-item__icon svg {
        color: #000;
    }
}

/* ==========================================
   ACTIVITY LIST
   =========================================== */

.echo-activity-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.echo-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.echo-activity-item:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: translateX(8px);
}

.echo-activity-bullet {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.5rem;
    background: var(--color-black, #000);
    border-radius: 50%;
}

.echo-activity-item span:last-child {
    font-family: Aeonik, sans-serif;
    font-size: 1.1rem;
    line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .echo-activity-item {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .echo-activity-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .echo-activity-bullet {
    background: var(--color-white, #fff);
}

@media (prefers-color-scheme: dark) {
    .echo-activity-item {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .echo-activity-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .echo-activity-bullet {
        background: #fff;
    }
}

/* ==========================================
   FORM HINT TEXT
   =========================================== */

.echo-form-hint {
    margin-top: 0.5rem;
    font-family: IBMPlexMono-Medium, monospace;
    font-size: 0.75rem;
    color: var(--color-black-translucent, rgba(0, 0, 0, 0.5));
    letter-spacing: 0.02em;
}

[data-theme="dark"] .echo-form-hint {
    color: rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
    .echo-form-hint {
        color: rgba(255, 255, 255, 0.5);
    }
}

/* ==========================================
   FOOTER OVERRIDES - Remove animation, 
   TALENT DIVISION text, update copyright
   =========================================== */

/* Hide footer line animation */
.footer__line-wrapper,
.footer__line {
    display: none !important;
    visibility: hidden !important;
}

/* Hide TALENT DIVISION OF MUSAI STUDIO text */
/* This targets footer content containing this text */
.footer__flex-stuff--inline,
.footer .footer__flex-stuff > span:first-child,
.footer__flex-stuff .footer__line-wrapper + span {
    display: none !important;
}

/* More aggressive hiding for TALENT DIVISION text */
.footer__flex-stuff {
    font-size: 0 !important;
}

/* Keep the copyright visible but change year to 2026 */
.footer__current-year {
    font-size: 3.835rem !important;
}

/* Use CSS to replace footer year display */
.footer__current-year::before {
    content: '© 2026 ECHO ENTERTAINMENT' !important;
    font-size: 1.34rem !important;
    display: block !important;
}

/* Hide the actual year content and show our replacement */
.footer__flex-stuff > *:not(.footer__current-year) {
    display: none !important;
}

/* Ensure clean footer layout */
.footer__second-row .footer__flex-stuff {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* Hide animated line wrapper completely */
.footer__line-wrapper,
.footer__flex-stuff--inline svg {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .footer__current-year {
        font-size: 2.5rem !important;
    }
    
    .footer__current-year::before {
        font-size: 1.17rem !important;
    }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
    .footer__current-year {
        font-size: 1.8rem !important;
    }
    
    .footer__current-year::before {
        font-size: 1rem !important;
    }
}