/* -------------------- SLIDE CONTAINERS -------------------- */
.slides-container {
    position: relative;
    width: 100vw;
    max-width: 100vw;
}

.slide {
    width: 100vw;
    position: relative;
    max-width: 100vw;
    overflow: hidden;
    height: 100vh;
}

/* -------------------- SLIDE 1 GRIDS -------------------- */
.slide-1-grid-desktop {
    display: grid;
    grid-template-columns: 5% 10% 5% 60% 5% 10% 5%;
    grid-template-rows: max(5%, 36px) 10% 30% 10% 30% 10% max(5%, 36px);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.slide-1-grid-mobile {
    display: grid;
    grid-template-columns: 5% 10% 5% 60% 5% 10% 5%;
    grid-template-rows: max(5%, 15px) 10% 30% 10% 30% 10% max(5%, 15px);
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    overflow: hidden;
}

.s1d-2-2-3 { grid-column: 2 / span 2; grid-row: 2; }
.s1d-2-5-6 { grid-column: 5 / span 2; grid-row: 2; }
.s1d-4-1-7 { grid-column: 1 / span 7; grid-row: 4; }

.s1m-2-4   { grid-column: 4; grid-row: 2; }
.s1m-4-1-7 { grid-column: 1 / span 7; grid-row: 4; }
.s1m-6-4   { grid-column: 4; grid-row: 6; }

/* -------------------- SLIDE 2 GRIDS -------------------- */
.big-screen-layout {
    display: grid;
    grid-template-columns: 5% 30% 5% 55% 5%;
    grid-template-rows: 15% 25% 25% 20% 15%;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.small-screen-layout {
    display: grid;
    grid-template-columns: 5% 5% 80% 5% 5%;
    grid-template-rows: 5% 50% 5% 5% 20% 10% 5%;
    width: 100vw;
    max-width: 100vw;
    height: 100%;
    box-sizing: border-box;
}

.bs-1-1 { grid-area: 1 / 1 / 2 / 2; }
.bs-1-2 { grid-area: 1 / 2 / 2 / 3; }
.bs-1-3 { grid-area: 1 / 3 / 2 / 4; }
.bs-1-4 { grid-area: 1 / 4 / 2 / 5; }
.bs-1-5 { grid-area: 1 / 5 / 2 / 6; }

.bs-2-1 { grid-area: 2 / 1 / 3 / 2; }
.bs-2-2 { grid-area: 2 / 2 / 3 / 3; }
.bs-2-3 { grid-area: 2 / 3 / 3 / 4; }
.bs-2-4 { grid-area: 2 / 4 / 3 / 5; }
.bs-2-5 { grid-area: 2 / 5 / 3 / 6; }

.bs-3-1 { grid-area: 3 / 1 / 4 / 2; }
.bs-3-2 { grid-area: 3 / 2 / 4 / 3; }
.bs-3-3 { grid-area: 3 / 3 / 4 / 4; }
.bs-3-4 { grid-area: 3 / 4 / 4 / 5; }
.bs-3-5 { grid-area: 3 / 5 / 4 / 6; }

.bs-4-1 { grid-area: 4 / 1 / 5 / 2; }
.bs-4-2 { grid-area: 4 / 2 / 5 / 3; }
.bs-4-3 { grid-area: 4 / 3 / 5 / 4; }
.bs-4-4 { grid-area: 4 / 4 / 5 / 5; }
.bs-4-5 { grid-area: 4 / 5 / 5 / 6; }

.bs-5-1 { grid-area: 5 / 1 / 6 / 2; }
.bs-5-2 { grid-area: 5 / 2 / 6 / 3; }
.bs-5-3 { grid-area: 5 / 3 / 6 / 4; }
.bs-5-4 { grid-area: 5 / 4 / 6 / 5; }
.bs-5-5 { grid-area: 5 / 5 / 6 / 6; }

.bs-carousel-combined { grid-area: 2 / 4 / 5 / 5; }
.bs-icons-aligned     { grid-area: 4 / 2 / 5 / 3; }

.ss-1-1 { grid-area: 1 / 1 / 2 / 2; }
.ss-1-2 { grid-area: 1 / 2 / 2 / 3; }
.ss-1-3 { grid-area: 1 / 3 / 2 / 4; }
.ss-1-4 { grid-area: 1 / 4 / 2 / 5; }
.ss-1-5 { grid-area: 1 / 5 / 2 / 6; }

.ss-2-1 { grid-area: 2 / 1 / 3 / 2; }
.ss-2-2 { grid-area: 2 / 2 / 3 / 3; }
.ss-2-3 { grid-area: 2 / 3 / 3 / 4; }
.ss-2-4 { grid-area: 2 / 4 / 3 / 5; }
.ss-2-5 { grid-area: 2 / 5 / 3 / 6; }

.ss-3-1 { grid-area: 3 / 1 / 4 / 2; }
.ss-3-2 { grid-area: 3 / 2 / 3 / 3; }
.ss-3-3 { grid-area: 3 / 3 / 3 / 4; }
.ss-3-4 { grid-area: 3 / 4 / 3 / 5; }
.ss-3-5 { grid-area: 3 / 5 / 3 / 6; }

.ss-4-1 { grid-area: 4 / 1 / 5 / 2; }
.ss-4-2 { grid-area: 4 / 2 / 5 / 3; }
.ss-4-3 { grid-area: 4 / 3 / 5 / 4; }
.ss-4-4 { grid-area: 4 / 4 / 5 / 5; }
.ss-4-5 { grid-area: 4 / 5 / 5 / 6; }

.ss-5-1 { grid-area: 5 / 1 / 6 / 2; }
.ss-5-2 { grid-area: 5 / 2 / 6 / 3; }
.ss-5-3 { grid-area: 5 / 3 / 6 / 4; }
.ss-5-4 { grid-area: 5 / 4 / 6 / 5; }
.ss-5-5 { grid-area: 5 / 5 / 6 / 6; }

.ss-6-1 { grid-area: 6 / 1 / 7 / 2; }
.ss-6-2 { grid-area: 6 / 2 / 7 / 3; }
.ss-6-3 { grid-area: 6 / 3 / 7 / 4; }
.ss-6-4 { grid-area: 6 / 4 / 7 / 5; }
.ss-6-5 { grid-area: 6 / 5 / 7 / 6; }

.ss-7-1 { grid-area: 7 / 1 / 8 / 2; }
.ss-7-2 { grid-area: 7 / 2 / 8 / 3; }
.ss-7-3 { grid-area: 7 / 3 / 8 / 4; }
.ss-7-4 { grid-area: 7 / 4 / 8 / 5; }
.ss-7-5 { grid-area: 7 / 5 / 8 / 6; }

.ss-carousel      { grid-area: 2 / 3 / 3 / 4; }
.ss-icons-aligned { grid-area: 6 / 3 / 7 / 4; }
.ss-arrow-left    { grid-area: 5 / 2 / 6 / 3; }
.ss-arrow-right   { grid-area: 5 / 4 / 6 / 5; }

/* -------------------- SLIDE 3 GRID -------------------- */
#slide-3 {
    display: grid;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 10% 20% 0% 55% 10% 5%;
    width: 100vw;
    max-width: 100vw;
}

.s3-1-1 { grid-area: 1 / 1 / 2 / 2; }
.s3-2-2 { grid-area: 2 / 2 / 3 / 3; }
.s3-2-3 { grid-area: 5 / 2 / 6 / 3; }
.s3-3-1 { grid-area: 3 / 1 / 4 / 2; }
.s3-4-2 { grid-area: 4 / 2 / 5 / 3; }
.s3-5-1 { grid-area: 5 / 1 / 6 / 2; }
.s3-6-1 { grid-area: 6 / 1 / 7 / 2; }
.s3-1-3 { grid-area: 1 / 3 / 2 / 4; }
.s3-3-3 { grid-area: 3 / 3 / 4 / 4; }
.s3-5-3 { grid-area: 5 / 3 / 6 / 4; }
.s3-6-3 { grid-area: 6 / 3 / 7 / 4; }

/* Base: desktop-first */
.slide-1-grid-desktop,
.big-screen-layout { display: grid; }

.slide-1-grid-mobile,
.small-screen-layout { display: none; }

@media screen and (max-width: 1024px) {
    .slide-1-grid-desktop,
    .big-screen-layout { display: none; }
    .slide-1-grid-mobile,
    .small-screen-layout { display: grid; }
    #slide-3 { grid-template-rows: 15% 20% 0% 32% 20% 13%; }
}

@media screen and (min-width: 1025px) {
    .slide-1-grid-desktop,
    .big-screen-layout { display: grid; }
    .slide-1-grid-mobile,
    .small-screen-layout { display: none; }
    #slide-3 { grid-template-rows: 14% 14% 0% 44% 20% 8%; }
}


/* -------------------- FONTS -------------------- */
@font-face {
    font-family: 'BebasNeue';
    src: url('BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('Manrope-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EmbolismSpark';
    src: url('embolism-spark.regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'InconsolataLGC';
    src: url('inconsolata-lgc.bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nautilus';
    src: url('Nautilus.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('the-free-font.regular.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}


/* -------------------- GLOBAL RESET -------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

button, a, input, label { outline: none; }
button:focus-visible, a:focus-visible { outline: none; }

/* -------------------- AMPERSAND -------------------- */
.ampersand {
    font-family: 'InconsolataLGC', monospace;
    font-weight: bold;
    font-size: 1.0em;
}


/* -------------------- PRELOADER -------------------- */
body.preloader-active {
    overflow: hidden;
    height: 100vh;
    position: fixed;
    width: 100%;
}

.preloader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #0b0a0a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-logo {
    object-fit: contain;
    opacity: 0;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

.preloader-logo.logo-animate {
    animation: logoBloomAndSlide 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes logoBloomAndSlide {
    0%   { transform: translateX(var(--logo-offset)) scale(0.55) translateZ(0); opacity: 0; }
    18%  { opacity: 1; }
    42%  { transform: translateX(var(--logo-offset)) scale(1.0)  translateZ(0); }
    100% { transform: translateX(0)                  scale(1.0)  translateZ(0); }
}

.preloader-text {
    font-family: 'BebasNeue', sans-serif;
    color: #eae7df;
    text-transform: uppercase;
    font-weight: 400;
    opacity: 0;
}

.preloader-text.text-visible {
    animation: textFadeIn 0.8s ease-out forwards;
}

@keyframes textFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media screen and (min-width: 1025px) {
    .preloader-logo    { width: auto; height: 113px; }
    .preloader-text    { font-size: 45px; letter-spacing: 3px; line-height: 1; }
    .preloader-content { gap: 20px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .preloader-logo    { width: auto; height: 100px; }
    .preloader-text    { font-size: 40px; letter-spacing: 2px; line-height: 1; }
    .preloader-content { gap: 16px; }
}
@media screen and (max-width: 700px) {
    .preloader-logo    { width: auto; height: 75px; }
    .preloader-text    { font-size: 30px; letter-spacing: 1.5px; line-height: 1; }
    .preloader-content { gap: 14px; }
}


/* -------------------- SLIDE 1 LOGO TARGET -------------------- */
.logo-target {
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-target-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-target-logo { object-fit: contain; }

.logo-target-text {
    font-family: 'BebasNeue', sans-serif;
    color: #eae7df;
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
}

@media screen and (min-width: 1025px) {
    .logo-target-logo    { width: auto; height: 80px; }
    .logo-target-text    { font-size: 32px; letter-spacing: 2px; line-height: 1; }
    .logo-target-content { gap: 16px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .logo-target-logo    { width: auto; height: 73px; }
    .logo-target-text    { font-size: 29px; letter-spacing: 1.8px; line-height: 1; }
    .logo-target-content { gap: 14px; }
}
@media screen and (max-width: 700px) {
    .logo-target-logo    { width: auto; height: 55px; }
    .logo-target-text    { font-size: 22px; letter-spacing: 1.4px; line-height: 1; }
    .logo-target-content { gap: 11px; }
}

.slide-1-grid-desktop .s1d-2-2-3,
.slide-1-grid-desktop .s1d-2-5-6,
.slide-1-grid-mobile .s1m-2-4,
.slide-1-grid-mobile .s1m-6-4 { overflow: visible; }


/* -------------------- INTERESTED BUTTON -------------------- */
.interested-container {
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.interested-btn {
    background: transparent;
    border: none;
    color: #eae7df;
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    font-weight: normal;
    padding: 8px 16px;
}

@media screen and (min-width: 1025px) {
    .interested-btn { font-size: 29px; letter-spacing: 1.9px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .interested-btn { font-size: 26px; letter-spacing: 1.3px; }
}
@media screen and (max-width: 700px) {
    .interested-btn { font-size: 19px; letter-spacing: 1px; }
}


/* ==================== POPUP ==================== */

.popup-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.popup-overlay.show { opacity: 1; visibility: visible; }

.interested-popup {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 420px;
    height: 560px;
    background: #0b0a0a;
    border: 1px solid rgba(255,255,255,0.2);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    overflow-x: hidden;
    overflow-y: auto;
    transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94), opacity 0.4s, visibility 0.4s;
}

@media screen and (max-width: 460px) {
    .interested-popup {
        width: calc(100vw - 40px);
    }
}

.interested-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.popup-content {
    width: 100%;
    height: 100%;
    color: #eae7df;
    position: relative;
    display: flex;
    flex-direction: column;
}

.popup-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 30px; height: 30px;
    background: none;
    border: none;
    color: #eae7df;
    font-size: 22px;
    cursor: pointer;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, transform 0.3s;
}
.popup-close:hover { color: #fff; transform: scale(1.1); }

/* ---- Form screen ---- */
.popup-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 48px 12px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ---- Thank you screen ---- */
.popup-thankyou {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 48px;
    width: 100%;
    box-sizing: border-box;
}

.popup-content.show-thankyou .popup-form     { display: none; }
.popup-content.show-thankyou .popup-thankyou { display: flex; }

/* ---- Title ---- */
.popup-title {
    font-family: 'BebasNeue', sans-serif;
    font-size: 32px;
    color: #eae7df;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 8px;
}

/* ---- Subtitle ---- */
.popup-subtitle {
    font-family: Arial, sans-serif;
    font-size: 15px;
    color: rgba(234,231,223,0.8);
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    margin-bottom: 40px;
}

/* ---- Inputs ---- */
.popup-input {
    width: 210px;
    height: 44px;
    padding: 0 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    color: #eae7df;
    font-family: Arial, sans-serif;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s, background 0.3s;
    border-radius: 0;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.popup-input:focus {
    border-color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.08);
}
.popup-input::placeholder { color: rgba(255,255,255,0.4); }

.popup-input:last-of-type { margin-bottom: 20px; }

/* ---- Checkbox ---- */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(234,231,223,0.7);
    cursor: pointer;
    width: 210px;
    box-sizing: border-box;
    margin-bottom: 50px;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-text { font-family: Arial, sans-serif; word-break: break-word; }
.checkbox-text a       { color: #eae7df; text-decoration: underline; }
.checkbox-text a:hover { color: #fff; }

/* ---- Send button ---- */
.send-btn {
    width: 210px;
    margin-top: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    padding: 10px 0;
    margin-bottom: 0;
}
.send-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }

@media (hover: none) and (pointer: coarse) {
    .send-btn:hover { background: transparent !important; border-color: rgba(255,255,255,0.2) !important; }
}
.send-btn:active {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
    transform: scale(0.98);
    transition: none;
}
.send-btn:focus,
.send-btn:focus-visible {
    background: transparent !important;
    border-color: rgba(255,255,255,0.2) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ---- Error messages — space always reserved ---- */
.popup-error {
    width: 210px;
    height: 20px;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #f00;
    text-align: center;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
}
.popup-error + .popup-error {
    margin-top: 6px;
}
.popup-error.has-error { visibility: visible; }

/* ---- Popup2 close button ---- */
.popup2-close-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    font-size: 18px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s, border-color 0.3s;
    padding: 9px 32px;
    margin-top: 32px;
}
.popup2-close-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }

/* ---- Pulse animations ---- */
@keyframes pulse {
    0%   { border-color: rgba(255,255,255,0.2); }
    50%  { border-color: #b30000; }
    100% { border-color: rgba(255,255,255,0.2); }
}
.popup-input.input-pulse { animation: pulse 0.6s ease-out forwards; }

@keyframes outlinePulse {
    0%   { outline: 0 solid rgba(179, 0, 0, 0); }
    50%  { outline: 2px solid #b30000; outline-offset: 0; }
    100% { outline: 0 solid rgba(179, 0, 0, 0); }
}
.checkbox-pulse { animation: outlinePulse 0.6s ease-out forwards; }

/* Mobile tweaks */
@media screen and (max-width: 480px) {
    .interested-popup { width: 300px; height: 504px; }
    .popup-thankyou   { padding: 48px 48px 12px; }
    .popup-title      { font-size: 24px; }
    .popup-subtitle   { font-size: 13px; margin-bottom: 34px; }
    .popup-input      { width: 175px; height: 40px; font-size: 14px; }
    .checkbox-label   { width: 175px; font-size: 10px; }
    .send-btn         { width: 175px; font-size: 18px; }
    .popup-error      { width: 175px; font-size: 12px; }
}


/* ==================== MARQUEE ==================== */
.s1d-4-1-7,
.s1m-4-1-7 {
    background-color: rgba(11, 10, 10, 0.85);
    color: #eae7df;
    font-family: 'BebasNeue', sans-serif;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    transition: opacity 0.6s;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee linear infinite;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-animation: marquee linear infinite;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.marquee-content { flex-shrink: 0; font-size: inherit; letter-spacing: inherit; }

.s1d-4-1-7.fade-out,
.s1m-4-1-7.fade-out {
    opacity: 0;
    pointer-events: none;
}

.s1d-4-1-7::before, .s1d-4-1-7::after,
.s1m-4-1-7::before, .s1m-4-1-7::after {
    content: '';
    position: absolute;
    top: 0; height: 100%; width: 100px;
    z-index: 2; pointer-events: none;
}
.s1d-4-1-7::before, .s1m-4-1-7::before {
    left: 0;
    background: linear-gradient(to right, rgba(11,10,10,0.85) 0%, transparent 100%);
}
.s1d-4-1-7::after, .s1m-4-1-7::after {
    right: 0;
    background: linear-gradient(to left, rgba(11,10,10,0.85) 0%, transparent 100%);
}

@media screen and (min-width: 1025px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 57.6px; letter-spacing: 3.6px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 41px; letter-spacing: 2.5px; }
}
@media screen and (max-width: 700px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 35px; letter-spacing: 2.2px; }
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ==================== CAROUSEL ==================== */

.carousel-container {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    background: transparent;
}

.carousel-card {
    width: 100%; height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
    transform: rotateY(0.01deg);
}

.carousel-card.flip-right { transform: rotateY(180deg); }
.carousel-card.flip-left  { transform: rotateY(-180deg); }

.carousel-face {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
    background: transparent;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.carousel-face.front { transform: rotateY(0deg); }
.carousel-face.back  { transform: rotateY(180deg); }

.carousel-image {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 16px;
    transform: translate3d(0, 0, 0.1px);
    -webkit-transform: translate3d(0, 0, 0.1px);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.carousel-arrows {
    position: absolute;
    top: 50%; left: 0; right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 10;
    max-width: 100%;
    box-sizing: border-box;
}

.carousel-arrow {
    pointer-events: auto;
    border: none;
    background: transparent !important;
    color: white;
    font-size: 32px;
    width: 50px; height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    user-select: none;
    border-radius: 50%;
}
.carousel-arrow:hover { transform: scale(1.1); }
.carousel-arrow:focus,
.carousel-arrow:focus-visible { outline: none; border: none; }

.big-arrows .carousel-arrow { background: none !important; font-size: 32px; padding: 10px; z-index: 20; }

@media screen and (min-width: 1025px) {
    .big-arrows { padding-left: 20px !important; padding-right: 20px !important; }
    .big-arrows .carousel-arrow { font-size: 56px !important; padding: 15px !important; }
}

.small-arrow { border-radius: 0 !important; background: transparent !important; width: 100%; height: 100%; font-size: 28px; }
.small-arrow:hover              { background: transparent !important; border-radius: 0 !important; }
.ss-arrow-left, .ss-arrow-right { border-radius: 0 !important; background: transparent !important; }

.icon-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%; height: 100%;
    opacity: 1; visibility: visible;
    transition: all 0.3s ease;
    max-width: 100%;
    box-sizing: border-box;
}
.icon-buttons.hidden { opacity: 0; visibility: hidden; }

.icon-button {
    max-width: 22%; max-height: 22%;
    width: auto; height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
}
.icon-button:hover { transform: scale(1.1); cursor: pointer; }

.icon-link { cursor: pointer; }

#slide-2 .icon-button {
    outline: 3px solid white;
    outline-offset: -1px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}
#slide-2 .icon-button:hover,
#slide-2 .icon-button:focus,
#slide-2 .icon-button:focus-visible,
#slide-2 .icon-button:active {
    outline: 3px solid white !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}

.bs-icons-aligned .icon-buttons { justify-content: flex-start !important; padding: 10px; }

@media screen and (min-width: 1025px) and (max-width: 1400px) {
    .bs-icons-aligned .icon-button { max-width: min(100px, 12vw); max-height: min(100px, 12vh); }
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .bs-icons-aligned .icon-button { max-width: min(80px, 10vw); max-height: min(80px, 10vh); }
}
@media screen and (max-width: 1024px) {
    .ss-icons-aligned .icon-button { max-width: 100px; max-height: 100px; }
}
@media screen and (max-width: 440px) {
    .ss-icons-aligned .icon-button { max-width: 60px; max-height: 60px; }
}

.text-content {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s ease;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    color: #fff;
}
.text-content.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

@media screen and (min-width: 1025px) {
    .bs-2-2, .bs-3-2 { position: relative; overflow: hidden; background: transparent !important; }
    .bs-2-2 .text-content { top: 0; height: 100%; text-align: left; justify-content: flex-end; padding-bottom: 10px; padding-left: 10px; }
    .bs-3-2 .text-content { top: 0; height: 100%; text-align: left; justify-content: flex-start; padding-top: 10px; padding-left: 10px; padding-right: 15px; }
}
@media screen and (max-width: 1024px) {
    .ss-4-3, .ss-5-3 { position: relative; align-items: left; overflow: hidden; background: transparent !important; }
    .ss-4-3 .text-content,
    .ss-5-3 .text-content { top: 0; height: 100%; align-items: center; justify-content: center; text-align: center; }
}

.carousel-headline {
    font-family: 'BebasNeue', sans-serif;
    font-size: 32px;
    margin: 0 0 25px 0;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 1.2;
    color: #eae7df;
    text-transform: uppercase;
}

.carousel-body {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    max-width: 100%;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

.bs-carousel-combined,
.ss-carousel,
.carousel-container { overflow: visible !important; }

@media screen and (min-width: 1025px) {
    .carousel-headline { font-size: 40px; }
    .carousel-body     { font-size: 22px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .carousel-headline { font-size: 29px; }
    .carousel-body     { font-size: 19px; }
}
@media screen and (max-width: 700px) {
    .carousel-headline { font-size: 22px; }
    .carousel-body     { font-size: 15px; }
}
@media screen and (max-width: 1024px) {
    .carousel-headline { margin-bottom: 0; }
}

/* ---- Slide 2 only — small viewport height ---- */
/* Scoped to #slide-2 so slide 1 / marquee are never touched */
/* overflow: visible on text cells so headline is never clipped top/bottom */
@media screen and (max-height: 700px) and (min-width: 1025px) {
    #slide-2 .bs-2-2, #slide-2 .bs-3-2 { overflow: visible; }
    #slide-2 .carousel-headline { font-size: 30px; margin-bottom: 12px; }
    #slide-2 .carousel-body     { font-size: 17px; }
}
@media screen and (max-height: 600px) and (min-width: 1025px) {
    #slide-2 .carousel-headline { font-size: 26px; margin-bottom: 8px; }
    #slide-2 .carousel-body     { font-size: 15px; }
}
@media screen and (max-height: 700px) and (max-width: 1024px) {
    #slide-2 .ss-4-3, #slide-2 .ss-5-3 { overflow: visible; }
    #slide-2 .carousel-body     { font-size: 13px; }
}
@media screen and (max-height: 600px) and (max-width: 1024px) {
    #slide-2 .carousel-body     { font-size: 10px; }
}

/* ---- Marquee only — small viewport height ---- */
/* Uses marquee-specific classes only, no slide 2 classes touched */
@media screen and (max-height: 700px) and (min-width: 1025px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 38px; letter-spacing: 2.4px; }
}
@media screen and (max-height: 600px) and (min-width: 1025px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 32px; letter-spacing: 2.0px; }
}
@media screen and (max-height: 500px) and (min-width: 1025px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 27px; letter-spacing: 1.7px; }
}
@media screen and (max-height: 400px) and (min-width: 1025px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 21px; letter-spacing: 1.3px; }
}
@media screen and (max-height: 700px) and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 30px; letter-spacing: 1.9px; }
}
@media screen and (max-height: 600px) and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 25px; letter-spacing: 1.6px; }
}
@media screen and (max-height: 500px) and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 21px; letter-spacing: 1.3px; }
}
@media screen and (max-height: 400px) and (min-width: 701px) and (max-width: 1024px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 16px; letter-spacing: 1.0px; }
}
@media screen and (max-height: 700px) and (max-width: 700px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 26px; letter-spacing: 1.6px; }
}
@media screen and (max-height: 600px) and (max-width: 700px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 21px; letter-spacing: 1.3px; }
}
@media screen and (max-height: 500px) and (max-width: 700px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 18px; letter-spacing: 1.1px; }
}
@media screen and (max-height: 400px) and (max-width: 700px) {
    .s1d-4-1-7, .s1m-4-1-7 { font-size: 14px; letter-spacing: 0.9px; }
}

:root {
    --shadow-blue:  rgba(100, 150, 255, 0.15);
    --shadow-green: rgba(100, 220, 150, 0.15);
    --shadow-red:   rgba(255, 100, 120, 0.15);
    --text-blue:    #64a0ff;
    --text-green:   #64dc96;
    --text-red:     #ff6478;
}

.highlight-blue  { color: var(--text-blue); }
.highlight-green { color: var(--text-green); }
.highlight-red   { color: var(--text-red); }

.carousel-face[data-index="0"] { box-shadow: 0 25px 60px var(--shadow-blue); }
.carousel-face[data-index="1"] { box-shadow: 0 25px 60px var(--shadow-green); }
.carousel-face[data-index="2"] { box-shadow: 0 25px 60px var(--shadow-red); }


/* ==================== SLIDE 3 ==================== */

#slide-3 { background-image: url('B3-H.jpg'); background-size: cover; background-position: center; }

/* Remove default centering from all slide 3 cells */
#slide-3 .grid-cell {
    align-items: flex-start;
    justify-content: flex-start;
}
/* Re-apply centering only to the content cells */
#slide-3 .s3-4-2 {
    align-items: center;
    justify-content: center;
}
/* Approach the Light — top of cell, horizontally centered */
#slide-3 .s3-2-2 {
    align-items: flex-start;
    justify-content: center;
}
/* Contact — bottom of cell, horizontally centered */
#slide-3 .s3-2-3 {
    align-items: flex-end;
    justify-content: center;
}

.cta {
    background: none;
    border: none;
    color: #000000;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 16px;
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'BebasNeue', sans-serif;
    text-decoration: none;
    max-width: 100%;
    white-space: nowrap;
}

@media screen and (min-width: 1025px)                        { .cta { font-size: 32px; } }
@media screen and (min-width: 701px) and (max-width: 1024px) { .cta { font-size: 29px; } }
@media screen and (max-width: 700px)                         { .cta { font-size: 22px; } }

.cta:hover { transform: translateY(-2px); color: #333333; }

.cta.shimmer { position: relative; overflow: hidden; }
.cta.shimmer::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s ease-in-out;
}
@keyframes shimmer {
    0%   { left: -100%; }
    100% { left: 100%; }
}

.s3-4-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    position: relative;
    overflow: visible;
    max-width: 100%;
}

.s3-4-2 .typewriter-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    padding: 0;
    box-sizing: border-box;
    width: min(90vw, 1000px);
    max-width: 100%;
    height: auto;
    min-height: 0;
}

.typewriter-line {
    font-size: 18px;
    line-height: 1.6;
    font-family: 'EmbolismSpark', cursive;
    color: #111;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    margin: 0; padding: 0;
    height: 38.4px;
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
    overflow: visible;
    position: relative;
    width: 100%; max-width: 100%;
}
.typewriter-line.visible { opacity: 1; transform: translateY(0); }

.typewriter-cursor::after { content: ''; animation: blink 1s infinite; }
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.typewriter-container.fade-out { animation: fadeOut 1.5s ease forwards; }
@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

#slide-3.typewriter-active { background-image: url('B3-H.jpg') !important; background-size: cover; background-position: center; }

@media screen and (min-width: 1025px) { .typewriter-line { font-size: 36px; height: 46.4px; } }
@media screen and (max-width: 1024px) { .typewriter-line { font-size: 25px; height: 32px; } }


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

.contact-container {
    position: relative;
    display: inline-block;
    width: 120px; height: 40px;
    cursor: pointer;
}

.contact-btn, .email-reveal {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: black;
    font-size: 18px;
    cursor: pointer;
}

.email-reveal {
    opacity: 0;
    font-size: 17px;
    transform: scaleX(0);
    pointer-events: none;
}

.contact-container.show-email .contact-btn  { opacity: 0; transform: scaleX(0); pointer-events: none; user-select: none; }
.contact-container.show-email .email-reveal { opacity: 1; transform: scaleX(1); pointer-events: auto; }

.contact-btn  { font-family: 'Oswald', sans-serif; font-weight: normal; }
.email-reveal { font-family: 'Manrope', sans-serif; font-weight: 500; }

@media screen and (min-width: 1025px) {
    .contact-btn  { font-size: 22px; }
    .email-reveal { font-size: 18px; }
}
@media screen and (min-width: 701px) and (max-width: 1024px) {
    .contact-btn  { font-size: 20px; }
    .email-reveal { font-size: 16px; }
}
@media screen and (max-width: 700px) {
    .contact-btn  { font-size: 18px; }
    .email-reveal { font-size: 14px; }
}


/* ==================== GLOBAL ==================== */

#slide-1, #slide-2 { position: relative; overflow: hidden; }

.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('B1-H.jpg') center/cover no-repeat;
    will-change: transform;
}

.slide2-bg {
    z-index: -1;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('B2-H.jpg') center/cover no-repeat;
    will-change: transform;
}

.slides-container {
    position: relative;
    width: 100vw; max-width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.slides-container::-webkit-scrollbar { display: none; }

body { overflow: hidden; }

.slide { height: 100dvh; }

.slides-wrapper {
    transition: transform 0.3s ease-out;
    will-change: transform;
}