@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('fonts/GTWalsheimPro-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('fonts/GTWalsheimPro-LightOblique.woff2') format('woff2');
    font-weight: 300;
    font-style: oblique;
}
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('fonts/GTWalsheimPro-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* CSS Variables */
:root {
    --bg-color: #000000;
    --text-color: #ffffff;
    --accent-color: #FFCD36;
    --grid-color: rgba(255, 255, 255, 0.12);
    --max-width: 1600px;
}

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

body {
    font-family: 'GT Walsheim Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    padding-bottom:200px;
    width:100%;
}

/* Grid Overlay */
/* Grid line positions at 1600px: 1, 104, 136, 240, 272, 376, 408, 512, 544, 648, 680, 784, 816, 920, 952, 1056, 1192, 1224, 1328, 1360, 1464, 1496, 1600 */
.grid-overlay {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: calc(var(--max-width) - 40px);
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background-image: 
        /* Vertical grid lines at specific positions (as percentages of 1600px) */
        linear-gradient(to right, var(--grid-color) calc(1 / 1600 * 100%), var(--grid-color) calc(1 / 1600 * 100% + 1px), transparent calc(1 / 1600 * 100% + 1px)),
        linear-gradient(to right, transparent calc(104 / 1600 * 100% - 1px), var(--grid-color) calc(104 / 1600 * 100% - 1px), var(--grid-color) calc(104 / 1600 * 100%), transparent calc(104 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(136 / 1600 * 100% - 1px), var(--grid-color) calc(136 / 1600 * 100% - 1px), var(--grid-color) calc(136 / 1600 * 100%), transparent calc(136 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(240 / 1600 * 100% - 1px), var(--grid-color) calc(240 / 1600 * 100% - 1px), var(--grid-color) calc(240 / 1600 * 100%), transparent calc(240 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(272 / 1600 * 100% - 1px), var(--grid-color) calc(272 / 1600 * 100% - 1px), var(--grid-color) calc(272 / 1600 * 100%), transparent calc(272 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(376 / 1600 * 100% - 1px), var(--grid-color) calc(376 / 1600 * 100% - 1px), var(--grid-color) calc(376 / 1600 * 100%), transparent calc(376 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(408 / 1600 * 100% - 1px), var(--grid-color) calc(408 / 1600 * 100% - 1px), var(--grid-color) calc(408 / 1600 * 100%), transparent calc(408 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(512 / 1600 * 100% - 1px), var(--grid-color) calc(512 / 1600 * 100% - 1px), var(--grid-color) calc(512 / 1600 * 100%), transparent calc(512 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(544 / 1600 * 100% - 1px), var(--grid-color) calc(544 / 1600 * 100% - 1px), var(--grid-color) calc(544 / 1600 * 100%), transparent calc(544 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(648 / 1600 * 100% - 1px), var(--grid-color) calc(648 / 1600 * 100% - 1px), var(--grid-color) calc(648 / 1600 * 100%), transparent calc(648 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(680 / 1600 * 100% - 1px), var(--grid-color) calc(680 / 1600 * 100% - 1px), var(--grid-color) calc(680 / 1600 * 100%), transparent calc(680 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(784 / 1600 * 100% - 1px), var(--grid-color) calc(784 / 1600 * 100% - 1px), var(--grid-color) calc(784 / 1600 * 100%), transparent calc(784 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(816 / 1600 * 100% - 1px), var(--grid-color) calc(816 / 1600 * 100% - 1px), var(--grid-color) calc(816 / 1600 * 100%), transparent calc(816 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(920 / 1600 * 100% - 1px), var(--grid-color) calc(920 / 1600 * 100% - 1px), var(--grid-color) calc(920 / 1600 * 100%), transparent calc(920 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(952 / 1600 * 100% - 1px), var(--grid-color) calc(952 / 1600 * 100% - 1px), var(--grid-color) calc(952 / 1600 * 100%), transparent calc(952 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1056 / 1600 * 100% - 1px), var(--grid-color) calc(1056 / 1600 * 100% - 1px), var(--grid-color) calc(1056 / 1600 * 100%), transparent calc(1056 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1192 / 1600 * 100% - 1px), var(--grid-color) calc(1192 / 1600 * 100% - 1px), var(--grid-color) calc(1192 / 1600 * 100%), transparent calc(1192 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1224 / 1600 * 100% - 1px), var(--grid-color) calc(1224 / 1600 * 100% - 1px), var(--grid-color) calc(1224 / 1600 * 100%), transparent calc(1224 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1328 / 1600 * 100% - 1px), var(--grid-color) calc(1328 / 1600 * 100% - 1px), var(--grid-color) calc(1328 / 1600 * 100%), transparent calc(1328 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1360 / 1600 * 100% - 1px), var(--grid-color) calc(1360 / 1600 * 100% - 1px), var(--grid-color) calc(1360 / 1600 * 100%), transparent calc(1360 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1464 / 1600 * 100% - 1px), var(--grid-color) calc(1464 / 1600 * 100% - 1px), var(--grid-color) calc(1464 / 1600 * 100%), transparent calc(1464 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1496 / 1600 * 100% - 1px), var(--grid-color) calc(1496 / 1600 * 100% - 1px), var(--grid-color) calc(1496 / 1600 * 100%), transparent calc(1496 / 1600 * 100%)),
        linear-gradient(to right, transparent calc(1600 / 1600 * 100% - 1px), var(--grid-color) calc(1600 / 1600 * 100% - 1px), var(--grid-color) calc(1600 / 1600 * 100%));
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px 20px;
    position: relative;
    z-index: 2;
}

/* Header */
.header {
    display: grid;
    grid-template-columns: 16.8% 66.666% 16.534%;
    align-items: start;
    margin-bottom: 80px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--grid-color);
    font-size:20px;
}

.header-left {
    display: flex;
    align-items: center;
    padding-top:6px;
}

.logo-link {
    display: block;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
    display: block;
}

.header-center {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.name {
    line-height: 26px;
    font-size:20px;
    font-weight: 500; /* Medium */
    margin: 0;
    padding: 0;
    color: var(--text-color);
    width: 50px;
}

.name-wrapper {
    display: inline-block;
    line-height: 26px;
}

.title-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding:0px 30px;
}

.title-wrapper img {
    height:41px;
    width:22px;
}

.title-slash {
    width: auto;
    display: block;
}

.title {
    line-height: 26px;
    font-weight: 300; /* Light */
    color: #ccc;
    opacity: 0.9;
    width: 250px;
    display: inline-block;
    margin: 0;
    padding: 0;
}

.header-right {
    text-align: right;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 26px;
}

.phone-link,
.email-link {
    color: #FFCD36;
    text-decoration: none;
    line-height: 26px;
    font-weight: 300; /* Light */
    transition: text-decoration 0.3s;
    margin: 0;
    padding: 0;
    display: block;
}

.phone-link:hover,
.email-link:hover {
    text-decoration: underline;
}

/* Main Content */
.main-content {
    width:66%;
    max-width: 1055px;
    margin: 0 auto;
}

.default-headline {
    font-size: 40px;
    font-weight: 500; /* Medium */
    line-height: 48px;
    margin-bottom: 60px;
    color: var(--text-color);
    letter-spacing: -1px;
}

.intro-section {
    margin-bottom: 60px;
}

.greeting {
    font-size: 40px;
    font-weight: 500; /* Medium */
    margin-bottom: 30px;
    line-height: 48px;
    color: var(--text-color);
    letter-spacing: -1px;
}

.highlight {
    color: var(--accent-color);
}

.intro-text {
    font-size: 40px;
    font-weight: 500; /* Medium */
    line-height: 48px;
    margin-bottom: 60px;
    color: var(--text-color);
    letter-spacing: -1px;
}

/* Video Section */
.video-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 80px;
}

.video-container {
    width: 100%;
    margin: 0 auto;
}

.video-thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
}

.video-thumbnail:hover {
    transform: scale(1.02);
}

.thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.video-thumbnail.elevator-pitch {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #2a2a2a 100%);
}

.video-thumbnail.brand-reel .thumbnail-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.cta-text {
    text-align: center;
    font-size: 24px;
    font-weight: 300; /* Light */
    margin: 20px 0;
    font-family: 'GT Walsheim Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 300; /* Light */
    font-style: oblique;
}

/* Responsive Grid - 8 columns */
/* Grid line positions at 1400px: 1, 147, 179, 326, 358, 505, 537, 684, 716, 863, 895, 1042, 1074, 1221, 1253, 1400 */
@media (max-width: 1400px) {
    .grid-overlay {
        max-width: 100%;
        background-image: 
            linear-gradient(to right, var(--grid-color) calc(1 / 1400 * 100%), var(--grid-color) calc(1 / 1400 * 100% + 1px), transparent calc(1 / 1400 * 100% + 1px)),
            linear-gradient(to right, transparent calc(147 / 1400 * 100% - 1px), var(--grid-color) calc(147 / 1400 * 100% - 1px), var(--grid-color) calc(147 / 1400 * 100%), transparent calc(147 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(179 / 1400 * 100% - 1px), var(--grid-color) calc(179 / 1400 * 100% - 1px), var(--grid-color) calc(179 / 1400 * 100%), transparent calc(179 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(326 / 1400 * 100% - 1px), var(--grid-color) calc(326 / 1400 * 100% - 1px), var(--grid-color) calc(326 / 1400 * 100%), transparent calc(326 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(358 / 1400 * 100% - 1px), var(--grid-color) calc(358 / 1400 * 100% - 1px), var(--grid-color) calc(358 / 1400 * 100%), transparent calc(358 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(505 / 1400 * 100% - 1px), var(--grid-color) calc(505 / 1400 * 100% - 1px), var(--grid-color) calc(505 / 1400 * 100%), transparent calc(505 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(537 / 1400 * 100% - 1px), var(--grid-color) calc(537 / 1400 * 100% - 1px), var(--grid-color) calc(537 / 1400 * 100%), transparent calc(537 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(684 / 1400 * 100% - 1px), var(--grid-color) calc(684 / 1400 * 100% - 1px), var(--grid-color) calc(684 / 1400 * 100%), transparent calc(684 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(716 / 1400 * 100% - 1px), var(--grid-color) calc(716 / 1400 * 100% - 1px), var(--grid-color) calc(716 / 1400 * 100%), transparent calc(716 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(863 / 1400 * 100% - 1px), var(--grid-color) calc(863 / 1400 * 100% - 1px), var(--grid-color) calc(863 / 1400 * 100%), transparent calc(863 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(895 / 1400 * 100% - 1px), var(--grid-color) calc(895 / 1400 * 100% - 1px), var(--grid-color) calc(895 / 1400 * 100%), transparent calc(895 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(1042 / 1400 * 100% - 1px), var(--grid-color) calc(1042 / 1400 * 100% - 1px), var(--grid-color) calc(1042 / 1400 * 100%), transparent calc(1042 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(1074 / 1400 * 100% - 1px), var(--grid-color) calc(1074 / 1400 * 100% - 1px), var(--grid-color) calc(1074 / 1400 * 100%), transparent calc(1074 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(1221 / 1400 * 100% - 1px), var(--grid-color) calc(1221 / 1400 * 100% - 1px), var(--grid-color) calc(1221 / 1400 * 100%), transparent calc(1221 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(1253 / 1400 * 100% - 1px), var(--grid-color) calc(1253 / 1400 * 100% - 1px), var(--grid-color) calc(1253 / 1400 * 100%), transparent calc(1253 / 1400 * 100%)),
            linear-gradient(to right, transparent calc(1400 / 1400 * 100% - 1px), var(--grid-color) calc(1400 / 1400 * 100% - 1px), var(--grid-color) calc(1400 / 1400 * 100%));
    }
    .main-content {
        width:75%;
        max-width: 1042px;
    }

    .header {
        grid-template-columns: 12.5% 62.5% 25%;
    }
}



/* Responsive Grid - 4 columns */
/* Grid line positions at 1024px: 1, 144, 176, 320, 352, 496, 528, 672, 704, 848, 880, 1024 */
@media (max-width: 1024px) {
    .grid-overlay {
        max-width: 100%;
        background-image: 
            linear-gradient(to right, var(--grid-color) calc(1 / 1024 * 100%), var(--grid-color) calc(1 / 1024 * 100% + 1px), transparent calc(1 / 1024 * 100% + 1px)),
            linear-gradient(to right, transparent calc(144 / 1024 * 100% - 1px), var(--grid-color) calc(144 / 1024 * 100% - 1px), var(--grid-color) calc(144 / 1024 * 100%), transparent calc(144 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(176 / 1024 * 100% - 1px), var(--grid-color) calc(176 / 1024 * 100% - 1px), var(--grid-color) calc(176 / 1024 * 100%), transparent calc(176 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(320 / 1024 * 100% - 1px), var(--grid-color) calc(320 / 1024 * 100% - 1px), var(--grid-color) calc(320 / 1024 * 100%), transparent calc(320 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(352 / 1024 * 100% - 1px), var(--grid-color) calc(352 / 1024 * 100% - 1px), var(--grid-color) calc(352 / 1024 * 100%), transparent calc(352 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(496 / 1024 * 100% - 1px), var(--grid-color) calc(496 / 1024 * 100% - 1px), var(--grid-color) calc(496 / 1024 * 100%), transparent calc(496 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(528 / 1024 * 100% - 1px), var(--grid-color) calc(528 / 1024 * 100% - 1px), var(--grid-color) calc(528 / 1024 * 100%), transparent calc(528 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(672 / 1024 * 100% - 1px), var(--grid-color) calc(672 / 1024 * 100% - 1px), var(--grid-color) calc(672 / 1024 * 100%), transparent calc(672 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(704 / 1024 * 100% - 1px), var(--grid-color) calc(704 / 1024 * 100% - 1px), var(--grid-color) calc(704 / 1024 * 100%), transparent calc(704 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(848 / 1024 * 100% - 1px), var(--grid-color) calc(848 / 1024 * 100% - 1px), var(--grid-color) calc(848 / 1024 * 100%), transparent calc(848 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(880 / 1024 * 100% - 1px), var(--grid-color) calc(880 / 1024 * 100% - 1px), var(--grid-color) calc(880 / 1024 * 100%), transparent calc(880 / 1024 * 100%)),
            linear-gradient(to right, transparent calc(1024 / 1024 * 100% - 1px), var(--grid-color) calc(1024 / 1024 * 100% - 1px), var(--grid-color) calc(1024 / 1024 * 100%));
    }

    .header {
        grid-template-columns: 17% 83%;
        text-align: left;
        gap: 20px 0;
        align-items: start;
    }

    .header-center {
        grid-column: 2;
    }

    .header-right {
        grid-column: 2;
        text-align: left;
        justify-content: flex-start;
    }

    .greeting {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 30px;
        letter-spacing: -1px;
    }

    .default-headline {
        font-size: 32px;
        line-height: 40px;
    }

    .intro-text {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 60px;
        letter-spacing: -1px;
    }
    .main-content {
        width:66%;
        max-width: 672px;
    }
}

/* Responsive Grid - 2 columns */
/* Grid line positions at 768px: 1, 174, 198, 372, 396, 570, 594, 768 */
@media (max-width: 768px) {
    .grid-overlay {
        max-width: 100%;
        background-image: 
            linear-gradient(to right, var(--grid-color) calc(1 / 768 * 100%), var(--grid-color) calc(1 / 768 * 100% + 1px), transparent calc(1 / 768 * 100% + 1px)),
            linear-gradient(to right, transparent calc(174 / 768 * 100% - 1px), var(--grid-color) calc(174 / 768 * 100% - 1px), var(--grid-color) calc(174 / 768 * 100%), transparent calc(174 / 768 * 100%)),
            linear-gradient(to right, transparent calc(198 / 768 * 100% - 1px), var(--grid-color) calc(198 / 768 * 100% - 1px), var(--grid-color) calc(198 / 768 * 100%), transparent calc(198 / 768 * 100%)),
            linear-gradient(to right, transparent calc(372 / 768 * 100% - 1px), var(--grid-color) calc(372 / 768 * 100% - 1px), var(--grid-color) calc(372 / 768 * 100%), transparent calc(372 / 768 * 100%)),
            linear-gradient(to right, transparent calc(396 / 768 * 100% - 1px), var(--grid-color) calc(396 / 768 * 100% - 1px), var(--grid-color) calc(396 / 768 * 100%), transparent calc(396 / 768 * 100%)),
            linear-gradient(to right, transparent calc(570 / 768 * 100% - 1px), var(--grid-color) calc(570 / 768 * 100% - 1px), var(--grid-color) calc(570 / 768 * 100%), transparent calc(570 / 768 * 100%)),
            linear-gradient(to right, transparent calc(594 / 768 * 100% - 1px), var(--grid-color) calc(594 / 768 * 100% - 1px), var(--grid-color) calc(594 / 768 * 100%), transparent calc(594 / 768 * 100%)),
            linear-gradient(to right, transparent calc(768 / 768 * 100% - 1px), var(--grid-color) calc(768 / 768 * 100% - 1px), var(--grid-color) calc(768 / 768 * 100%));
    }

    .container {
        padding: 20px;
    }

    .header {
        grid-template-columns: 26% 74%;
        margin-bottom: 40px;
        padding-bottom: 20px;
        font-size:16px;
    }

    .header-center {
        grid-column: 2;
    }

    .header-right {
        grid-column: 2;
    }

    .header-left {
        margin-right:50px;
    }

    .logo-img {
        height: 32px;
    }

    .title {
        width:190px;
    }

    .title-slash img {
        height: 32px;
        width:18px;
    }

    .title-wrapper {
        padding:0px 20px;
    }

    .greeting {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 30px;
        letter-spacing: -1px;
    }

    .intro-text {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 60px;
        letter-spacing: -1px;
    }

    .default-headline {
        font-size: 28px;
        line-height: 34px;
    }
    .video-section {
        margin-top: 40px;
    }
    .main-content {
        width:99%;
        max-width: 766px;
    }
}

/* Responsive Grid - 1 column */
/* Show lines: 1, 1600 (start and end only) */
@media (max-width: 530px) {
    .grid-overlay {
        max-width: 100%;
        background-image: 
            linear-gradient(to right, var(--grid-color) calc(1 / 1600 * 100%), var(--grid-color) calc(1 / 1600 * 100% + 1px), transparent calc(1 / 1600 * 100% + 1px)),
            linear-gradient(to right, transparent calc(1600 / 1600 * 100% - 1px), var(--grid-color) calc(1600 / 1600 * 100% - 1px), var(--grid-color) calc(1600 / 1600 * 100%));
    }

    .header {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .header-left {
        padding-bottom:5px;
    }

    .header-center {
        grid-column: 1;
        gap:0;
    }

    .header-right {
        grid-column: 1;
    }

    .logo-img {
        height: 28px;
    }

    .name {
        font-size: 18px;
        width: 100%;
    }

    .title-wrapper {
        display:none;
    }

    .title {
        width: 100%;
    }
}