@font-face {
    font-family: 'Newfoundation Whyte';
    src: url('../fonts/Newfoundation Whyte/Newfoundation Whyte/Regular/NewfoundationWhyte-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Newfoundation Whyte';
    src: url('../fonts/Newfoundation Whyte/Newfoundation Whyte/Regular/NewfoundationWhyte-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Newfoundation Whyte Medium';
    src: url('../fonts/Newfoundation Whyte/Newfoundation Whyte/Medium/NewfoundationWhyte-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-big: 35px;
    --font-medium: 22.4px;
    --font-medium-small: 17px;
    --font-small: 12.5px;
}

/* GLOBAL STYLES */
html {
    overscroll-behavior-y: none;
}

body {
    background-color: #fff;
    /* Explicit white for mix-blend-mode difference to work */
    color: #444;
    /* Standardized to #444 per manifesto/others */
    font-family: 'Newfoundation Whyte', 'Roboto Condensed', sans-serif;
    font-weight: normal;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    line-height: 1.4;
    /* -webkit-font-smoothing: antialiased; Removed to make font fatter */
    -webkit-font-smoothing: subpixel-antialiased;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: 'Newfoundation Whyte Medium', sans-serif;
    font-weight: normal;
    color: #000;
    font-size: var(--font-big);
}

p {
    font-size: var(--font-medium);
    line-height: 1.5;
    color: #444;
    font-weight: normal;
    margin-bottom: 24px;
    font-family: 'Newfoundation Whyte', sans-serif;
    -webkit-text-stroke: 0.15px;
}

strong,
b {
    color: #000;
    font-family: 'Newfoundation Whyte', sans-serif;
    font-weight: normal;
}

.caption-legend {
    font-weight: normal;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    font-size: var(--font-small);
    text-align: left;
    color: #666;
    line-height: 1.4;
}

/* CORNER UI ELEMENTS */
.corner-ui {
    position: fixed;
    z-index: 10005;
    font-family: 'Newfoundation Whyte Medium', sans-serif;
    font-weight: normal;
    color: #fff;
    pointer-events: none;
}

.corner-ui a {
    pointer-events: auto;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

.top-left {
    top: 30px;
    left: 30px;
    font-size: var(--font-medium-small);
    mix-blend-mode: difference;
}

.top-right {
    top: 30px;
    right: 30px;
    font-size: var(--font-medium-small);
    mix-blend-mode: difference;
    display: flex;
    gap: 20px;
}

/* REUSABLE GLASS STYLE */
.glass-effect {
    background: transparent;
    /* Dark background for contrast */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    mix-blend-mode: difference;
    color: #fff;
}

/* STANDARD DATA TABLE */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-medium-small);
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    margin: 40px 0;
    background: transparent;
}

.data-table th,
.data-table td {
    padding: 24px;
    /* Lot of padding */
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
}

.data-table th {
    font-weight: normal;
    color: #000;
    background-color: #fafafa;
    border-bottom: 1px solid #e5e5e5;
}

.data-table tr {
    background-color: transparent;
    transition: all 0.2s ease;
}

.data-table tr:hover {
    background-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transform: scale(1.005);
    /* Subtle pop */
}

/* ELEVATOR MENU (Sidebar) */
.elevator-menu {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 30px;
    z-index: 10006;
    display: flex;
    flex-direction: column;
    gap: 10px;
    mix-blend-mode: difference;
    color: #fff;
    pointer-events: none;
}

.elevator-link {
    text-decoration: none;
    color: inherit;
    font-family: 'Newfoundation Whyte Medium', sans-serif;
    font-size: var(--font-medium-small);
    font-weight: normal;
    opacity: 0.5;
    transition: opacity 0.2s, font-weight 0.2s;
    cursor: pointer;
    width: fit-content;
    pointer-events: auto;
}

.elevator-link:hover,
.elevator-link.active {
    opacity: 1;
}

/* BOTTOM RIGHT CTA BUTTON */
.bottom-right-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10005;
    text-decoration: none;

    /* Matches Player Size approx */
    width: 320px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;
    font-family: 'Newfoundation Whyte Medium', sans-serif;
    font-size: var(--font-medium-small);
    font-weight: normal;
    transition: transform 0.2s;
    background: rgba(0, 0, 0, 0.2);
    /* Fallback */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    mix-blend-mode: difference;
}

.bottom-right-btn:hover {
    transform: scale(1.05);
    border-color: #fff;
}

/* HAMBURGER MENU */
.hamburger-btn {
    display: none;
    /* Hidden on desktop */
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 10010;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10009;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-link {
    font-family: 'Newfoundation Whyte Medium', sans-serif;
    font-size: var(--font-medium-small);
    color: #fff;
    text-decoration: none;
    margin: 15px 0;
    font-weight: normal;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active .mobile-menu-link {
    opacity: 1;
    transform: translateY(0);
}

/* PLAYER WIDGET */
#qt-player {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 10005;
    width: 320px;
    /* Adding height to ensure button matches player height if content expands logic is similar. 
       Player height depends on content padding. 
       320px width matches both now. 
       Let's assume auto height for player is ~80px? 
       In script.js player has padding 16px and image 48px. 16+48+16 = 80px total height content box? 
       Yes, 16 top + 48 img + 16 bottom = 80px seems correct.
    */
    pointer-events: auto;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: center;
}

/* FOOTER STYLES */
.site-footer {
    padding: 120px 0;
    font-family: 'Newfoundation Whyte', sans-serif;
    border-top: 1px solid #f0f0f0;
    margin-top: 100px;
}

.footer-content {
    max-width: 55vw;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.footer-links {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-links a {
    font-size: var(--font-small);
    color: #1d1d1f;
    text-decoration: none;
    font-weight: normal;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-copyright {
    font-size: var(--font-small);
    color: #86868b;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid #f0f0f0;
    padding-top: 40px;
}

.footer-legal .legal-item h5 {
    font-size: var(--font-small);
    font-weight: normal;
    margin-bottom: 8px;
    color: #000;
}

.footer-legal .legal-item p {
    font-size: var(--font-small);
    line-height: 1.6;
    color: #444;
    margin-bottom: 0;
    font-family: 'Newfoundation Whyte', sans-serif;
    /* Override global p style */
}

.footer-legal .legal-item p strong {
    font-weight: normal;
    color: #444;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .elevator-menu {
        display: none !important;
    }

    /* Hide Desktop Player and Top Right on Mobile logic usually handled by JS/CSS overlap.
       Will standardize here: */
    #qt-player {
        display: none !important;
    }

    .top-right {
        display: none !important;
    }

    .hamburger-btn {
        display: flex;
    }

    .top-left {
        top: 20px;
        left: 20px;
        font-size: var(--font-medium);
    }

    .bottom-right-btn {
        /* Mobile adjustment: maybe not full 320px wide or maybe yes ? 
           Usually "Apply" on mobile is full width or smaller.
           Let's keep it responsive but maybe less rigid width.
        */
        bottom: 25px;
        right: 20px;
        width: auto;
        height: auto;
        padding: 14px 24px;
        font-size: var(--font-medium);
    }

    .footer-legal {
        gap: 20px;
    }
}