/* 1. RESET DEFAULTS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. MAIN WRAPPERS */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
}

.container {
    width: 100%;
    max-width: 1440px; 
    margin: 0 auto;
    padding: 0 20px; 
}

/* 3. HERO SECTION */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh; 
    /* fade starts at 80% and goes to your deep purple */
    background-image: linear-gradient(180deg, rgba(12, 0, 24, 0) 90%, #0C0018 100%), 
                      url('../img/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* ensures content starts from top down */
}

/* 1. Header Alignment - This centers the 1440px box on your screen */
.main-header {
    position: absolute;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center; 
    padding: 30px 0; /* Changed to 0 so the container handles the 90px */
    z-index: 10;
}

/* This is the 1440px wide box that holds your logo and menu */
.navbar-inner-wrapper {
    display: flex;
    justify-content: space-between; /* Pushes Logo left and Nav Links right */
    align-items: center;
    width: 100%;
    max-width: 1440px; /* Total design width */
    padding: 0 90px;   /* Matches the 90px padding of your hero text below */
}

/* 2. Logo - Large and locked to the left */
.logo-link {
    display: block;
    position: relative;
    width: 161.899px; 
    aspect-ratio: 161.899 / 78.467;
}

.logo-default, 
.logo-hover {
    width: 100%;
    height: 100%;
    /* 'contain' is fine, but 'left' alignment helps if the image has space */
    object-fit: contain;
    object-position: left; 
    position: absolute;
    top: 0;
    left: 0;
}

.logo-hover {
    opacity: 0;
}

.logo-link:hover .logo-hover {
    opacity: 1;
}

.logo-link:hover .logo-default {
    opacity: 0;
}

/* 3. Nav Links - Locked to the right */
.nav-links {
    display: flex;
    align-items: center; 
    gap: 45px; 
}

.nav-item {
    color: #FFFFFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    
    /* specifically set this to 400 for a clean, non-bold look */
    font-weight: 400; 
    
    letter-spacing: 1.12px;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 24px; /* from your figma data */
    
    /* this makes the font look thinner/sharper on most screens */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    transition: opacity 0.3s ease;
}

/* 3. Hero Body Alignment Fix */
/* 4. Hero Body - Perfectly aligned with the navbar above */
.hero-body-container {
    width: 100%;
    max-width: 1440px;
    padding: 210px 90px 0 90px; /* The 90px here matches the navbar above */
    display: flex;
    justify-content: flex-start; 
}

.hero-content-block {
    display: flex;
    width: 663px; 
    flex-direction: column;
    align-items: flex-start; 
    gap: 45px; /* gap between title group and the next elements */
    flex-shrink: 0;
}

.title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* try changing 35px to 25px or 20px to pull the big title up */
    gap: 25px; 
    align-self: stretch;
}

.pre-title {
    color: #C66FA7;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 400; /* ensures it's not using a bold weight */
    letter-spacing: 3.4px;
    text-transform: uppercase;
    
    /* the "magic" fix for thinner letters */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* tightening the box so it doesn't push the title down */
    line-height: 1.2; 
    margin-bottom: 0; 
}

.main-title {
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 70px;
    font-weight: 500; 
    line-height: 1; /* fixed: compact look */
    letter-spacing: -0.7px;
    text-transform: uppercase;
    margin: 0;
}

.bold-text {
    font-weight: 700;
}

/* 6. EXTRA UTILITIES */
.purple-text { color: #6F3FA0; }
.pink-text { color: #C66FA7; }

/* frame 15464 */
.pricing-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px; /* figma gap */
    align-self: stretch;
}

.pricing-text {
    align-self: stretch;
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 38px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.38px;
    text-transform: uppercase;
}

/* the pink color for the price */
.price-color {
    color: #C96BA7;
}

/* remove the negative margin from before since we have the group now */
.hero-description {
    align-self: stretch;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 30px; 
    margin-top: 10px; 
    -webkit-font-smoothing: antialiased;
}

/* this handles the tight spacing between price and description */
.info-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* much smaller gap than the 45px parent */
    align-self: stretch;
}

/* frame 15455 - vertical wrapper */
.cta-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch;
}

/* frame 15454 - horizontal buttons */
.button-group {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.btn {
    display: inline-flex;
    
    /* 1. KEEP THE HEIGHT FIXED */
    height: 50px; 
    
    /* 2. REMOVE FIXED WIDTH AND USE PADDING */
    /* width: 250px; <-- REMOVE THIS */
    padding: 0 23px; /* 0 for top/bottom (height handles it), 35px for left/right */
    
    justify-content: center;
    align-items: center;
    
    /* everything else remains the same */
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1; 
    letter-spacing: 0.36px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px; 
    transition: all 0.3s ease;
    white-space: nowrap; /* ensures the text stays on one line */
}

/* solid button style */
.btn-solid {
    background-color: #6F3FA0;
    border: 2px solid #6F3FA0;
}

.btn-solid:hover {
    background-color: #5a3282; /* slightly darker for feedback */
    border-color: #5a3282;
}

/* outline button style */
.btn-outline {
    background-color: transparent;
    border: 2px solid #6F3FA0;
}

.btn-outline:hover {
    background-color: rgba(111, 63, 160, 0.1); /* light purple tint on hover */
}

.hero-footer-note {
    align-self: stretch;
    color: #FFFFFF; /* pure white */
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 100; 
    line-height: 30px; 
    letter-spacing: 1.4px;
    text-transform: uppercase;
    
    /* remove opacity if you want it 100% bright */
    opacity: 0.8; 

    /* this makes the white look 'thicker' and brighter without actually making the font bold */
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.2); 
    
    margin-top: -30px; /* your sweet spot */
}

/* frame 2 - the outer container */
.trailer-section {
    display: flex;
    padding: 70px 90px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    /* this color must match the bottom of your hero gradient */
    background-color: #0C0018;
}

/* frame 1 - the text wrapper */
.trailer-header-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch;
}

/* experience the madness */
.trailer-pre-title {
    align-self: stretch;
    color: #C96BA7;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 3.4px;
    text-transform: uppercase;
}

/* watch the official trailer */
.trailer-main-title {
    align-self: stretch;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0;
}

.trailer-container {
    width: 100%;
    max-width: 1080px; /* adjust this to match figma width */
    display: flex;
    justify-content: center;
}

.trailer-thumb {
    width: 100%;
    height: auto;
    border-radius: 12px; /* check figma for the corner roundness */
}

/* frame 15416 */
.trailer-media-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* as per figma */
    gap: 25px;
    width: 100%;
    max-width: 1260px; /* matching the group width */
}

/* group 15452 */
.trailer-outer-frame {
    width: 100%;
    max-width: 1260px; /* matching the group width */
    height: 709px;
    /* that specific pinkish-purple glow */
    filter: drop-shadow(0 0 84px rgba(201, 107, 167, 0.25));
}

/* rectangle 1 */
.trailer-video-placeholder {
    width: 100%;
    height: 100%;
    aspect-ratio: 311/175;
    border-radius: 14px;
    background-color: #25004B; /* fallback color */
    overflow: hidden; /* keeps the image inside the rounded corners */
    display: flex;
}

.trailer-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures the image fills the 1260x709 space perfectly */
    display: block;
}

/* frame 15455 */
.trailer-footer-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    margin-top: 25px; /* helps with the gap from the thumbnail above */
}

/* typography: helicopters... */
.trailer-description {
    align-self: stretch;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 30px;
    margin: 0;
}

/* frame 15454 & button */
.trailer-cta-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.btn-unlock {
    display: flex;
    padding: 12px 25px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 5px;
    background: #6F3FA0;
    text-decoration: none;
    transition: background 0.3s ease;
    
    /* typography: unlock all episodes */
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.36px;
    text-transform: uppercase;
}

.btn-unlock:hover {
    background: #5a3282;
}

/* the svg icon */
.arrow-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.arrow-icon path {
    fill: #FFFFFF;
}

/* frame 31 */
.seasoning-section {
    display: flex;
    padding: 70px 90px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    background: linear-gradient(180deg, #0C0018 0%, #2B1443 100%);
}

/* frame 15403 */
.seasoning-row {
    display: flex;
    align-items: center;
    justify-content: center; /* pulls all 3 columns toward the middle */
    gap: 60px; /* this is now the ONLY thing controlling the distance */
    align-self: stretch;
}

/* frame 1 - column 1 */
.seasoning-col-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 0 1 auto; /* it will only take the width it needs for the text */
}

/* typography: buy the seasoning... */
.seasoning-title {
    align-self: stretch;
    /* add this to force the 4-line wrap */
    max-width: 400px; 
    
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 52px;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -0.52px;
    text-transform: uppercase;
    margin: 0;
}

.highlight-text {
    color: #C96BA7;
}

/* frame 15466 & button */
.seasoning-cta-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.btn-outline-unlock {
    display: flex;
    padding: 12px 23px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 5px;
    border: 2px solid #6F3FA0;
    background: transparent;
    text-decoration: none;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    transition: background 0.3s ease;
}

.btn-outline-unlock:hover {
    background: rgba(111, 63, 160, 0.2);
}

/* limited batch note */
.batch-note {
    width: 308px;
    color: #FFFFFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 200; /* ultra thin like the hero note */
    line-height: 30px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin: 0;
}

.seasoning-col-product {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 346px; /* stays exactly figma width */
}

.bottle-frame {
    width: 346px;
    height: 400px;
    aspect-ratio: 173/200;
    border-radius: 10px;
    
    /* that specific pink glow from the proto */
    box-shadow: 0 0 124px 0 rgba(201, 107, 167, 0.21);
    
    position: relative;
    overflow: hidden; /* clips the image to the 10px radius */
    background-color: #25004B; /* fallback matching our theme */
}

.bottle-img {
    width: 123.971%; /* as per your figma specs */
    height: 107.25%; /* as per your figma specs */
    
    /* positioning the image based on the negative offsets */
    position: absolute;
    left: -41.47px;
    top: -19.884px;
    
    object-fit: cover;
    pointer-events: none; /* ensures it doesn't interfere with clicks */
}

.bottle-frame1 {
    width: 346px;
    height: 400px;
    aspect-ratio: 173/200;
    border-radius: 10px;
    box-shadow: 0 0 124px 0 rgba(201, 107, 167, 0.21);
    position: relative;
    overflow: hidden; 
    background-color: #25004B;
}

.bottle-img1 {
    /* Force the giant image to maximum boundaries of the frame */
    width: 100%;
    height: 100%;
    
    /* Remove absolute positions and negative offsets */
    position: static; 
    
    /* Magic trick: dynamically scales and clips the asset beautifully */
    object-fit: cover; 
    object-position: center; /* Adjust to 'top' or 'bottom' if the bottle crops weirdly */
    
    pointer-events: none;
}

/* column 3 container */
.seasoning-col-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    flex: 1 0 0;
}

/* better than sex... */
.seasoning-subtitle {
    align-self: stretch;
    color: #FFF;
    font-family: 'Oswald', sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

/* $9.99 gradient text */
.seasoning-price {
    font-family: 'Oswald', sans-serif;
    font-size: 90px;
    font-weight: 700;
    letter-spacing: -0.9px;
    text-transform: uppercase;
    
    background: linear-gradient(90deg, #C96BA7 0%, #F9D5EC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1; /* helps prevent the gradient from clipping */
}

/* features container */
.seasoning-features {
    display: flex;
    width: 342px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.feature-item {
    display: flex;
    padding: 9px 0;
    align-items: center;
    gap: 14px;
    align-self: stretch;
}

.feature-icon {
    display: flex;
    width: 22px;
    justify-content: center;
    align-items: center;
}

.feature-text {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* adjusted slightly for balance */
    font-weight: 400;
}

.gallery-section {
    display: flex;
    width: 100%; /* fills 1440px or whatever screen size */
    height: 580px;
    padding: 90px 0;
    justify-content: flex-end;
    align-items: center;
    background: linear-gradient(180deg, #2B1443 0%, #0C0018 100%);
    overflow: hidden; /* hides images as they leave the screen */
    position: relative;
}

.marquee-container {
    display: flex;
    width: 100%;
}

/* frame 15429: the moving track */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 30px;
    animation: scroll-left 40s linear infinite; /* adjust time for speed */
}

/* frame 15419: the image card */
.gallery-card {
    flex: 0 0 560px; /* forces fixed width */
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #F5F5F5; /* lightgray fallback */
    overflow: hidden;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-5310px); } /* move exactly 9 cards over */
}

/* frame 32 */
.series-info-section {
    display: flex;
    width: 100%;
    max-width: 1440px;
    padding: 90px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
    margin: 0 auto;

    background-color: #0C0018;
}

/* frame 15418 & 15413 (header) */
.series-header-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    align-self: stretch;
}

.series-title-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* changed from flex-start to center */
    gap: 20px;
    align-self: stretch;
}

.series-tagline {
    color: #C96BA7;
    text-align: center;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    display: block;
}

.series-headline {
    color: #FFF;
    text-align: center;
    width: 100%;
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -0.42px;
    text-transform: uppercase;
}

.series-description {
    color: #FFF;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 19px;
    line-height: 30px;
    font-weight: 400;
}

.series-description strong {
    font-weight: 700;
}

/* frame 15463: host row */
.host-row {
    display: flex;
    flex-wrap: wrap; /* the magic fix for different laptops */
    justify-content: center;
    gap: 30px;
}

/* frame 4: host card */
.host-card {
    display: flex;
    padding-right: 50px;
    align-items: center;
    gap: 30px;
    flex: 1 0 0;
    border-radius: 13px;
    
    /* 1. the border gradient: grey to purple */
    border: 1px solid transparent;
    background: linear-gradient(#0E0912, #0E0912) padding-box,
                linear-gradient(180deg, #474747 0%, #6F3FA0 100%) border-box;
    
    /* 2. ensure the box-shadow is also a matching purple */
    box-shadow: 0 0 184px 0 rgba(111, 63, 160, 0.25);
    
    overflow: hidden;
}

/* pro-tip: if the image is still 'eating' the border, 
   ensure the border-box is strictly enforced 
*/
* {
    box-sizing: border-box;
}

.host-img {
    width: 124.737%; 
    height: 100.936%;
    object-fit: cover;
    
    /* this pulls the image to the left */
    position: relative;
    left: -67px; /* adjust this number to match the figma crop exactly */
    
    display: block;
}

.host-image-frame {
    width: 285px;
    height: 285px;
    flex-shrink: 0;
    overflow: hidden;
    /* ensure there is no border here, as the parent has it */
    border: none; 
}

.host-text-frame {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1 0 0;
}

.host-info-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.host-label {
    color: rgba(255, 255, 255, 0.80);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    letter-spacing: 3.4px;
    text-transform: uppercase;
}

.host-name {
    color: #FFF;
    font-family: 'Oswald', sans-serif;
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    letter-spacing: -0.42px;
    text-transform: uppercase;
}

.host-bio {
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 27px;
}

.main-footer {
    display: flex;
    width: 100%;
    max-width: 1440px;
    padding: 80px 90px;
    flex-direction: column;
    /* change this to center the children */
    align-items: center; 
    gap: 24px;
    margin: 0 auto;
    background-color: #0C0018;
}

.footer-top-row {
    display: flex;
    /* change from space-between to center */
    justify-content: center; 
    align-items: center;
    align-self: stretch;
}

/* ensure the logo group itself is centered if it's the only item */
.footer-logo-group {
    width: 248px;
    height: 119.1px;
    position: relative;
    margin: 0 auto; 
}

.logo-link-footer {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.logo-link-footer img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

/* hover logic */
.logo-hover-footer {
    opacity: 0; /* hidden by default */
}

.logo-link-footer:hover .logo-default-footer {
    opacity: 0; /* hide colored on hover */
}

.logo-link-footer:hover .logo-hover-footer {
    opacity: 1; /* show hover version */
}

/* the container frame */
.footer-bottom-container {
    display: flex;
    padding: 32px 0;
    flex-direction: column;
    align-items: center; /* centering the copyright text */
    gap: 64px;
    align-self: stretch;
    
    /* the divider line */
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* copyright text basics */
.copyright-text {
    width: 100%;
    max-width: 1312px;
    height: 24px;
    color: #FFF;
    text-align: center;
    font-family: 'Aeonik', sans-serif; /* make sure to link this font if hosted */
    font-size: 16px;
    line-height: 24px;
    margin: 0;
    font-weight: 400; /* default for the 'all rights reserved' part */
}

/* the bold part of the copyright */
.copyright-bold {
    font-weight: 500;
}

.mobile-menu-btn {
    display: none; /* hidden on desktop */
    position: absolute; /* takes it out of the flex calculation */
}

/* ensure the header is ready for absolute children */
.navbar-inner-wrapper {
    position: relative; 
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* mobile breakpoint */
/* mobile menu button - base style (desktop) */
.mobile-menu-btn {
    display: none;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    color: #0C0018;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    
    /* THE FIX: Start hidden and unclickable */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    transition: all 0.4s ease-in-out;
}

/* THE FIX: This class will be toggled by JS */
.back-to-top.show {
    opacity: 0.8;
    visibility: visible;
    pointer-events: auto;
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-5px);
}

/* isolated footer styles */
.main-footer-new {
    display: flex;
    width: 100%;
    background-color: #0C0018;
    padding: 80px 0 40px 0;
    flex-direction: column;
    align-items: center;
}

.footer-container-new {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    width: 100%;
    max-width: 1440px;
    padding: 0 90px; /* matches your hero/header alignment */
    margin-bottom: 60px;
}

.footer-brand-column-new {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo-link-footer-new {
    display: block;
    width: 161.899px;
    aspect-ratio: 161.899 / 78.467;
    position: relative;
    margin-bottom: 20px;
}

.logo-white-new, .logo-hover-new {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
    transition: opacity 0.3s ease;
}

.logo-hover-new { opacity: 0; }
.logo-link-footer-new:hover .logo-white-new { opacity: 0; }
.logo-link-footer-new:hover .logo-hover-new { opacity: 1; }

.footer-tagline-new {
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 300;
    text-transform: lowercase;
}

.footer-heading-new {
    color: #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.footer-list-new {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-list-new li { margin-bottom: 15px; }

.footer-list-new a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    transition: color 0.3s ease;
}

.footer-list-new a:hover { color: #C96BA7; }

.footer-bottom-new {
    width: 100%;
    max-width: 1440px;
    padding: 30px 90px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.copyright-text-new {
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

/* mobile stacking for the new footer */
@media (max-width: 768px) {
    .footer-container-new {
        grid-template-columns: 1fr;
        padding: 0 40px;
        text-align: center;
        gap: 40px;
    }
    .footer-brand-column-new, .footer-nav-column-new {
        align-items: center;
    }
    .logo-white-new, .logo-hover-new {
        object-position: center;
    }
    .footer-bottom-new {
        padding: 30px 20px 0;
    }
}

/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/
/************************************************************************************************************************/

/* hide it by default if you want to use JS later to only show on scroll */
/* for now, let's keep it visible so you can see if you like the placement */

@media (max-width: 768px) {
    /* 1. base fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0;
        padding: 0;
    }

    body, .page-wrapper, .main-content {
        background-color: #0C0018 !important;
    }

    /* 2. container sizing */
    .page-wrapper, .container, .navbar-inner-wrapper, 
    .hero-body-container, .hero-content-block,
    .trailer-media-wrapper, .trailer-outer-frame,
    .seasoning-row, .seasoning-col-info, .seasoning-col-product, .seasoning-col-details,
    .series-info-section, .host-row, .host-card,
    .main-footer, .footer-bottom-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important; 
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
    }
    
    /* 1. reclaim the 40px of space lost to global padding */
    .seasoning-col-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* 2. let the title use that new space */
    .seasoning-title {
        width: 100% !important;
        max-width: none !important; /* removes any restrictions */
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 3. layout stacking */
    .seasoning-row, .host-row, .button-group, .trailer-cta-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* 4. hero & header adjustments */
    /* 4. hero & header adjustments */
    .hero-section {
        background-image: url('../img/hero-mobile.avif') !important;
        background-size: cover !important;
        background-position: center top !important;
        
        /* THE SPACE FIX: reduced top padding from 261px to 40px */
        padding: 40px 20px 20px 20px !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important; 
        height: auto !important;
        min-height: auto !important;
    }

    .main-header { 
        padding: 60px 0 10px 0 !important;
        width: 100% !important;
    }

    .navbar-inner-wrapper { 
        display: flex !important;
        flex-direction: column !important; /* stacks logo over links */
        align-items: center !important;
        justify-content: center !important; 
        padding: 0 !important; 
        gap: 15px !important; /* space between logo and the 3 links */
    }

    /* 1. hide the burger since we don't need it */
    .mobile-menu-btn { 
        display: none !important; 
    }

    /* 2. show the 3 links in a clean row */
    .nav-links { 
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important; /* space between TEASER, SEASONING, ABOUT */
        width: 100% !important;
    }

    .nav-item {
        color: #FFFFFF !important;
        font-family: 'Roboto', sans-serif;
        font-size: 16px !important; 
        font-weight: 300 !important; /* this makes it thin */
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important; /* adds that "designer" look */
        text-decoration: none !important;
        
        /* the webkit smoothing sauce */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }

    /* 5. the master typography fix */
    .pre-title {
        display: block !important;
        text-align: center !important;
        width: 100%;
        margin-bottom: 5px !important;
    }

    .main-title { 
        color: #FFF;
        font-family: 'Oswald', sans-serif;
        font-size: 80px !important; 
        font-weight: 500;
        line-height: 1.1 !important; /* increased slightly from 72px/75px */
        letter-spacing: -0.8px;
        text-transform: uppercase;
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: -25px !important; /* lifts title closer to pre-title */
        width: 100% !important;
    }

    .better-word {
        display: block !important;
        margin-bottom: -5px !important; /* tucks 'than sex' closer to 'better' */
    }

    .line-two {
        display: block !important;
        white-space: nowrap !important; /* glues 'than' and 'sex' together */
        font-weight: 500;
    }

    .main-title .bold-text {
        font-weight: 700 !important;
        display: inline !important; /* ensures it does NOT drop to line 3 */
    }

    .hero-description { text-align: center; font-size: 18px !important; }
    
    .hero-footer-note {
        text-align: center !important;
        width: 100% !important;
        display: block !important; /* Forces it to behave as a full-width block */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 1. keep your existing centering but add width */
    .pricing-block, .info-group, .cta-section { 
        align-items: center !important; 
        text-align: center !important; 
        display: flex !important;
        flex-direction: column !important;
        
        /* THE FIX: ensure the container spans the full screen */
        width: 100% !important;
    }

    /* 1. override the global 20px padding you have in section 2 */
    .hero-body-container, .hero-content-block {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
    }

    /* 2. now the pricing block has room for 36px */
    .pricing-block {
        width: 100% !important;
        margin-top: -18px !important;
        padding: 0 !important;
    }

    .pricing-text {
        font-size: 36px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        line-height: 1.3 !important;
        
        /* give it a wider 'sweet spot' now that padding is gone */
        width: 380px !important; 
        max-width: 100% !important;
        margin: 0 auto !important;
        
        display: block !important;
        text-align: center !important;
        letter-spacing: -1px !important;
    }

    .price-color {
        white-space: nowrap !important;
        display: inline-block !important;
    }

    /* 6. other sections */
    .trailer-outer-frame { height: auto !important; aspect-ratio: 16 / 9; }
    .bottle-frame { width: 100% !important; height: 350px !important; margin-bottom: 30px !important; }
    .host-card { padding-right: 0 !important; flex-direction: column !important; }
    .host-image-frame { width: 100% !important; height: 300px !important; }

    .marquee-track { animation: none !important; flex-wrap: wrap !important; justify-content: center !important; }
    .gallery-card { flex: 1 1 100% !important; height: 250px !important; }

    .trailer-section {
        /* keeping your figma layout exactly as you specified */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 60px 10px !important;
        gap: 40px !important;
        align-self: stretch !important;

        /* THE FIX: pull the section up to overlap the hero's bottom padding */
        
        /* ensure it sits on top of the hero image */
        position: relative !important;
        z-index: 10 !important;
        
        /* make the background transparent so the hero image shows behind the text */
        background: transparent !important; 
    }

    .trailer-media-wrapper, 
    .trailer-outer-frame, 
    .trailer-video-placeholder {
        width: 100% !important;
        /* added this to break any desktop constraints */
        max-width: none !important; 
        flex: 1 !important;
        display: flex !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .trailer-img {
        /* force the image to be the full width of the parent */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: contain !important; /* switch to contain to ensure we see the whole thumbnail */
    }

    .trailer-outer-frame {
        width: 100% !important;
    }

    .trailer-description {
        /* 1. ensure it stays as a single flow of text */
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        
        /* 2. remove any potential line breaks you might have in the HTML */
        white-space: normal !important; 
        
        /* 3. adjust font-size slightly if it's still pushing to 3 lines */
        font-size: 20px !important; 
        line-height: 1.5 !important;
        
        /* 4. clear any figma gaps that might be forcing a split */
        margin: 0 auto !important;
    }

    /* if you have a <br> tag in the HTML, we hide it on mobile to keep it on 2 lines */
    .trailer-description br {
        display: none !important;
    }

    .seasoning-section {
        padding: 60px 20px !important;
        background-color: #0C0018 !important;
    }

    .seasoning-row {
        display: flex !important;
        flex-direction: column !important; /* stacks them 1, 2, 3 */
        align-items: center !important;    /* centers them horizontally */
        text-align: center !important;     /* centers the text inside */
        gap: 50px !important;              /* adds space between the 3 sections */
    }

    .seasoning-col-info, 
    .seasoning-col-product, 
    .seasoning-col-details {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .seasoning-cta-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important; /* space between button and the batch note */
        width: 100% !important;
    }

    .btn-outline-unlock {
        /* 1. slim down the padding */
        /* top/bottom: 12px | left/right: 16px */
        padding: 12px 16px !important; 
        
        /* 2. ensure it stays on one line */
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important; 
        
        /* 3. slight font adjustment if needed */
        font-size: 14px !important; 
        width: auto !important;
        max-width: 100% !important;
    }

    .arrow-icon {
        margin-left: 8px !important; /* gap between text and arrow */
        flex-shrink: 0 !important; /* prevents arrow from squishing */
    }

    .batch-note {
        font-size: 14px !important;
        margin: 0 !important;
        opacity: 0.7 !important;
    }

    .bottle-img {
        max-width: 280px !important; /* prevents the bottle from being giant on mobile */
        height: auto !important;
        margin: 0 auto !important;
    }

    .seasoning-features {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* keep icons aligned left relative to each other... */
        width: fit-content !important;      /* ...but center the whole group */
        margin: 0 auto !important;
        gap: 15px !important;
        text-align: left !important;
    }

    .seasoning-col-product {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .bottle-frame {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 0 !important;
        /* remove the background stuff here */
        background: none !important;
        min-height: auto !important; 
        transform: none !important; 
    }

    .bottle-img {
        /* 1. force the display back on */
        display: block !important;
        
        /* 2. force the mobile image source */
        content: url('https://www.betterthansexseries.com/assets/img/bottle-mobile.png') !important;
        
        /* 3. the size fix: make it significantly larger */
        /* if 100% is too small because the file has white space, try 130% */
        width: 120% !important; 
        max-width: 120% !important; 
        
        height: auto !important;
        margin: 0 auto !important;
        
        /* this ensures the oversized image stays centered */
        flex-shrink: 0 !important;
    }
    
    .bottle-frame1 {
        width: 100% !important;
        max-width: 280px !important; 
        height: 320px !important; 
        margin: 0 auto !important; 
        
        border-radius: 10px !important;
        position: relative !important;
        overflow: hidden !important; 
        
        box-shadow: 0 0 80px 0 rgba(201, 107, 167, 0.25) !important;
        background-color: #25004B !important; 
        
        /* FIX FOR SAFARI: Force a flex container layout to lock child dimensions */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        transform: none !important;
    }
    
    .bottle-img1 {
        display: block !important;
        content: normal !important; 
        
        /* FIX FOR SAFARI: Force absolute limits so it respects the container size */
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        
        object-fit: cover !important;
        object-position: center !important;
        
        margin: 0 !important;
        flex-shrink: 0 !important;
        pointer-events: none !important;
    }

    .seasoning-price {
        /* this keeps your font size 100% original */
        
        /* THE NUDGE: move it up 15 pixels without affecting anything else */
        transform: translateY(-15px) !important;
        
        /* remove any default top padding that might be pushing it down */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .seasoning-col-details {
        /* this ensures the whole column is a centering machine */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }

    .seasoning-features {
        /* move up, keep 0px gap as requested */
        transform: translateY(-20px) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important; 
        
        /* centering the block itself */
        margin: 0 auto !important;
        width: fit-content !important; 
        
        /* centering the items inside the block */
        align-items: center !important; 
        text-align: center !important;
    }

    .feature-item {
        display: flex !important;
        flex-direction: row !important; /* keep icon next to text */
        align-items: center !important;
        justify-content: center !important; /* centers the icon+text pair */
        width: 100% !important;
        margin-bottom: 10px !important; /* if gap is 0, this adds a tiny bit of air */
    }

    .feature-text{
        font-size: 18px;
    }

    .gallery-section, .marquee-container {
        display: none !important;
    }

    /* --- SECTION: HOST CARD (CHEF MCDANG) --- */
    .host-card {
        display: flex !important;
        flex-direction: column-reverse !important; 
        align-items: center !important;
        width: 100% !important;
        
        /* kill any desktop inheritance that pushes it right */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .host-text-frame {
        width: 100% !important;
        padding-top: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .host-info-stack {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .host-bio {
        color: #FFFFFF !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        max-width: 88% !important;
        margin: 10px auto 0 auto !important;
        /* smoothing to keep it looking thin */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    /* --- SECTION: SERIES TITLE & DESCRIPTION --- */
    .series-title-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .series-headline {
        max-width: 300px !important; 
        margin: 0 auto 15px auto !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
    }

    .series-description {
        color: #FFFFFF !important;
        text-align: center !important;
        font-family: 'Roboto', sans-serif !important;
        font-size: 17px !important;
        font-weight: 400 !important;
        line-height: 29px !important;
        letter-spacing: 0.5px !important;
        max-width: 93% !important;
        margin: 0 auto !important;
        /* smoothing to keep it looking thin */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }

    .series-description strong {
        font-weight: 700 !important;
        color: #FFFFFF !important;
    }

    .host-image-frame {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        /* CHANGE THIS: align to flex-end so it sits on the floor */
        align-items: flex-end !important; 
        margin: 0 !important;
        padding: 0 !important;
        /* ADD THIS: prevents ghost text height */
        line-height: 0 !important; 
    }

    .host-img {
        width: 352px !important;
        height: 285px !important;
        aspect-ratio: 352 / 285 !important;
        object-fit: cover !important;
        display: block !important;
        
        /* standard centering remains */
        margin-left: auto !important;
        margin-right: auto !important;

        /* CHANGE THIS: ensure no baseline gap */
        vertical-align: bottom !important; 
        
        position: relative !important;
        left: 0 !important;
        transform: none !important;
    }

    .footer-container { /* or whatever your wrapper class is */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* centering for mobile */
        gap: 64px !important;
        padding: 32px 0 !important;
        align-self: stretch !important;
        
        /* the border style from your design */
        border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
        width: 100% !important;
    }

    .copyright-text {
        color: #FFFFFF !important;
        text-align: center !important; /* keeps text aligned center */
        font-family: 'Roboto', sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        
        /* the smoothing sauce */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    .copyright-bold {
        font-weight: 700 !important;
    }
}

/* mobile alignment fix */
@media (max-width: 768px) {
    .main-footer-new {
        align-items: flex-start; /* reset the footer wrapper to the left */
        padding: 60px 0 40px 0;
    }

    .footer-container-new {
        display: grid;
        /* ensure the grid itself starts at the very left edge of the padding */
        justify-content: start; 
        grid-template-columns: 1fr 1fr; 
        padding: 0 40px; 
        gap: 40px 30px; /* added a bit more horizontal gap between columns */
        width: 100%;
    }

    .footer-brand-column-new {
        grid-column: span 2; 
        align-items: flex-start;
        width: 100%;
    }

    .footer-nav-column-new {
        /* force the column and its content to the left */
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }

    .footer-heading-new {
        /* ensures the 'explore' and 'support' text doesn't center itself */
        text-align: left;
        width: 100%;
        margin-left: 0;
    }

    .footer-list-new {
        width: 100%;
        text-align: left;
    }

    .footer-bottom-new {
        padding: 30px 40px 0;
        text-align: left;
        margin-left: 0;
    }
}