/* ================= FONTS ================= */
@font-face { font-family: 'BBHHegarty'; src: url('fonts/BBHHegarty-Regular.ttf') format('truetype'); }
@font-face { font-family: 'WorkSansMedium'; src: url('fonts/WorkSans-Medium.ttf') format('truetype'); }
@font-face { font-family: 'SpaceGroteskBold'; src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype'); }
@font-face { font-family: 'SpaceGroteskMedium'; src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype'); }
@font-face { font-family: 'SpaceGroteskRegular'; src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype'); }

:root{
  --bg:#f2f2f2;       
  --nav-width: 63px; 
  --Surface-Outline: #D3D3D1;
  --Text-Main: #222222; 
  --Brand-Main: #F14E20;
  --Brand-Overlay: #D02E00;
  --Brand-Accent: #8D882B; 
  --accent-orange: #F14E20; 
  --Surface-Darker: #E1E0DA;
  --Surface-Light: #FFF;
  --Surface-Base: #EBE9E4;
  --Text-Secondary: #A1A1A1;
  
  --font-title: 'BBHHegarty', sans-serif;
  --font-body: 'WorkSansMedium', sans-serif;
  --font-player-text: 'SpaceGroteskBold', monospace;
  --font-device-label: 'SpaceGroteskMedium', sans-serif;
  
  --device-body: #e6e4df;
  
  /* GRID VARIABLES */
  --grid-rgb: 0, 0, 0; 
  --grid-alpha: 0.1; 
}

/* ================= CORE LAYOUT ENGINE ================= */
html, body {
    margin: 0; 
    background: var(--bg); 
    color: var(--Text-Main); 
    font-family: var(--font-body); 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100vw;
    height: 100vh; 
    height: 100dvh; 
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

*{box-sizing:border-box}
.box-1 span {
    color: var(--Brand-Accent);
}

/* ================= SIDE NAV (DESKTOP) ================= */
.side-nav {
    width: var(--nav-width);
    height: 100%;
    flex: none; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px 12px 20px 12px;
    border-right: 1px solid var(--Surface-Outline); 
    background: var(--Text-Main);
    z-index: 1000;
}

.navigation { 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; 
    align-items: center; 
    align-self: stretch; 
    flex: none; 
    margin-bottom: -25px; 
}

.nav-items { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 0; 
    width: 100%;
    transform: scale(0.9); 
    transform-origin: center top;
}

.work-container, .client-container, .about-container, .contact-container {
    display: flex; justify-content: center; align-items: center; cursor: pointer; text-decoration: none;
    color: var(--Surface-Base); transition: color 0.2s ease; width: 100%; padding: 12px 0;
    -webkit-tap-highlight-color: transparent; user-select: none; outline: none;
}
.work-container:focus, .client-container:focus, .about-container:focus, .contact-container:focus { outline: none; }
.work-container.active, .client-container.active, .about-container.active, .contact-container.active { color: var(--Brand-Main); }
.work-container:not(.active):hover .nav-text, .client-container:not(.active):hover .nav-text, .about-container:not(.active):hover .nav-text, .contact-container:not(.active):hover .nav-text {
    text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto;
    text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;
}

.menu_item_desktop_1, .menu_item_desktop_2, .menu_item_desktop_3, .menu_item_desktop_4 {
    display: flex; width: 27px; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
    flex-direction: row; align-items: center; justify-content: center; gap: 10px; white-space: nowrap;
}
.nav-text { font-size: 14px; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; line-height: 1; }
.nav-dot { width: 8px; height: 8px; opacity: 0; transform: rotate(-90deg); fill: var(--Brand-Main); transition: opacity 0.2s ease; }
.active .nav-dot { opacity: 1; }

.social-group { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    align-items: center; 
    flex: none; 
    margin: 20px 0; 
    width: 100%; 
}
.line-9, .line-10 { width: 1px; background-color: var(--Surface-Outline); opacity: 1; }
.line-9 { flex-grow: 1; }
.line-10 { height: 60px; flex: none; }

.instagram_side, .mail_copy_side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    aspect-ratio: 1/1;
    max-width: none;
    border-radius: 999px;
    border: 1px solid var(--Surface-Base);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    margin: 0 auto;
}
.instagram_side:hover, .mail_copy_side:hover { border-color: var(--Brand-Main); background: rgba(241, 78, 32, 0.1); }
.instagram-image { width: 15px; height: 15px; flex-shrink: 0; transition: fill 0.2s ease; }
.instagram_side:hover .instagram-image path { fill: var(--Brand-Main); }

.mail-icon-default { width: 17px; height: 14px; display: block; flex-shrink: 0; }
.mail-icon-hover { width: 17px; height: 17px; display: none; flex-shrink: 0; }
.mail-icon-success { width: 17px; height: 17px; display: none; flex-shrink: 0; }
.mail_copy_side:not(.copied):hover .mail-icon-default { display: none; }
.mail_copy_side:not(.copied):hover .mail-icon-hover { display: block; }
.mail_copy_side.copied { background: rgba(241, 78, 32, 0.1) !important; border-color: var(--Brand-Main) !important; }
.mail_copy_side.copied .mail-icon-default, .mail_copy_side.copied .mail-icon-hover { display: none !important; }
.mail_copy_side.copied .mail-icon-success { display: block !important; }

/* ================= MAIN CONTENT ================= */
#main-wrapper {
    flex: 1; 
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
    display: flex;
    flex-direction: column;
}

section { 
    width: 100%; 
    min-height: 100vh; 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between; 
    padding-top: 60px; 
    padding-bottom: 0;
    box-sizing: border-box;
}

/* ================= PAGE 1: HERO SECTION ================= */
#page1 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    align-self: stretch;
    width: 100%;
    
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding: 60px 0 0;

    background: linear-gradient(180deg, var(--Brand-Main, #F14E20) 50%, var(--Surface-Base) 50%) !important;

    --grid-rgb: 0, 0, 0; 
    --grid-alpha: 0.08; 
    
    box-sizing: border-box; 
}

/* White Grid Overlay (Top Half Only) */
#page1::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    pointer-events: none;
    z-index: 1; 
    
    background-size: 40px 40px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
        background-attachment: fixed;
}

.sd_shadow {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1; 
    min-height: 0; 
}

/* ================= DESKTOP MUSIC DEVICE ================= */
.desktop_SoundDeck {
    width: 627px; 
    height: 611px; 
    min-width: 627px; 
    min-height: 611px;
    padding: 0; 
    box-sizing: border-box; 
    
    background: var(--device-body); 
    border-radius: 40px; 
    border-bottom: 4px solid var(--Text-Secondary);
    box-shadow: 0 40px 80px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.8);
    
    display: flex; 
    overflow: visible; 
    position: relative; 
    flex-shrink: 0;
    transform-origin: center center;
    transform: scale(0.85); 
    margin: -30px auto; 
}

/* FIXED: Closed the Desktop SoundDeck bracket properly */
.mobile-only-globe {
    display: none !important;
}
/* Hide mobile player on desktop */
.mobile_SoundDeck { display: none; }

@media (max-height: 900px) { .desktop_SoundDeck { transform: scale(0.85); margin: -46px auto; } }
@media (max-height: 750px) { .desktop_SoundDeck { transform: scale(0.8); margin: -61px auto; } }

.desktop_SoundDeck .mainPanel { width: 455px; height: 100%; padding: 30px 0; display: flex; flex-direction: column; position: relative; gap: 30px; box-sizing: border-box; background: #e1dfda; border-radius: 40px 0 0 40px; box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.60); }
.playerPanel { width: 100%; height: 391px; padding: 0 30px; display: flex; flex-direction: column; align-items: center; position: relative; box-sizing: border-box; }
.toggle-wrapper { position: absolute; top: 10px; right: 10px; z-index: 100; }
#likeToggle { width: 64px; height: 36px; position: relative; cursor: pointer; display: flex; align-items: center; border-radius: 24px; background: var(--Surface-Outline); box-shadow: 0.5px 0 2.5px -1px rgba(34, 34, 34, 0.22) inset, 0 3px 2px -2px rgba(34, 34, 34, 0.20) inset; overflow: hidden; transition: all 0.2s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
#likeToggle:not(.liked):hover { background: linear-gradient(0deg, rgba(34, 34, 34, 0.05) 0%, rgba(34, 34, 34, 0.05) 100%), var(--Surface-Outline); }
#likeToggle.liked { background: var(--Brand-Main); }
#likeToggle.liked:hover { background: linear-gradient(0deg, rgba(34, 34, 34, 0.05) 0%, rgba(34, 34, 34, 0.05) 100%), var(--Brand-Main); }
.heartContainer { display: flex; width: 50px; height: 100%; justify-content: flex-end; align-items: center; position: absolute; right: 7px; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); }
#likeToggle.liked .heartContainer { right: auto; left: 10px; justify-content: flex-start; }
.heartSVG { width: 15px; height: 13px; flex-shrink: 0; transition: transform 0.2s ease; }
.heartSVG path { fill: var(--Text-Secondary); transition: fill 0.2s ease; }
#likeToggle.liked .heartSVG path { fill: var(--Surface-Base); }
.toggleKnob { width: 44px; height: 44px; position: absolute; left: -2px; top: 68%; transform: translateY(-50%); background-image: url('music_player/toggleSVG.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; border: none; transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); z-index: 2; }
#likeToggle.liked .toggleKnob { left: calc(100% - 40px); }

/* --- TURNTABLE & LAYERS --- */
.turntable_disc { 
    width: 385px; 
    height: 385px; 
    aspect-ratio: 1/1; 
    border-radius: 999px; 
    border: 2px solid var(--Surface-Base); 
    background: #D6D5D0; 
    box-shadow: 1px -1px 0 0 rgba(0, 0, 0, 0.25) inset; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    position: relative; 
    flex: 1;
    margin-bottom: 20px; 
    z-index: 10; 
}
.ring-bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.base-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -47%);
    width: 320px;
    height: 320px;
    pointer-events: none;
    z-index: 2;
    display: block;
}
#recordSpinner { 
    width: 320px; 
    height: 320px; 
    border-radius: 50%; 
    position: relative;
    flex: none;
    z-index: 3;
    background-image: url('music_player/discBase.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    touch-action: none; 
    cursor: grab; 
    overflow: hidden; 
}
#recordSpinner::after { 
    content: ""; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    border-radius: 50%; 
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%); 
    pointer-events: none; 
    z-index: 20; 
}
#albumArt { 
    width: 44% !important; 
    height: 44% !important; 
    top: 28% !important; 
    left: 28% !important; 
    object-fit: cover; 
    border-radius: 50%; 
    position: absolute; 
    display: none; 
    z-index: 5; 
    pointer-events: none; 
    border: 6px solid var(--Surface-Base, #EBE9E4);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.bottomPanel { width: 100%; height: 130px; display: flex; gap: 10px; align-items: center; border-top: 1px solid transparent; border-image-source: linear-gradient(to right, #A1A1A1, #929191); border-image-slice: 1; padding: 30px; box-sizing: border-box; }
.transport-controls { width: 140px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 10; }
#btn_pause { width: 105px; height: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; flex: none; border-radius: 8px; border: 1px solid #842408; background: linear-gradient(138deg, rgba(0, 0, 0, 0.10) 8.26%, rgba(255, 255, 255, 0.10) 91.02%), var(--Brand-Main); background-blend-mode: soft-light, normal; box-shadow: -4px -3px 1.1px 0 var(--Brand-Overlay) inset, 0 -5px 1px 0 #E9542A inset, 0 -6px 0 0 #FF774F inset, 1px 0 1.2px 0 rgba(248, 248, 248, 0.80); transition: all 0.15s ease; }
#btn_pause:hover { background: linear-gradient(138deg, rgba(0, 0, 0, 0.40) 8.26%, rgba(255, 255, 255, 0.40) 91.02%), var(--Brand-Main); }
#btn_pause:active { transform: translateY(2px); background: linear-gradient(138deg, rgba(0, 0, 0, 0.10) 8.26%, rgba(255, 255, 255, 0.10) 91.02%), var(--Brand-Main); }
#btn_pause.playing { background-image: none; }
#btn_next { width: 105px; height: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; flex: none; border-radius: 8px; border: 1px solid #514D0C; background: linear-gradient(138deg, rgba(0, 0, 0, 0.10) 8.26%, rgba(255, 255, 255, 0.10) 91.02%), var(--Brand-Accent); background-blend-mode: soft-light, normal; box-shadow: -4px -3px 1.1px 0 #7E7910 inset, 0 -5px 1px 0 #7E780C inset, 0 -6px 0 0 #A59F33 inset, 1px 0 1.2px 0 rgba(248, 248, 248, 0.80); transition: transform 0.1s ease, background 0.15s ease; }
#btn_next:hover { background: linear-gradient(138deg, rgba(0, 0, 0, 0.40) 8.26%, rgba(255, 255, 255, 0.40) 91.02%), var(--Brand-Accent); }
#btn_next:active { transform: translateY(2px); background: linear-gradient(138deg, rgba(0, 0, 0, 0.10) 8.26%, rgba(255, 255, 255, 0.10) 91.02%), var(--Brand-Accent); }
.btn-transport { border: none; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } 
#transportIcon, #nextIcon { width: auto; height: 18px; pointer-events: none; display: block; }
.display_timer { display: flex; width: 280px; height: 100px; padding: 10px 20px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: center; border-radius: 16px; border: 1.5px solid #F2F0EB; background: #222; box-sizing: border-box; box-shadow: inset 0 2px 15px rgba(0,0,0,0.5); flex: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.trackDetails { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; grid-template-areas: "timer visualizer" "title visualizer"; gap: 0px 15px; }
#mmSs { grid-area: timer; align-self: start; margin-top: 4px; font-family: var(--font-player-text), monospace; font-size: 16px; font-weight: 700; line-height: 120%; letter-spacing: 2px; color: var(--Brand-Main); text-shadow: 0 0 5px rgba(241, 78, 32, 0.4); }
#trackName { grid-area: title; align-self: end; margin-bottom: 2px; font-family: var(--font-player-text), monospace; font-size: 14px; color: var(--accent-orange); text-transform: uppercase; white-space: nowrap; overflow: hidden; max-width: 130px; opacity: 0.8; position: relative; }
#trackNameSpan { display: inline-block; padding-right: 10px; }
.scrolling #trackNameSpan { animation: scroll-text var(--anim-duration, 5s) linear infinite; }
@keyframes scroll-text { 
    0%, 20% { transform: translateX(0); } 
    80% { transform: translateX(var(--scroll-dist)); }
    100% { transform: translateX(var(--scroll-dist)); }
}
.step_indicator_grid { grid-area: visualizer; align-self: end; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); grid-auto-flow: column; width: 76px; height: 45px; column-gap: 5px; row-gap: 5px; margin-bottom: 5px; pointer-events: none; }
.eq-dot { width: 5px; height: 5px; border-radius: 50%; justify-self: center; align-self: center; display: block; opacity: 0.2; transition: opacity 0.08s ease; }
.desktop_SoundDeck .rightPanel { width: 172px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; align-self: stretch; padding: 30px; background: #e1dfda; border-radius: 0 40px 40px 0; border-left: 1px solid #A1A1A1; border-image-source: linear-gradient(to bottom, #A1A1A1, #929191); border-image-slice: 1; box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.60); }
.brrrtLogo { height: 27px; align-self: stretch; aspect-ratio: 112.00/27.39; background-image: url('music_player/brrrtLogo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 30px; }
.speaker-grill { height: 116px; align-self: stretch; background-image: url('music_player/speaker.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 40px; }
.sfxTitle { color: var(--Text-Secondary); font-family: "Space Grotesk", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 1px; }
#sfxPad { display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; width: 100%; }
#sfxGrid { display: flex; flex-wrap: wrap; justify-content: space-between; width: 114px; }

.sfx-button { width: 56px; height: 56px; position: relative; cursor: pointer; background: transparent; border: none; padding: 0; display: flex; justify-content: center; align-items: center; -webkit-tap-highlight-color: transparent; outline: none; }
.sfx-button::before { content: ''; position: absolute; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--Surface-Darker); background: linear-gradient(342deg, #222 37.6%, #000 88.65%); box-shadow: -2px -3px 1px 0 #000 inset, 3px 3px 1px 0 rgba(255,255,255,0.2) inset, 2px 2px 2px 0 rgba(34,34,34,0.2); transition: transform 0.1s ease; }
.sfx-button.pressed::before { border: 1px solid #E1E0DA; background: var(--Brand-Main); box-shadow: -5px -4px 4px 0 #F2F0EB, 2px 0 2px 0 rgba(34,34,34,0.2), inset 3px 3px 1px 0 #CE4C28, inset -2px -2px 1px 0 rgba(255, 143, 111, 0.5); }
.sfx-button::after { content: ''; position: absolute; width: 42px; height: 42px; border-radius: 10px; opacity: 0; pointer-events: none; border: 1px solid #FFFFFF; background: linear-gradient(138deg, #F14E20 0%, #FF774F 100%); box-shadow: -5px -4px 8px 0 #F2F0EB, 2px 2px 4px 0 rgba(34,34,34,0.2), inset 3px 3px 1px 0 #CE4C28, inset -2px -2px 1px 0 rgba(255, 143, 111, 0.5); }
@keyframes sfxFlashSolid { 0% { opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
.sfx-button.animating::after { animation: sfxFlashSolid 0.2s ease-in-out; animation-delay: var(--wave-delay); }

#btn_reload_sfx { width: 105px; height: 45px; background: transparent; border: none; padding: 0; position: relative; cursor: pointer; margin-top: 15px; -webkit-tap-highlight-color: transparent; outline: none; }
#reload_rect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; border: 1px solid #959494; background: linear-gradient(138deg, rgba(0,0,0,0.1) 8%, rgba(255,255,255,0.1) 91%), var(--Surface-Darker); background-blend-mode: soft-light, normal; box-shadow: -3px -2px 2px 0 #AFAD9D inset, 0 -5px 1px 0 #C4C2B9 inset, 0 -6px 0 0 #F8F7EF inset, 1px 0 1px 0 rgba(248,248,248,0.8); transition: all 0.1s ease; }
#reload_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto; pointer-events: none; z-index: 2; }
#btn_reload_sfx:hover #reload_rect { border-radius: 8px; border: 1px solid #959494; background: linear-gradient(138deg, rgba(0, 0, 0, 0.10) 8.26%, rgba(255, 255, 255, 0.10) 91.02%), var(--Surface-Darker); background-blend-mode: soft-light, normal; box-shadow: -3px -5px 3.2px 0 #AFAD9D inset, 0 -7px 1px 0 #C4C2B9 inset, 0 -8px 0 0 #F8F7EF inset, 1px 0 1.2px 0 rgba(248, 248, 248, 0.80); }
#btn_reload_sfx:active #reload_rect { transform: translateY(2px); box-shadow: -2px -1px 1px 0 #AFAD9D inset; }
#shadow { width: 660px; height: 8px; background: #222; filter: blur(5.2px); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); z-index: -1; border-radius: 100%; opacity: 0.5; }

/* ================= PARTNERS STRIP ================= */
#partners-strip {
    position: relative;
    width: 100%;
    height: 150px !important;
    min-height: 150px !important;
    flex-shrink: 0 !important;
    background: var(--Text-Main);
    border-top: 1px solid var(--Surface-Outline);
    overflow: hidden; 
    margin-top: auto; 
    z-index: 5;
    padding: 0; 
}
#partners-strip-inner {
    display: flex;
    align-items: center;
    gap: 100px;
    position: absolute;
    top: 50%;     
    left: 0;
    width: max-content;
    height: 50px; 
    transform: translateY(-50%);
    will-change: transform;
}
#partners-strip-inner img {
    display: block;
    height: 100%; 
    width: auto; 
    object-fit: contain;
    margin: 0;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(95%) sepia(7%) saturate(163%) hue-rotate(328deg) brightness(97%) contrast(89%);
}

/* ================= PAGE 2: ABOUT / VISION ================= */
#page2 {
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center; /* Centers the About Section */
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

.about-section {
    display: flex;
    width: 100%;
    max-width: 1378px; /* Responsive max-width */
    padding: 40px 80px;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    background: var(--Surface-Base, #EBE9E4);
}

/* --- MAIN GRID CONTAINER --- */
.about-grid { 
    display: grid; 
    width: 100%;
    max-width: 1100px; 
    height: 641px; /* Fixed height to ensure alignment */
    grid-template-columns: 1.2fr 1fr 1fr 1.4fr; 
    gap: 0;
}

/* --- COLUMNS (Nested Grids) --- */
.left-column { 
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 3fr; 
    grid-template-columns: 1fr;
    overflow: hidden;
}

.midleft-column { 
    display: grid;
    height: 100%;
    grid-template-rows: 2fr 1fr; 
    grid-template-columns: 1fr;
    overflow: hidden;
}

.midright-column { 
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 2fr 1fr; 
    grid-template-columns: 1fr;
    overflow: hidden;
}

.right-column { 
    display: grid;
    height: 100%;
    grid-template-rows: 1fr 1.2fr 0.8fr; 
    grid-template-columns: 1fr;
    overflow: hidden;
}

/* --- BOX STYLING --- */
.grid-box { 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    display: flex;
    background: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure media fills grid cells */
.grid-box img, .grid-box video { 
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
} 
/* BOX 1: Text */
.box-1 { 
    background: var(--Text-Main, #222); 
    padding: 30px; /* Increased padding slightly for better left-align look */
    
    /* Align Content to the Left */
    justify-content: flex-start; 
    text-align: left;
    
    /* Keep it vertically centered */
    align-items: center; 
    display: flex;
}

.box-text-wrapper {
    color: var(--Surface-Base, #EBE9E4);
    font-family: 'BBHHegarty', sans-serif; 
    font-size: 26px; 
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    
    /* Ensure the text itself aligns left */
    text-align: left; 
    width: 100%;
}

/* BOX 4: Text */
.box-4 { 
    background: var(--Surface-Base, #EBE9E4); 
    padding: 30px;
    justify-content: center; 
    align-items: center; 
}
.box-4 div { 
    color: var(--Text-Main, #222); 
    font-family: 'WorkSansMedium', sans-serif; 
    font-size: 14px; 
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

/* BOX 9: List */
.box-9 { 
    background: var(--Text-Main, #222); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: flex-start; 
    padding: 30px;
    gap: 10px; 
}
.list-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.bullet-point { width: 6px; height: 6px; border-radius: 999px; background: var(--Brand-Main); flex-shrink: 0; margin-top: 6px; }
.list-text { font-family: 'WorkSansMedium', sans-serif; font-size: 14px; text-transform: uppercase; color: var(--Text-Secondary); line-height: 1.2; }


/* ================= BOTTOM SECTION ================= */
#bottom-section { width: 100%; display: flex; flex-direction: column; }

#story-section {
    position: relative;
    padding: 40px 0 60px;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 40px; align-self: stretch; width: 100%;
    min-height: auto; height: auto;
    box-sizing: border-box; position: relative; z-index: 2;
}
.story-title { 
    align-self: stretch; color: var(--Surface-Base); text-align: center; 
    font-family: var(--font-title); font-size: 140px; line-height: 0.75; 
    letter-spacing: 2px; text-transform: uppercase; margin: 0; 
    transform: translateY(-5px); 
}
.story-container { 
    display: flex; align-self: stretch; background: var(--Surface-Darker); 
    margin: 0; width: 100%;
}
.text-container { 
    display: flex; padding: 60px; flex-direction: column; align-items: flex-start; 
    gap: 27px; width: 35%; flex: none; box-sizing: border-box;
}
.text-container-holder { display: flex; flex-direction: column; gap: 27px; }
.logo-container { display: flex; align-items: flex-end; gap: 13px; }
.logo-container img { width: 112px; height: 27px; aspect-ratio: 112/27; }
.subtitle-text { color: var(--Text-Main); font-family: var(--font-body); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.description-container { display: flex; min-width: 300px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 33px; align-self: stretch; }
.description-text { order: -1; align-self: stretch; color: var(--Text-Main); font-family: var(--font-body); font-size: 14px; font-weight: 500; text-transform: uppercase; margin: 0; }
.studio-image { flex: 1; width: auto; overflow: hidden; position: relative; align-self: stretch; }
.studio-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= STORY BULLETS (DESKTOP) ================= */
.bullets {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns to the left for Desktop */
    gap: 10px;
    margin-bottom: 10px;
}

.bullet-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bullet-text {
    color: var(--Text-Main, #222);
    font-family: "Work Sans", sans-serif;
    font-family: 'WorkSansMedium', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#contact-area {
    display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;
    padding: 0 80px 60px 0; gap: 0; width: 100%; box-sizing: border-box; position: relative;
    border-top: 40px solid var(--Brand-Main);
    background: var(--Text-Main);
}
.brochure-image {
    flex: 0 0 58%; height: auto; min-width: 0; max-width: none; min-height: 400px; max-height: 520px;
    margin-left: 0; margin-top: -40px;
    transform: rotate(-1deg); aspect-ratio: 3/2;
    background: url('visual/contact/contact_visual.png') 50% 50% / contain no-repeat transparent;
}
.info-container {
    flex: 0 0 42%; display: flex; max-width: none; padding: 40px 0 10px 60px;
    flex-direction: column; justify-content: center; align-items: flex-start;
    gap: 40px; position: relative; margin-top: 0;
}
.globe-container { position: absolute; top: -40px; right: 80px; width: 70px; height: 70px; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: content-box; }
.globe-image { width: 100%; height: 100%; transform: rotate(4deg); border-radius: 999px; border: 1px solid var(--Surface-Darker); background: url('visual/contact/globe_icon.png') 50% 50% / cover no-repeat var(--Surface-Darker); }
.content-container { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; align-self: stretch; margin-top: 0; }
.title-container { display: flex; padding-left: 20px; align-items: center; align-self: stretch; }
.contact-title { font-family: var(--font-title); font-size: 42px; letter-spacing: 2px; line-height: 1; color: var(--Surface-Darker); margin: 0; }
.contact-para { color: var(--Surface-Base); font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 0; }
.performance-highlight { color: var(--Brand-Main); font-weight: 700; }
.btn-container { display: flex; padding-left: 20px; align-items: center; align-content: center; gap: 15.6px; align-self: stretch; flex-wrap: wrap; }
.copymail-btn, .insta-btn { appearance: none; background: transparent; border: none; cursor: pointer; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 15.6px; outline: none; }
.copymail-btn { width: 258px; } .insta-btn { width: 183px; }

/* --- BUTTON HOVER LOGIC --- */
.mail-container, .insta-container { 
    display: flex; padding: 10px; justify-content: center; align-items: center; gap: 10px; 
    background: var(--Brand-Main); box-sizing: border-box; width: 100%; 
    transition: background 0.2s ease;
}
.copymail-btn:hover .mail-container, .insta-btn:hover .insta-container { background: var(--Brand-Overlay, #D02E00); }

.mail-txt, .insta-elements { display: flex; align-items: center; flex: 1 0 0; } .mail-txt { gap: 5px; } .insta-elements { gap: 10px; }
.m-txt, .insta-text { flex: 1 0 0; color: var(--Surface-Base); font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; text-align: left; }
.copy-icon svg, .insta-icon svg, .ext-icon svg { fill: var(--Surface-Base); } .copy-icon svg, .ext-icon svg { width: 20.8px; height: 20.8px; } .insta-icon svg { width: 18px; height: 18px; } .insta-icon { color: var(--Surface-Base); display: flex; align-items: center; }
.contact-divider-mid { position: relative; height: 40px; background: var(--accent-orange); width: 100%; margin: 0; }

/* ================= FOOTER ================= */

footer {
    position: relative;
    display: flex;
    padding: 60px 80px 0 80px;
    flex-direction: column;
    align-items: center; 
    gap: 40px; 
    align-self: stretch; 
    background: var(--Text-Main); 
    padding-bottom: 0; 
}

.footer-text { 
    position: relative; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start;
    width: 100%;
    gap: 0; 
    padding: 0; 
    border-top: none; 
}

/* LEFT: EMAIL */
.email-fill { 
    flex: 0 0 auto; 
    width: 420px; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 10px; 
    z-index: 1; 
}

/* CENTER: LINK (LOCKED & SHIFTED) */
.social-links { 
    position: absolute; 
    left: 50%;
    transform: translateX(calc(-50% - 40px));
    top: 0; 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
    align-items: center; 
    z-index: 10; 
    margin: 0; 
}

/* RIGHT: CREDITS */
.credits { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-end; 
    gap: 10px; 
    z-index: 1;
    transform: translateX(40px);
    width: 100%; 
    max-width: 420px; 
}

.copyright, .inspiration-text { 
    width: 100%; 
    text-align: left; 
    white-space: normal; 
    color: var(--Surface-Base); 
    font-family: "Work Sans", sans-serif; 
    font-size: 14px; 
    font-weight: 500; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    margin-bottom: 0; 
}

.email-prompt { color: var(--Surface-Base); margin-bottom: 0; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; flex: 1 0 0; }
.email-input { display: flex; height: 25px; max-width: 360px; padding-bottom: 10px; justify-content: space-between; align-items: flex-end; align-self: stretch; border-bottom: 1px solid var(--Surface-Base); margin-top: 0; }
#footerEmailInput { background: transparent; border: none; color: #fff; font-family: var(--font-body); font-weight: bold; font-size: 12px; width: 100%; outline: none; text-transform: uppercase; height: 100%; }
.arrow-btn { cursor: pointer; color: #ffffff; font-size: 18px; font-weight: bold; font-family: var(--font-title); transition: 0.2s; }
.arrow-btn:hover { color: var(--accent-orange); }
.footer-link { color: var(--Surface-Base); text-decoration: underline; cursor: pointer; font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; }
.footer-logo { height: 297px; align-self: stretch; aspect-ratio: 348/85; fill: var(--Brand-Main); margin: 0; pointer-events: none; width: 100%; display: block; line-height: 0; }
.footer-logo svg { width: 100%; height: 100%; display: block; }
.hidden { display: none; }

/* ================= GRID PATTERN SYSTEM ================= */
.has-grid { position: relative; }
.has-grid::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1; 
    background-size: 40px 40px !important;
    background-image: 
        linear-gradient(to right, rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(var(--grid-rgb), var(--grid-alpha)) 1px, transparent 1px) !important;
    background-attachment: fixed !important; 
}
.desktop_SoundDeck, #partners-strip-inner, .about-grid, .story-container, .brochure-image, .info-container, .footer-text, .footer-logo, .studio-image, .social-group, .navigation, .box-1, .box-4, .box-9, .side-nav > * { position: relative; z-index: 2; }
.bg-brand-main { background-color: var(--Brand-Main) !important; --grid-rgb: 255, 255, 255; --grid-alpha: 0.15; }
.bg-text-main { background-color: var(--Text-Main) !important; --grid-rgb: 255, 255, 255; --grid-alpha: 0.1; }
.bg-surface-base { background-color: var(--Surface-Base) !important; --grid-rgb: 0, 0, 0; --grid-alpha: 0.08; }
.bg-contact-gradient { background: var(--Text-Main) !important; --grid-rgb: 255, 255, 255; --grid-alpha: 0.1; }
.bg-partners-strip { background-color: var(--Text-Main) !important; --grid-rgb: 255, 255, 255; --grid-alpha: 0.1; }

/* ================= DESKTOP M (~1080px) ================= */
@media screen and (min-width: 769px) and (max-width: 1280px) {

    /* Story title: 140px → 100px (Figma Desktop M spec) */
    .story-title {
        font-size: 100px;
    }

    /* Contact: symmetric padding */
    #contact-area {
        padding: 60px 60px 60px;
        gap: 40px;
    }

    .brochure-image {
        flex: 1 1 0;
        min-width: 300px;
        max-width: 500px;
        height: 410px;
        min-height: 300px;
        margin-top: 0;
    }

    .info-container {
        flex: 1 1 0;
        margin-top: 0;
    }

    .contact-title {
        font-size: 40px;
        line-height: 120%;
    }

    .info-container {
        max-width: none;
    }
}

/* --- MOBILE HEADER START --- */
#mobile-header { display: none; }
#mobile-nav-overlay { display: none; }

/* ================= MOBILE LAYOUT (Handheld) ================= */
@media screen and (max-width: 768px) {
    /* --- FIX: PUSH CONTENT BELOW HEADER --- */
    #page1 {
        padding-top: 64px !important;
        padding-bottom: 0 !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        background-position: center 64px !important;
    }

    /* --- MOBILE PARTNERS STRIP --- */
    #partners-strip {
        height: 95px !important;
        min-height: 95px !important;
        padding: 30px 0 !important;
        overflow: hidden !important;
        border-top: 1px solid var(--Surface-Outline, #D3D3D1) !important;
        background: var(--Text-Main, #222) !important;
    }
    #partners-strip-inner {
        height: 35px !important;
        gap: 50px !important;
    }

/* ================= PAGE 2 MOBILE: MASTER BLOCK ================= */

    /* 1. Page & Grid Containers */
    #page2 {
        height: auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
        padding-top: 0 !important;
        margin-top: -1px !important;
        padding-bottom: 60px !important;
    }
    .about-section {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 0 40px 0 !important;
        width: 100% !important;
        max-width: 720px !important;
        gap: 0 !important;
    }
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        gap: 0 !important;
    }

    /* ================= SECTION A: LEFT COLUMN (Order 1) ================= */
    .left-column {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
    }

    /* Box 2 (Image First) */
    .grid-box.box-2 {
        order: 1 !important;
        width: 100% !important;
        height: 414px !important;
        aspect-ratio: 77/85 !important;
        display: flex !important;
    }

    /* Box 1 Container - Layout & Padding Fix */
    .grid-box.box-1 {
        order: 2 !important;
        display: flex !important;
        padding: 30px 20px 40px 20px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        align-self: stretch !important;
        width: 100% !important;
        background: var(--Text-Main, #222) !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden;
    }
    .box-1::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: 1;
        background-size: 40px 40px;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-position: 0 var(--grid-offset-y, 0px);
    }

    /* Box 1 Typography */
    .box-1 .box-text-wrapper {
        max-width: 500px !important;
        flex: 1 0 0 !important;
        text-align: center !important;
        
        /* Typography Specs */
        font-family: 'BBHHegarty', sans-serif !important; /* Corrected name */
        font-size: 36px !important;
        font-style: normal !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        width: auto !important;

        /* Main Text Color (Light) */
        color: var(--Surface-Base, #EBE9E4) !important; 
    }

    /* The word "CONTEXT" - Accent Color */
    .box-1 .box-text-wrapper span {
        color: var(--Brand-Accent, #8D882B) !important;
    }

    /* ================= SECTION B: MID-LEFT COLUMN (Order 2) ================= */
    .midleft-column {
        order: 2 !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
    }

    /* BOX 3 (Image) */
    .grid-box.box-3 {
        width: 100% !important;
        height: 207px !important;
        display: flex !important;
        flex: none !important;
        overflow: hidden !important; 
        border-radius: 0 !important;
        background: #000 !important; 
    }

    /* Box 4 (Text) */
    .grid-box.box-4 {
        order: 4 !important; 
        display: flex !important;
        padding: 30px 20px 0 20px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: 100px !important;
    }

    /* Hide unused columns to prevent layout jumps */
    .midright-column, .right-column { display: none !important; }
    
    /* 1. HIDE DESKTOP NAV */
    nav.side-nav {
        display: none !important;
    }

    /* ================= SCROLLING GALLERY (Boxes 5, 6, 7) ================= */
    .midright-column {
        order: 3 !important; 
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important; 
        max-width: none !important;
        padding: 30px 0 !important;
        gap: 20px !important;
        background: var(--Surface-Base, #EBE9E4) !important;
        overflow-x: auto !important; 
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
    }
    
    .midright-column::-webkit-scrollbar {
        display: none !important;
    }

    /* 2. The Slides (Boxes 5, 6, 7) */
    .midright-column .grid-box {
        flex: 0 0 auto !important; 
        width: 85vw !important;    
        max-width: 300px !important; 
        height: 200px !important; 
        scroll-snap-align: center !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    /* ================= RIGHT COLUMN (Boxes 8, 9, 10) ================= */
    .right-column {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        order: 4 !important; 
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
    }

    /* 2. BOX 8 (Image) */
    .grid-box.box-8 {
        height: 257px !important;
        width: 100% !important;
        align-self: stretch !important;
        display: flex !important;
        flex: none !important;
        overflow: hidden !important;
    }

   /* ================= BOX 9 (Centered List) ================= */
    .grid-box.box-9 {
        display: flex !important;
        padding: 40px 20px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        align-self: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        overflow: hidden;
    }
    .box-9::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        pointer-events: none;
        z-index: 1;
        background-size: 40px 40px;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-position: 0 var(--grid-offset-y, 0px);
    }

    .box-9 .list-item {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        width: fit-content !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    .box-9 .list-text {
        margin: 0 !important;
        padding-top: 2px !important;
    }
    .box-9 .bullet-point {
        margin-top: 0 !important; 
    }

    /* 4. BOX 10 (Image/Footer Visual) */
    .grid-box.box-10 {
        height: 108px !important;
        align-self: stretch !important;
        width: 100% !important;
        display: flex !important;
        flex: none !important;
        overflow: hidden !important;
    }

    /* ================= MOBILE STORY LOGIC: BACKGROUND FILL ================= */
    
    .story-container {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        position: relative !important;
    }

    .studio-image {
        display: none !important; /* Hide separate image div on mobile */
    }

    /* --- FIGMA SPECS APPLIED HERE --- */
    .text-container {
        display: flex !important;
        padding: 20px 30px 300px 30px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        align-self: stretch !important;

        background-image: url('visual/story/mobile_studio.png') !important;
        background-color: lightgray !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .text-container-holder {
        display: flex !important;
        max-width: none !important;
        padding: 20px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 30px !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        width: 100% !important;
        background: var(--Surface-Base, #EBE9E4) !important;
    }

    .logo-container {
        display: flex !important;
        align-items: flex-end !important;
        gap: 10px !important;
        width: auto !important;
    }

    .description-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        align-self: stretch !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bullets {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .description-text {
        color: var(--Text-Main, #222) !important;
        text-align: center !important;
        font-family: var(--font-body) !important;
        font-size: 14px !important;
        font-style: normal !important;
        font-weight: 500 !important;
        line-height: 140% !important; 
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* CONSOLIDATED MOBILE GLOBE (Overlap Previous Section) */
    .mobile-only-globe {
        /* User Specs + Layout Fixes */
        display: flex !important;
        padding: 0 20px !important;
        justify-content: flex-end !important;
        align-items: center !important;
        align-self: stretch !important;
        
        position: absolute !important;
        top: -35px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        z-index: 100 !important;
    }
    
    /* Ensure the inner globe image doesn't stretch to fill the 100% width container */
    .mobile-only-globe .globe-image {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
        flex: none !important;
    }

    /* Shrink the Orange Surface Height */
   #story-section {
        padding-top: 15px !important;
        padding-bottom: 0 !important; /* Let text-container handles height */
        min-height: 0 !important;
        gap: 0 !important;
        background-color: var(--Brand-Main) !important;
    }

    .story-title {
        font-size: 36px !important; 
        width: 100% !important; 
        text-align: center !important;
        line-height: 1 !important;
        color: var(--Surface-Base) !important;
        font-family: 'BBHHegarty', sans-serif !important;
    }
    
    /* ================= MOBILE HEADER BAR ================= */
    #mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 64px;
        background: var(--Text-Main, #222); 
        border-bottom: 1px solid var(--Text-Secondary, #A1A1A1);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2100;
    }

    #mobile-menu-btn {
        display: flex;
        height: 100%;
        padding: 20px;
        align-items: center;
        border-right: 1px solid var(--Text-Secondary, #A1A1A1);
        cursor: pointer;
        color: var(--Surface-Base, #EBE9E4);
        font-family: 'SpaceGroteskRegular', sans-serif !important;
        font-size: 20px !important;
        letter-spacing: 2px !important;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none;
    }

    .mobile-header-right {
        display: flex;
        height: 100%;
        padding: 0 20px;
        align-items: center;
        justify-content: center;
    }

    .mobile-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 99px;
        height: auto;
    }
    
    .mobile-logo img {
        width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: contain;
    }

    #mobile-close-btn {
        display: none;
        height: 100%;
        align-items: center;
        gap: 10px;
        color: var(--Brand-Main, #F14E20);
        font-family: 'SpaceGroteskRegular', sans-serif !important;
        font-size: 20px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none;
    }

    #mobile-header.open .mobile-logo { display: none; }
    #mobile-header.open #mobile-close-btn { display: flex; }

    /* NAVIGATION OVERLAY */
    #mobile-nav-overlay {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        position: fixed;
        top: 64px;
        left: 0;
        width: 100%;
        height: calc(100dvh - 64px); 
        background-color: #1a1a1a; 
        z-index: 2000;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform 220ms ease-in, opacity 220ms ease-in;
    }

    #mobile-nav-overlay.open {
        transform: translateX(0%);
        opacity: 1;
        visibility: visible;
    }

    /* Inside media query: Hide the original globe in the contact area */
    #contact-area .globe-container {
        display: none !important;
    }
    
    /* MOBILE LINKS STYLE */
    .mobile-link {
        display: flex;
        padding: 30px 20px;
        align-items: center;
        text-decoration: none;
        color: var(--Surface-Base, #EBE9E4);
        border-bottom: 1px solid var(--Text-Secondary, #A1A1A1);
        font-family: 'SpaceGroteskRegular', sans-serif !important;
        font-size: 20px !important;
        letter-spacing: 2px !important;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none;
    }

    .mobile-link.active {
        color: var(--Brand-Main, #F14E20);
        border-bottom: 1px solid var(--Brand-Main, #F14E20);
    }

    .dot-indicator {
        display: block; 
        color: var(--Brand-Main, #F14E20);
        font-size: 14px; 
        width: 0;
        opacity: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-link.active .dot-indicator {
        width: 15px;      
        opacity: 1;
        margin-right: 12px; 
    }

    .mobile-socials {
        display: flex;
        padding: 30px 20px;
        justify-content: center;
        gap: 20px;
        margin-top: auto; 
        margin-bottom: 20px;
    }

    .mail-copy-mobile, .insta-btn-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid var(--Surface-Base, #EBE9E4);
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }
    .mail-mobile-success { display: none; }
    .mail-copy-mobile.copied { border-color: var(--Brand-Main, #F14E20); background: rgba(241, 78, 32, 0.1); }
    .mail-copy-mobile.copied .mail-mobile-default { display: none; }
    .mail-copy-mobile.copied .mail-mobile-success { display: block; }

/* ================= CONTACT SECTION MOBILE SETUP ================= */

    #contact-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        align-self: stretch !important;
        width: 100% !important;
        padding: 60px 0 0 !important;
        gap: 40px !important;
        background: var(--Text-Main, #222) !important;
        overflow: visible !important;
    }

    .brochure-image {
        display: flex !important;
        order: 2 !important;
        height: 223.333px !important;
        max-width: 550px !important;
        max-height: 366.667px !important;
        min-height: unset !important;
        min-width: 0 !important;
        width: auto !important;
        align-self: stretch !important;
        aspect-ratio: 3/2 !important;
        transform: rotate(4deg) !important;
        background: url('visual/contact/contact_visual.png') lightgray 50% / cover no-repeat !important;
        padding: 0 !important;
        margin: 0 20px 20px !important;
        flex: none !important;
    }

    .info-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 20px !important;
        margin: 0 !important;
        gap: 20px !important;
    }

    .content-container {
        margin-top: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    .title-container {
        display: flex !important;
        align-items: center !important;
        align-self: stretch !important;
        padding-left: 0 !important;
    }

    .contact-title {
        flex: 1 0 0 !important;
        font-family: var(--font-title) !important;
        font-size: 40px !important;
        font-weight: 400 !important;
        line-height: 120% !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        text-align: center !important;
        color: var(--Surface-Darker, #E1E0DA) !important;
        margin: 0 !important;
    }

    .btn-container {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 10px !important;
        align-self: stretch !important;
        padding-left: 0 !important;
    }

    .copymail-btn,
    .insta-btn {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    .contact-para {
        max-width: 500px !important;
        align-self: stretch !important;
        text-align: center !important;
        line-height: 140% !important;
        color: var(--Surface-Base, #EBE9E4) !important;
    }

  /* ================= MOBILE SOUNDDECK ================= */
    /* Hide desktop player, show mobile player */
    .desktop_SoundDeck { display: none !important; }
    .mobile_SoundDeck { display: flex !important; }

    /* --- MOBILE SOUND DECK SHELL --- */
    .mobile_SoundDeck {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        width: 100%;
        position: relative;
        z-index: 2;
        background: var(--Surface-Darker, #E1E0DA);
        border-bottom: 4px solid var(--Text-Secondary, #A1A1A1);
        box-shadow:
            inset 5px 0 2.3px 0 rgba(0, 0, 0, 0.04),
            inset -8px 0 4.2px 0 rgba(255, 255, 255, 0.2),
            inset -4px 0 6.4px 0 rgba(0, 0, 0, 0.1);
    }

    /* --- PLAYER PANEL (turntable + toggle) --- */
    .m-player-panel {
        position: relative;
        width: 100%;
        height: 294px;
        max-width: 500px;
        align-self: stretch;
        z-index: 2;
        background: var(--Surface-Darker, #E1E0DA);
    }

    .m-toggle-wrapper {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 100;
    }

    .m-likeToggle {
        width: 58px;
        height: 32px;
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: center;
        border-radius: 21px;
        -webkit-tap-highlight-color: transparent;
        outline: none;
        user-select: none;
        -webkit-user-select: none;
        background: #D3D3D1;
        box-shadow:
            inset 0px 2.67px 1.78px -1.78px rgba(34, 34, 34, 0.2),
            inset 0.44px 0px 2.22px -0.89px rgba(34, 34, 34, 0.22);
        overflow: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .m-likeToggle .heartContainer {
        display: flex;
        width: 44px;
        height: 100%;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        right: 8px;
        pointer-events: none;
    }
    .m-likeToggle .toggleKnob {
        width: 25px;
        height: 25px;
        position: absolute;
        left: 3.5px;
        top: 50%;
        transform: translateY(-50%);
        background: #EBE9E4;
        border-radius: 17px;
        border: 0.89px solid;
        border-image-source: linear-gradient(180deg, #fff 0%, #c4c4c4 100%);
        box-shadow:
            0.58px 5.38px 5.18px 0.96px rgba(34, 34, 34, 0.22),
            0px 0.89px 1.78px -0.58px rgba(34, 34, 34, 0.55);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 2;
    }
    .m-likeToggle.liked { background: var(--Brand-Main); }
    .m-likeToggle.liked .toggleKnob { left: calc(100% - 28.5px); }
    .m-likeToggle.liked .heartContainer { right: auto; left: 4px; justify-content: flex-start; padding-left: 6px; }
    .m-likeToggle.liked .heartSVG path { fill: var(--Surface-Base); }

    /* --- TURNTABLE DISC --- */
    .m-turntable-disc {
        width: 254px;
        height: 254px;
        aspect-ratio: 1/1;
        border-radius: 999px;
        border: 2px solid var(--Surface-Base, #EBE9E4);
        background: #D6D5D0;
        box-shadow: inset 1px -1px 0 0 rgba(0, 0, 0, 0.25);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
    .m-turntable-disc .ring-bg {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        width: 100%; height: 100%;
        pointer-events: none;
        z-index: 1;
    }
    .m-turntable-disc .base-shadow {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -48%);
        width: 211px; height: 211px;
        pointer-events: none;
        z-index: 2;
    }
    .m-record-spinner {
        width: 211px;
        height: 211px;
        border-radius: 50%;
        position: relative;
        z-index: 3;
        background-image: url('music_player/discBase.svg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        touch-action: none;
        cursor: grab;
        overflow: hidden;
    }
    .m-record-spinner::after {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        border-radius: 50%;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 40%, transparent 60%, rgba(255,255,255,0.05) 100%);
        pointer-events: none;
        z-index: 20;
    }
    .m-album-art {
        width: 101.79px;
        height: 101.79px;
        object-fit: cover;
        border-radius: 50%;
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        z-index: 5;
        pointer-events: none;
        border: 6px solid var(--Surface-Base, #EBE9E4);
        user-select: none;
        -webkit-user-select: none;
    }

    /* --- BOTTOM PANEL --- */
    .m-bottom-panel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        border-top: 1px solid;
        border-image-source: linear-gradient(90deg, #A1A1A1, #929191);
        border-image-slice: 1;
        box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.6);
    }

    /* Display container */
    .m-display-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px;
        align-self: stretch;
    }

    /* Display timer */
    .m-display-timer {
        display: flex;
        max-width: 500px;
        padding: 0 0 0 0;
        justify-content: flex-end;
        align-items: stretch;
        gap: 10px;
        align-self: stretch;
        border-radius: 15px;
        border: 1.5px solid #F2F0EB;
        background: #222;
        box-shadow: inset 0 2px 15px rgba(0,0,0,0.5);
        box-sizing: border-box;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .m-track-details {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: none;
        width: 175px;
        padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 15px;
    }
    .m-timer-text {
        font-family: var(--font-player-text), monospace;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: 2px;
        color: var(--Brand-Main);
        text-shadow: 0 0 5px rgba(241, 78, 32, 0.4);
    }
    .m-track-name {
        font-family: var(--font-player-text), monospace;
        font-size: 14px;
        font-weight: 700;
        color: var(--Brand-Main);
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        opacity: 0.8;
        position: relative;
    }
    .m-track-name-span {
        display: inline-block;
        padding-right: 10px;
    }
    .m-track-name.scrolling .m-track-name-span {
        animation: scroll-text var(--anim-duration, 5s) linear infinite;
    }
    .m-visualizer {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        flex: 1 0 0;
        padding-top: 11px; padding-bottom: 14px; padding-left: 40px; padding-right: 15px;
    }
    .m-eq-col {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .m-visualizer .eq-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        transition: opacity 0.08s ease;
    }

    /* --- BOTTOM CONTROLS ROW --- */
    .m-controls-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        gap: 20px;
        padding: 0 20px;
        border-top: 1px solid;
        border-image-source: linear-gradient(90deg, #A1A1A1, #929191);
        border-image-slice: 1;
        box-shadow: 0 2px 2px 0 rgba(255, 255, 255, 0.6);
    }

    /* Transport controls */
    .m-transport-controls {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px 20px 20px 0;
        flex: 1;
        border-right: 1px solid;
        border-image-source: linear-gradient(90deg, #A1A1A1, #929191);
        border-image-slice: 1;
    }
    .m-btn-pause, .m-btn-next {
        width: 100%;
        max-width: 150px;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        flex: none;
        border-radius: 8px;
        border: none;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }
    .m-btn-pause {
        border: 1px solid #842408;
        background: linear-gradient(138deg, rgba(0,0,0,0.10) 8%, rgba(255,255,255,0.10) 91%), var(--Brand-Main);
        background-blend-mode: soft-light, normal;
        box-shadow:
            -4px -3px 1.1px 0 var(--Brand-Overlay) inset,
            0 -5px 1px 0 #E9542A inset,
            0 -6px 0 0 #FF774F inset,
            1px 0 1.2px 0 rgba(248, 248, 248, 0.80);
    }
    .m-btn-next {
        border: 1px solid #514D0C;
        background: linear-gradient(138deg, rgba(0,0,0,0.10) 8%, rgba(255,255,255,0.10) 91%), var(--Brand-Accent);
        background-blend-mode: soft-light, normal;
        box-shadow:
            -4px -3px 1.1px 0 #7E7910 inset,
            0 -5px 1px 0 #7E780C inset,
            0 -6px 0 0 #A59F33 inset,
            1px 0 1.2px 0 rgba(248, 248, 248, 0.80);
    }
    .m-btn-pause:active, .m-btn-next:active { transform: translateY(2px); }
    .m-transport-icon, .m-next-icon { width: auto; height: 18px; pointer-events: none; display: block; }

    /* --- SFX PAD --- */
    .m-sfx-pad {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 20px 0;
    }
    .m-sfx-grid {
        display: grid;
        grid-template-columns: repeat(3, 56px);
        grid-template-rows: repeat(2, 56px);
        width: auto;
        gap: 0;
    }
    /* Reuse existing .sfx-button styles */
    .m-sfx-grid .sfx-button { width: 56px; height: 56px; }

    .m-btn-reload-sfx {
        height: 36px;
        align-self: stretch;
        position: relative;
        cursor: pointer;
        border: none;
        padding: 0;
        border-radius: 12px;
        background: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
        outline: none;
    }
    .m-reload-rect {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        border-radius: 12px;
        border: 1px solid #959494;
        background: linear-gradient(138deg, rgba(0,0,0,0.10) 8.26%, rgba(255,255,255,0.10) 91.02%), var(--Surface-Darker, #E1E0DA);
        background-blend-mode: soft-light, normal;
        box-shadow:
            -3px -2px 2.2px 0 #AFAD9D inset,
            0 -5px 1px 0 #C4C2B9 inset,
            0 -6px 0 0 #F8F7EF inset,
            1px 0 1.2px 0 rgba(248, 248, 248, 0.80);
    }
    .m-reload-icon {
        width: 15px; height: 15px;
        position: relative; z-index: 2;
        filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.25));
    }
    .m-reload-text {
        font-family: "Work Sans", sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: var(--Text-secondary, #A1A1A1);
        text-transform: uppercase;
        position: relative;
        z-index: 2;
    }
}

/* ================= PRELOADER ================= */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background-color: #EBE9E4;
    background-image: url('visual/preloader_bg.png');
    background-repeat: repeat;
    background-size: 80px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Logo */
.preloader-logo {
    position: absolute;
}
.preloader-logo-desktop {
    top: 39px;
    left: 41px;
    width: 166px;
    height: 40px;
}
.preloader-logo-mobile {
    display: none;
}

/* Loading container */
.loading-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Title row */
.loading-title-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

.loading-title-tuning {
    font-family: 'SpaceGroteskMedium', sans-serif;
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #222222;
}

.loading-title-status {
    font-family: 'SpaceGroteskBold', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #A1A1A1;
}

/* Numbers bar */
.numbers-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 4px;
    padding: 0 50px;
    width: 100%;
    box-sizing: border-box;
}

.num-hundreds {
    font-family: 'SpaceGroteskMedium', sans-serif;
    font-size: 140px;
    line-height: 1.08;
    color: #D3D3D1;
}

.num-hundreds.num-full {
    font-size: 170px;
    line-height: 1;
    color: #222222;
}

.num-tens {
    font-family: 'SpaceGroteskMedium', sans-serif;
    font-size: 170px;
    line-height: 1;
    color: #222222;
}

.num-dot {
    font-family: 'SpaceGroteskMedium', sans-serif;
    font-size: 140px;
    line-height: 1;
    color: #F14E20;
}

.num-decimal {
    font-family: 'SpaceGroteskMedium', sans-serif;
    font-size: 130px;
    line-height: 1.11;
    color: #222222;
}

/* Bottom text */
.bottom-text-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.loading-status-text {
    font-family: 'SpaceGroteskBold', sans-serif;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #F14E20;
}

/* Mobile preloader */
@media (max-width: 768px) {
    .preloader-logo-desktop {
        display: none;
    }
    .preloader-logo-mobile {
        display: block;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 125px;
        height: 30px;
    }

    .loading-title-container {
        gap: 10px;
    }

    .loading-title-tuning {
        font-size: 28px;
        letter-spacing: 0.05em;
    }

    .loading-title-status {
        font-size: 16px;
        letter-spacing: 0.125em;
    }

    .numbers-container {
        gap: 3px;
        padding: 0 37.5px;
        width: 100%;
        max-width: 358.5px;
    }

    .num-hundreds {
        font-size: 90px;
        line-height: 1.08;
        color: #D3D3D1;
    }

    .num-hundreds.num-full {
        font-size: 112px;
        line-height: 1;
        color: #222222;
    }

    .num-tens {
        font-size: 112px;
        line-height: 1;
    }

    .num-dot {
        font-size: 105px;
        line-height: 1;
    }

    .num-decimal {
        font-size: 90px;
        line-height: 1.11;
    }
}

/* ================= SIMPLE MOBILE FIXES - ADD TO END OF YOUR STYLES.CSS ================= */

@media (max-width: 768px) {
    
    /* FIX #1: Remove gap between box-10 and "JOB YOUR LOVE" orange section */
    
    /* Remove ALL spacing around box-10 */
    .grid-box.box-10 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove spacing from parent containers */
    .right-column {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    #page2 {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important; /* Override the 60px padding-bottom */
    }
    
    /* This is likely the culprit - about-section has 40px padding */
    .about-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important; /* Override the 40px padding */
    }
    
    .about-grid {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove spacing from story section containers */
    #bottom-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
        gap: 0 !important;
    }
    
    /* Override base section padding-top */
    section#story-section {
        margin-top: 0 !important;
        padding-top: 15px !important;
    }
    
    .story-title {
        margin-top: 0 !important;
        padding-top: 1px !important;
        margin-bottom: 10px !important;
    }
    
    /* Force everything between box-10 and story to have no gap */
    section + section,
    section + div {
        margin-top: 0 !important;
    }
    
    /* FIX #2: Move globe to bottom AND make it appear on top of orange */
    
    /* Reposition the globe to bottom instead of top */
    .mobile-only-globe {
        position: absolute !important;
        top: auto !important; /* Override the top: -35px */
        bottom: -50px !important; /* Position from bottom */
        right: 15px !important;
        padding: 0 1px !important;
        justify-content: flex-end !important;
        z-index: 200 !important; /* Higher z-index to be above everything */
        display: flex !important;
    }
    
    .mobile-only-globe .globe-image {
        width: 70px !important;
        height: 70px !important;
        z-index: 201 !important; /* Even higher */
    }
    
    /* Make story-section and story-container relative */
    #story-section {
        position: relative !important;
        padding-bottom: 0 !important;
        z-index: auto !important; /* Reset any existing z-index */
    }
    
    .story-container {
        position: relative !important;
        z-index: auto !important; /* Reset stacking context */
    }
    
    /* Above grid overlay (z-index:1) but below globe */
    .text-container {
        z-index: 2 !important;
    }
    
    /* Orange divider bar at the bottom of story section */
    #story-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 35px;
        background: var(--Brand-Main, #F14E20);
        z-index: 100 !important; /* Below globe (200) but above text (1) */
    }
}

/* ================= MOBILE FOOTER OVERRIDES ================= */
@media (max-width: 768px) {

    .contact-divider-mid {
        display: none !important;
    }

    footer {
        display: flex !important;
        padding: 40px 0 0 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        align-self: stretch !important;
        background: var(--Text-Main, #222) !important;
    }

    /* footer-text wraps credits + email-fill. Use gap:0 and control spacing via padding. */
    .footer-text {
        display: flex !important;
        padding: 0 20px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        align-self: stretch !important;
        position: static !important;
    }

    /* #2: credits → copyright + inspiration with 10px gap between them */
    .credits {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        order: 1 !important;
    }

    .copyright {
        align-self: stretch !important;
        color: var(--Surface-Base, #EBE9E4) !important;
        text-align: center !important;
        font-family: "Work Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 120% !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
    }

    /* #3: inspiration-text has 20px padding-bottom, then 20px gap to email = 40px total */
    .inspiration-text {
        align-self: stretch !important;
        color: var(--Surface-Base, #EBE9E4) !important;
        text-align: center !important;
        font-family: "Work Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 120% !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        padding-bottom: 20px !important;
    }

    .inspiration-text .dieter-highlight {
        color: var(--Brand-Main, #F14E20) !important;
    }

    /* #5 & #6: email-fill has 10px padding-top (+ 20px from inspiration padding = 40px to inspiration),
       10px gap inside between prompt and input,
       10px padding-bottom (+ 40px footer gap to logo = 50px) */
    .email-fill {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        align-self: stretch !important;
        width: 100% !important;
        order: 2 !important;
        padding: 20px 0 10px !important;
    }

    /* #4: email-prompt centered text */
    .email-prompt {
        align-self: stretch !important;
        color: var(--Surface-Base, #EBE9E4) !important;
        text-align: center !important;
        font-family: "Work Sans", sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 120% !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding-bottom: 10px !important;
    }

    .email-input {
        display: flex !important;
        height: 25px !important;
        max-width: 360px !important;
        padding: 0 2px 10px 0 !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        align-self: stretch !important;
        border-bottom: 1px solid var(--Surface-Base, #EBE9E4) !important;
    }

    .social-links {
        display: none !important;
    }

    /* #6: 40px gap before footer-logo (+ 10px email-fill padding-bottom = 50px total) */
    .footer-logo {
        height: 91.596px !important;
        align-self: stretch !important;
        aspect-ratio: 348/85 !important;
        margin-top: 40px !important;
    }
}

/* ================= MOBILE GRID (per-section, iOS-safe) ================= */

@media (max-width: 768px) {
    /* Use scroll + JS-driven background-position for parallax (iOS-safe) */
    .has-grid::before {
        background-attachment: scroll !important;
        background-position: 0 var(--grid-offset-y, 0px) !important;
    }

    /* No grid on the player section */
    #page1::before,
    #page1::after {
        display: none !important;
    }

    /* Studio image: no background-attachment:fixed */
    .text-container {
        background-attachment: scroll !important;
    }
}