/* FONT SETUP */
@font-face {
    font-family: "ivypresto";
    src: url("../fonts/Ivy-Presto-Headline-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.ivypresto {
    font-family: 'ivypresto', sans-serif;
}

@font-face {
    font-family: "neue";
    src: url("../fonts/NeueHaasDisplayThin.ttf") format("truetype");
    /* font-weight: 100; */  
}

.neue {
    font-family: 'neue';
    letter-spacing: 1.1px;
    line-height: 1.15;
}

@font-face {
    font-family: "neue-bold";
    src: url("../fonts/HelveticaNeue-Roman.otf") format("opentype");
    /* font-weight: 100; */  
}

.neue-bold {
    font-family: 'neue-bold';
    /* letter-spacing: 1.1px;
    line-height: 1.15; */
}

body {
    background-color: #000000;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* --- 1. GLOBAL FIXED BACKGROUND --- */
/* Taller than viewport so when it moves up (translateY) it still covers the bottom – no black band */
.gradient-text {
    /* Define the gradient */
    background: linear-gradient(76deg, #F3BC83 0%, #A68059 38%, #3E4755 100%);
    
    /* Clip the background to the text shape */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Make the actual text transparent so the background shows through */
    color: transparent;
    
    /* Optional: Ensure it works on older webkit browsers */
    -webkit-text-fill-color: transparent;
}

.layer-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Height must cover viewport after max parallax move (100vh + 80vh) to avoid black band */
    height: calc(100vh);
    z-index: 0;
    will-change: transform;
    overflow: hidden;
    transition: opacity 0.5s ease-out;
}

.layer-bg-video,
.layer-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* Footer: sit above fixed layer-bg (z-index 0) so no background shows through */
.footer-main {
    position: relative;
    z-index: 10;
    background-color: #0a0a0a;
}

/* layer-bg: mobile */
@media (max-width: 767px) {
    .layer-bg {
        height: calc(100vh);
    }
    .layer-bg-video,
    .layer-bg-img {
        object-position: center bottom;
    }
}

/* --- 2. HERO HEADER --- */
.header {
    position: relative;
    z-index: 60;
    height: 120vh;
    width: 100%;
    overflow: hidden;
    background-color: #060606;
}

.header img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 3. CROWN SECTION (ABSOLUTE) --- */
.crown-section {
    position: absolute;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 55;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%,rgba(255, 255, 255, 0) 100%);
    /* background: #060606; */
    /* background-image: url('../images/crownBg.png'); */
    /* background-size: cover;
    background-position: center;
    background-repeat: no-repeat; */
}

/* The Fade Overlay - smooth gradient from black to transparent */
.crown-fade-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    z-index: 25;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}

/* --- 4. PARALLAX SECTION WRAPPER --- */
.parallax-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: 100vh;
    background: transparent;
}

.scroll-container {
    height: 200vh;
    width: 100%;
    background: transparent;
}

@media (max-width: 767px) {
    .scroll-container {
        height: 70vh;
    }
}
/* --- 5. FLOATING PARALLAX ELEMENTS --- */
.parallax-layer {
    position: fixed;
    top: 100vh;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: transform;
}

.layer-big-sun {
    z-index: 30;
    top: 75vh;
}

.layer-text {
    z-index: 40;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 65vh;
}

.layer-small-sun {
    z-index: 50;
}

/* bigSun, centerText, smallSun – mobile positions (adjust to taste) */
@media (max-width: 767px) {
    #bigSun.layer-big-sun {
        top: -30vh;
        left: 0;
    }
    #bigSun.layer-big-sun img {
        left: -10%;
        width: 200px;
    }
}

/* bigSun – laptop (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    #bigSun.layer-big-sun {
        left: 0;
    }
    #bigSun.layer-big-sun img {
        left: 2%;
        width: 360px;
    }
}

/* bigSun – desktop (1024px+) */
@media (min-width: 1024px) {
    #bigSun.layer-big-sun {
        left: 0;
    }
    #bigSun.layer-big-sun img {
        left: 5%;
        width: 500px;
    }
}

@media (max-width: 767px) {
    #centerText.layer-text {
        top: -65vh;
        left: 0;
        right: 0;
        padding: 0 1rem;
    }
    #smallSun.layer-small-sun {
        top: -65vh;
        right: 0;
        left: auto;
    }
    #smallSun.layer-small-sun img {
        right: -5%;
        width: 140px;
    }
}

/* smallSun – laptop (768px–1023px) */
@media (min-width: 768px) and (max-width: 1370px) {
    #smallSun.layer-small-sun {
        left: auto;
        right: 0;
    }
    #smallSun.layer-small-sun img {
        right: 3%;
        width: 220px;
    }
}

/* smallSun – desktop (1024px+) */
@media (min-width: 1370px) {
    #smallSun.layer-small-sun {
        left: auto;
        right: 10%;
    }
    #smallSun.layer-small-sun img {
        right: 5%;
        width: 280px;
    }
}

/* Paragraph at end of section 3 – moves up with background image */
.parallax-end-text {
    z-index: 45;
    will-change: transform;
}

.gold-gradient {
    background: linear-gradient(to bottom, #d4af37, #f3e5ab, #996515);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


  /* Hide default cursor only on desktop within the section */
  @media (min-width: 768px) {
    .custom-cursor-area {
        cursor: none;
    }
}

/* Smooth text rendering */
.antialiased-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Section 5: wingsBG subtle background (no big gap – content over wings) */
.titles-wings-absolute {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    max-width: 1000px;
    z-index: 0;
    pointer-events: none;
}
.titles-wings-absolute .titles-wings-watermark {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    opacity: 0.22;
    mix-blend-mode: luminosity;
}

/* Static "Titles" – same row as lines (40% from top), far left */
.titles-static-label-wrap {
    position: absolute;
    left: 8%;
    top: 45%;
    transform: translateY(-50%);
    z-index: 25;
    pointer-events: none;
}
@media (min-width: 1024px) {
    .titles-static-label-wrap { left: 7%; }
}

/* Static lines: same row as "Titles", ABOVE the number and above right text */
.titles-static-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8rem;
    height: 1px;
    background: linear-gradient(71deg, #E2CB78 0%, #91824B 45%, #C58B52 100%);
    pointer-events: none;
    z-index: 25;
}
@media (min-width: 1024px) {
    .titles-static-line { width: 12rem; }
}
.titles-static-line--left {
    right: calc(50% + 140px);
}
.titles-static-line--right {
    left: calc(50% + 140px);
}
@media (min-width: 768px) {
    .titles-static-line--left { right: calc(50% + 190px); }
    .titles-static-line--right { left: calc(50% + 190px); }
}

/* Carousel row: number, image, right text – sit below the lines */
#titles-section .swiper-slide > div {
    padding-top: 2rem;
}
/* "40s" in Miss FTV 40s / Mr FTV 40s: keep "s" lowercase when parent is uppercase */
.title-40s-s {
    text-transform: lowercase;
}
.bg-gold-gradient {
    background: linear-gradient(to right, #F3BC83 0%, #A68059 38%, #3E4755 100%);
}

/* Nav bar: top/bottom borders that fade at left and right edges (desktop only) */
.nav-fading-borders {
    border-top: none;
    border-bottom: none;
}
@media (min-width: 1024px) {
    .nav-fading-borders::before,
    .nav-fading-borders::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(to right, rgba(8, 8, 8, 0.03) 0%, rgb(255, 231, 176) 52%,  transparent 100%);
        width: 85%;
        margin: 0 auto;
    }
    .nav-fading-borders::before {
        top: 0;
    }
    .nav-fading-borders::after {
        bottom: 0;
    }
}

/* Navbar hide on scroll down, show on scroll up — desktop and mobile */
#fpNavHeader.fp-nav-hidden {
    transform: translateY(-100%);
}

/* When scrolling up: show only nav links, hide logo */
#fpNavLogo {
    max-height: 150px;
    overflow: hidden;
}

/* Hide logo only on desktop when compact; keep logo visible on mobile */
@media (min-width: 1024px) {
    #fpNavHeader.fp-nav-compact #fpNavLogo {
        max-height: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        opacity: 0;
    }
}

/* Mobile menu overlay: ensure it sits below header, no transform from header */
@media (max-width: 1023px) {
    #fpNavMobile {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* Titles Page */


 /* Custom cursor for last section */
 #custom-cursor {
    position: fixed;
    width: 130px;
    height: 130px;
    border: 1px solid #FFDFB3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s ease;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
}

#custom-cursor.active {
    opacity: 1;
}

#custom-cursor span {
    font-family: 'neue-bold', sans-serif;
    font-size: 16px;
    letter-spacing: 0.2em;
    background: linear-gradient(76deg, #F3BC83 0%, #A68059 38%, #3E4755 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
}
@media (max-width: 767px) {
    #custom-cursor,
    #custom-cursor.active {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}
.last-section-cursor-zone.cursor-none,
.last-section-cursor-zone.cursor-none * {
    cursor: none !important;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.faq-content.active {
    opacity: 1;
}

/* Icon rotation for Plus -> X */
.faq-icon {
    transition: transform 0.3s ease;
}
.faq-btn[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}



   /* PROCESS SECTION – Desktop only (unique classes, no overlap with mobile) */
        .process-desktop .process-desktop-line-wrapper {
            position: absolute;
            top: 52%;
            left: 0;
            width: 100vw;
            height: 1px;
            transform: translateY(-50%);
            z-index: 0;
            pointer-events: none;
        }

        .process-desktop .process-desktop-base-line {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #374151;
            opacity: 0.3;
        }

        .process-desktop .progress-line {
            position: absolute;
            width: 0px;
            height: 100%;
            background-color: #FFDFB3;
            left: 0;
            top: 0;
            z-index: 1;
        }

        /* Center the letters on the line: same vertical position (51%) and horizontally centered */
        .process-desktop .process-desktop-letters-wrap {
            position: absolute;
            top: 51%;
            left: 50%;
            width: 100%;
            max-width: 1400px;
            padding-left: 1rem;
            padding-right: 1rem;
            transform: translate(-50%, -50%);
            z-index: 10;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .process-desktop .process-desktop-letters-wrap {
                padding-left: 3rem;
                padding-right: 3rem;
            }
        }

        .process-desktop .process-desktop-item {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .process-desktop .process-desktop-letter {
            color: #4b5563;
            transition: color 0.4s ease-out, text-shadow 0.4s ease-out;
            padding: 0 10px;
            display: block;
            line-height: 1;
        }

        .process-desktop .process-desktop-label {
            opacity: 1;
            color: #4b5563;
            transition: color 0.4s ease-out;
            position: absolute;
            width: 160px;
            text-align: center;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-weight: 600;
            line-height: 1.25;
        }

        @media (min-width: 768px) {
            .process-desktop .process-desktop-label { font-size: 0.875rem; }
        }

        .process-desktop .process-desktop-label-top {
            bottom: 100%;
            padding-bottom: 2rem;
        }

        .process-desktop .process-desktop-label-bottom {
            top: 100%;
            padding-top: 2rem;
        }

        .process-desktop .process-desktop-item.active .process-desktop-letter {
            color: #FFDFB3;
        }

        .process-desktop .process-desktop-item.active .process-desktop-label {
            color: #FFDFB3;
        }

        .support-cards { position: relative; }
        .support-card {
            position: relative;
            z-index: 0;
            transform: scale(1);
            filter: grayscale(100%);
        }
        .support-card.active {
            z-index: 10;
            transform: scale(1.2);
            filter: grayscale(0%);
        }
        .support-card .support-card-image img {
            filter: inherit;
        }
        @media (max-width: 767px) {
            .support-card.active { 
                transform: scale(1); 
            }
            .support-card{
                filter: grayscale(0%);
                transform: scale(1); 
            }
        }
        input[type="date"] {
            /* 1. Removes the native iOS rounded style and button look */
            -webkit-appearance: none;
            appearance: none;
        
            /* 2. Force the height to match your other inputs */
            /* Adjust '50px' to match the exact height of your text inputs */
            height: 40px; 
            
            /* 3. Reset padding to ensure it doesn't blow out the height */
            padding: 10px; 
            
            /* 4. Ensures the padding doesn't add to the total width/height */
            box-sizing: border-box; 
            text-align: left;
            
            /* Optional: Fixes background color if iOS forces it to white/gray */
            /* background-color: transparent;  */
        }

/* Legal pages (Terms, Privacy) – theme-aligned */
.legal-page {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    background-color: #060606;
    font-family: 'neue', sans-serif;
}
.legal-page__content {
    padding-top: clamp(10rem, 20vw, 14rem);
    padding-bottom: 6rem;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    width: 83.333%;
}
.legal-page h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 2rem;
    background: linear-gradient(76deg, #F3BC83 0%, #A68059 38%, #3E4755 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    font-family: 'neue-bold', sans-serif;
    letter-spacing: 0.02em;
}
.legal-page h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #E9CBAC;
    font-family: 'neue-bold', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.legal-page p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 0;
    margin-bottom: 1.25rem;
    letter-spacing: 1px;
}
.legal-page p span {
    display: block;
    padding-bottom: 0.5rem;
    padding-left: 1.5rem;
}
.legal-page p b {
    color: #E9CBAC;
}
@media (max-width: 1023px) {
    .legal-page__content {
        padding-top: 6rem;
    }
}
@media (max-width: 360px) {
    .legal-page h1 {
        font-size: 1.75rem;
    }
}