@font-face {
    font-family: 'General Sans';
    src: url('font/GeneralSans-Regular.woff2') format('woff2'),
        url('font/GeneralSans-Regular.woff') format('woff'),
        url('font/GeneralSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('font/GeneralSans-Medium.woff2') format('woff2'),
        url('font/GeneralSans-Medium.woff') format('woff'),
        url('font/GeneralSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('font/GeneralSans-Semibold.woff2') format('woff2'),
        url('font/GeneralSans-Semibold.woff') format('woff'),
        url('font/GeneralSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'General Sans';
    src: url('font/GeneralSans-Bold.woff2') format('woff2'),
        url('font/GeneralSans-Bold.woff') format('woff'),
        url('font/GeneralSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GatsbyFLF-Bold';
    src: url('font/GatsbyFLF-Bold.woff') format('woff'),
        url('font/GatsbyFLF-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-light: #FAFAFA;
    --text-light: #FAFAFA;
    --text-dark: #1F1F1F;
    --font-primary: 'Cormorant', serif;
    --font-headline: 'GatsbyFLF-Bold', serif;
    --primary-color: #1F1F1F;
    /* Using dark as primary now */

    /* Layout */
    --header-height: 49px;

    /* Variables */
    --transition-soft: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    margin: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.5;
    font-weight: 400;
    font-size: 24px;
    /* Body Default */
}


/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #282828;
    /* Requested Grey */
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
    /* Smooth fade out */
}

#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-logo svg {
    /* No scale animation, just drawing */
}

/* SVG Drawing Animation */
.draw-path {
    stroke-dasharray: 10000;
    /* Approximate max length */
    stroke-dashoffset: 10000;
    animation: drawLogo 4s ease-in-out forwards;
}

@keyframes drawLogo {
    0% {
        stroke-dashoffset: 10000;
        fill-opacity: 0;
    }

    60% {
        stroke-dashoffset: 0;
        fill-opacity: 0;
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1;
        /* Fade in fill if needed, or keep outline */
        fill: #ffffff;
    }
}


/* Final Design Typography Scaling */

/* Section Titles: Semibold 67px, 26px LH, -2% LS */
h1,
h2.section-title {
    font-family: var(--font-headline);
    font-weight: 600;
    /* Semibold */
    font-size: 67px;
    line-height: 26px;
    /* Tight line height per spec */
    letter-spacing: -0.02em;
    /* -2% */
    margin: 0 0 32px 0;
    color: var(--text-dark);
}

/* Body Copy: Regular 24px, 26px LH, -2% LS */
p,
.body-copy {
    font-family: var(--font-primary);
    font-weight: 400;
    /* Regular */
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.02em;
    color: #fafafa;
    /* Greyish for body often, or inherit */
}

@media (max-width: 768px) {
    .body-copy {
        font-size: 22px;
        line-height: 22px;
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* Reset specific overrides */
h1 {
    color: #ffffff;
    /* Typically white on hero */
}

h2 {
    font-size: 67px;
    font-family: var(--font-headline);
    /* Fallback */
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    line-height: 26px;
}

h3 {
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

h4 {
    /* Title Small */
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 500;
}

p,
li,
a {
    /* Body Large */
    font-size: 24px;
    line-height: 26px;
    letter-spacing: 0px;
}

.intro-text {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.02em;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-soft);
}

.link {
    text-decoration: underline;
    color: inherit;
    transition: var(--transition-soft);
}

.text-content {
    display: flex;
    align-content: center;
    justify-self: center;
    justify-content: center;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

@media screen {
    .container {
        padding: 4px;
    }
}

.full-width-container {
    max-width: 1400px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background-color: var(--text-dark);
    color: white;
    border-radius: 0;
    margin-top: 24px;
    transition: var(--transition-soft);
    font-size: 16px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    text-transform: none;
    letter-spacing: -0.02em;
    font-family: var(--font-primary);
}

.btn:hover {
    background-color: #3b383e;
    transform: translateY(-2px);
}

/* Navigation Typography */
/* Header Height: 49px */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 49px;
    z-index: 1000;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #D9D9D9;
    /* Hidden by default */
    color: var(--text-light);
    /* Default White Text (for Hero) */
    font-family: var(--font-headline);
}

/* Scroll State: Hidden */
#navbar.nav-hidden {
    transform: translateY(-100%);
}

/* Scroll State: Solid Background (Not on Hero) */
#navbar.nav-solid {
    background-color: #FAFAFA;
    border-bottom: 1px solid #D9D9D9;
    /* Requested border */
    color: var(--text-dark);
    /* Dark Text */
}

.nav-container {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    /* max-width: 1200px;*/
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    /* justify-content: space-between; Mobile layout needs this */
}

/* Brand Logo: Medium 16px, 24px LH, -2% LS */
.brand-logo {
    font-weight: 500;
    /* Medium */
    font-size: 26px;
    line-height: 24px;
    letter-spacing: -0.02em;
    z-index: 1002;
    margin-right: 4rem;
    color: inherit;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.nav-links li {
    margin: 0 4px;
    /* Space for hover states */
}

/* Menu Items: Regular 16px, 24px LH, -2% LS */
.nav-item {
    display: block;
    padding: 8px 16px;
    font-size: 26px;
    line-height: 24px;
    letter-spacing: -0.02em;
    font-weight: 400;
    /* Regular */
    color: inherit;
    border-radius: 0;
    /* Pill shape for active state */
    transition: var(--transition-soft);
    text-transform: none;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Hover style on solid background */
#navbar.nav-solid .nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active State: Small grey background (Pill) */
.nav-item.active {
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: 500;
    /* Subtle weight bump */
}

#navbar.nav-solid .nav-item.active {
    background-color: #EFEFEF;
    /* Light grey pill */
    color: var(--text-dark);
}

#navbar.nav-solid .hamburger {
    color: var(--text-dark);
}


/* Hamburger Menu (Hidden on Desktop) */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1002;
    color: #ffffff;
    /* Above mobile menu bg */
    margin-left: auto;
    /* Push to right */
}

.hamburger span {
    width: 24px;
    height: 2px;
    background: currentColor;
    /* Inherit color (White or Dark) */
    border-radius: 1px;
    transition: all 0.3s linear;
    position: relative;
    transform-origin: 1px;
}

.schedule-body-text {
    max-width: 45%;
    /* Greyish for body often, or inherit */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
        /* Show on mobile */
    }

    .nav-container {
        /* No fixed justify, logo left, hamburger right (margin-left auto) */
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #ffffff;
        /* White bg for menu */
        flex-direction: column;
        justify-content: center;
        /* Center items vertically */
        align-items: center;
        padding: 0;
        margin: 0;
        transform: translateY(-150%);
        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
        /* Slick slide */
        z-index: 1001;
        /* Behind Logo/Hamburger */
    }

    .nav-links.mobile-open {
        transform: translateY(0);
    }

    .nav-links li {
        width: 100%;
        margin: 10px 0;
        text-align: center;
    }

    .nav-item {
        display: inline-block;
        padding: 15px 32px;
        width: auto;
        font-size: 2.5rem;
        /* Larger font for mobile */
        color: #1d1b20 !important;
        /* Always dark in menu */
    }

    /* Hamburger to X Animation */
    .hamburger.open span:first-child {
        background: #1d1b20;
        /* X becomes dark on white bg */
        transform: translateY(8px) rotate(45deg);
        transform-origin: center;
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
        background: #1d1b20;
        transform: translateY(-8px) rotate(-45deg);
        transform-origin: center;
    }

    /* Logo styling when menu open */
    .mobile-logo-dark {
        color: #1d1b20 !important;
    }

    .schedule-body-text {
        max-width: 95%;
        font-size: 22px;
        line-height: 26px;
        margin-left: 24px;
        margin-right: 24px;
        /* Greyish for body often, or inherit */
    }

    .accommodation-intro-text {
        max-width: 95%;
        font-size: 22px;
    }
}

/* Section 1: Opening (Background Image/Video) */
.video-section {
    position: relative;
    height: 100vh;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    color: white;
    background-image: url('img/background_section_01.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 0px;
}

.video-section::before {
    /* Optional overlay if needed, currently just clear or subtle */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* Desktop Video: Centered Box */
.video-container {
    position: relative;
    z-index: 2;
    /* Box dimensions per design reference (roughly vertical rectangle) */
    /*width: 100%;*/
    /*height: 600px;*/
    max-width: 100%;
    /*max-width: 30vw;
    max-height: 85vh;*/
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile Video: Full Background */
@media (max-width: 768px) {
    .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0;
        z-index: 0;
        /* Behind overlay info */
    }

    /* On mobile, video IS the background */
    .video-section {
        background: none;
    }

    .video-container video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Cover the screen */
        border-radius: 0;
    }
}

/* Overlay text is inside the video on desktop? Or ignored? 
   User said "The first section will have background on desktop with the video centered" 
   and didn't mention overlay text. Assuming "box" only. 
   Existing overlay removed or hidden if not part of new design 
   Wait, user provided visual reference. Usually "Save the Date" is somewhere.
   I will keep .overlay available but ensure z-index.
*/
.overlay {
    z-index: 3;
    /* Above video and wash */
    text-align: center;
    position: absolute;
    /* Independent of video flow on desktop */
    pointer-events: none;
}

/* Sound Toggle */
#sound-toggle {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-soft);
}

#sound-toggle:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Base Section Styles for new design */
section {
    padding: 100px 0;
    /* More breath */
    position: relative;
    background-color: var(--bg-light);
}

.content-section-schedule {
    background-image: url('img/background_section_02.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Parallax clouds will be added via HTML/JS */
}

.content-section-accommodation {
    background-image: url('img/background_section_03.png');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.accommodation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}

.accommodation-intro {
    display: flex;
    justify-content: center;
    justify-self: center;
}


.accommodation-intro p {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.48px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .accommodation-intro p {
        font-size: 22px;
        line-height: 22px;
        margin-left: 24px;
        margin-right: 24px;
    }
}

.accommodation-intro-text {
    color: #1F1F1F;
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.48px;
}

.hotel-block {
    margin: 40px 0;
}

.hotel-intro {
    font-size: 24px;
    margin-bottom: 8px;
}

.hotel-name {
    font-family: var(--font-headline);
    font-size: 42px;
    /* Large highlight */
    font-weight: 600;
    margin: 16px 0;
    color: #1f1f1f;
    letter-spacing: -1px;
}

.hotel-desc {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 8px;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    /* Verified 16px gap */
    margin-top: 24px;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 28px;
    /* Reduced from 40px to match Figma visual ~20-30px */
    background-color: #f5f5f5;
    color: #1f1f1f;
    border-radius: 0;
    /* Highly rounded pill */
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-action:hover {
    background-color: #e0e0e0;
    transform: translateY(-2px);
}

.accommodation-note {
    margin-top: 40px;
    max-width: 700px;
}

.accommodation-note p {
    font-size: 14px;
    color: #7a7a7a;
    line-height: 20px;
}

/* To Book Card Component */
.to-book-card {
    background: #ffffff;
    border-radius: 0;
    padding: 26px;
    box-shadow: 0px 8px 32px 0px rgba(62, 62, 62, 0.1), 0px 16px 76px 0px rgba(57, 57, 57, 0.08);
    max-width: 420px;
    /* Constraint width based on design feel */
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (max-width: 768px) {
    .to-book-card {
        max-width: 310px;
    }
}

.card-header h4 {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 28px;
    color: #1f1f1f;
    margin: 0 0 4px 0;
    letter-spacing: -0.34px;
}

.card-header p {
    font-family: var(--font-primary);
    font-weight: 400;
    /* Regular */
    font-size: 18px;
    color: #7a7a7a;
    margin: 0;
    line-height: 24px;
    letter-spacing: -0.28px;
    max-width: 400px;
    /* Force line break if needed */
    margin: 0 auto;
}

/* Adjust action buttons container inside card if needed */
.to-book-card .action-buttons {
    margin-top: 16px;
}

select {
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
    text-align-last: center;
    width: 100%;
}

.card-footer-note p {
    font-size: 18px;
    color: #7a7a7a;
    line-height: 24px;
    letter-spacing: -0.28px;
    margin: 0;
    max-width: 500px;
    margin-top: 8px;
}

.content-section-attire {
    background-image: url('img/background_section_04.png');
    background-size: cover;
    background-position: center;
    min-height: 800px;
    position: relative;
}

.attire-content {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

@media (max-width: 768px) {
    .attire-content {
        justify-content: center;
    }
}

/* Moodboard Carousel */
.moodboard-carousel {
    position: relative;
    border-radius: 0;
    width: 100%;
    max-width: 1000px;
    height: 860px;
    overflow: hidden;
    box-shadow: -40px 30px 100px -25px rgba(0, 45, 156, 0.25),
        -60px 80px 60px -45px rgba(0, 0, 0, 0.25);
    background: #f5f5f5;
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    padding: 24px 32px;
    box-sizing: border-box;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: contain;
}

/* Slide Text Labels */
.slide-text-top,
.slide-text-bottom {
    font-family: var(--font-headline);
    color: #1f1f1f;
    text-align: center;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.slide-text-top {
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 4px;
    color: #1f1f1f;
    letter-spacing: -0.44px;
}

.slide-text-bottom {
    font-size: 26px;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0px;
    color: #7a7a7a;
    letter-spacing: -0.44px;
}

/* Navigation Arrows */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    color: #1f1f1f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: translateY(-50%) scale(1.08);
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

/* Dot Indicators */
.carousel-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.carousel-dot.active {
    background: #ffffff;
    transform: scale(1.15);
}

@media (max-width: 900px) {
    .moodboard-carousel {
        height: 660px;
        max-width: 356px;
    }

    .carousel-slide {
        padding: 16px 20px;
    }

    .slide-text-top {
        font-size: 18px;
        padding-bottom: 2px;
    }

    .slide-text-bottom {
        font-size: 18px;
        padding-top: 0;
        padding-bottom: 10px;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
    }

    .carousel-prev {
        left: 12px;
    }

    .carousel-next {
        right: 12px;
    }

    .carousel-dots {
        bottom: 16px;
    }
}

/* Cloud Parallax */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    /* Above bg, below content? Content needs higher z-index */
    overflow: hidden;
}

.cloud {
    position: absolute;
    opacity: 0.8;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.cloud-1 {
    top: 0%;
    right: 1%;
    width: 400px;
    z-index: 1;
}

.cloud-2 {
    top: 8%;
    left: 4%;
    width: 300px;
    z-index: 2;
}

.cloud-3 {
    bottom: 96%;
    right: 66%;
    width: 500px;
    z-index: 1;
}

/* Ensure content sits above clouds */
.content-section-schedule .container {
    position: relative;
    z-index: 2;
}

.content-section-rsvp {
    background-image: url('img/background_section_05.png');
    background-size: cover;
    background-position: center;
}

.content-section-registry {
    background-image: url('img/background_section_06.png');
    background-size: cover;
    background-position: center;
    text-align: center;
}

.registry-content {
    max-width: 740px;
    margin: 0 auto;
}

.registry-intro {
    font-size: 24px;
    line-height: 26px;
    letter-spacing: -0.48px;
    color: #fafafa;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .registry-intro {
        font-size: 22px;
        line-height: 22px;
        margin-left: 24px;
        margin-right: 24px;
    }
}

/* Foundation Card */
.foundation-card {
    background: #ffffff;
    border-radius: 0;
    padding: 26px;
    box-shadow: 0px 8px 32px 0px rgba(62, 62, 62, 0.1), 0px 16px 76px 0px rgba(57, 57, 57, 0.08);
    max-width: 556px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

@media (max-width: 768px) {
    .foundation-card {
        max-width: 310px;
    }
}

.foundation-card .card-body p {
    font-size: 20px;
    color: #7a7a7a;
    line-height: 24px;
    letter-spacing: -0.28px;
    margin: 0;
    text-align: center;
}

.foundation-card .action-buttons {
    margin-top: 8px;
}

/* Card Wrapper & Night Labels */
.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.night-label {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 36px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    margin-bottom: 16px;
}

/* Card Styles - Revised Reference */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    /* Wider gap */
    margin-top: 40px;
    padding: 0 20px;
}

.event-card {
    background: #ffffff;
    border-radius: 0;
    /* Very rounded outer card */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    /* Soft diffuse shadow */
    text-align: left;
    padding: 26px;
    /* White padding AROUND the image */
    display: flex;
    flex-direction: column;
    min-height: 425px;
}

.card-image-wrapper {
    position: relative;
    border-radius: 0;
    /* Slightly less than outer to nest nicely */
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.event-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pills Overlay */
.card-pills {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.pill {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    padding: 8px 16px;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .card-pills {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        display: flex;
        justify-content: space-between;
        pointer-events: none;
    }

    .pill {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        padding: 8px 10px;
        border-radius: 0;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

}

/* Image Bottom Overlay (Title + Pin) */
.card-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 80px 16px 20px 24px;
    /* Top padding for gradient start */
    /*background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);*/
    color: white;
    box-sizing: border-box;
}

.location-name {
    margin: 0 0 2px 0;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.location-address {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-pin {
    font-size: 14px;
}

/* Card Content (Below Image) */
.card-content {
    padding: 32px 0px 16px 8px;
    /* Padding relative to inner visual, adjusted */
}

.event-title {
    margin: 0 0 8px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1f1f1f;
    letter-spacing: -0.02em;
}

.event-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
    color: #7a7a7a;
    font-weight: 400;
}

/* Mobile Stack */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr;
        /* Stack */
    }

    h1,
    h2.section-title {
        font-size: 42px;
        /* Responsive scale */
    }

    section {
        padding: 60px 0;
    }
}

/* Mobile Stack */
@media (max-width: 900px) {
    .card-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

.alt-bg {
    background-color: #f9f9f9;
}

/* Schedule / 3-Column Layout */
.intro-text {
    font-size: 1rem;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.three-col-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    text-align: center;
    /* Text aligns left inside columns */
}

.col {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.col h3 {
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.event-details p {
    margin-bottom: 10px;
}

.event-details .time {
    font-weight: bold;
    color: #555;
}

.event-details .event-name {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 5px;
}

.event-details .location {
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
}

.event-details .desc {
    font-size: 1rem;
    line-height: 1.5;
}

/* Attire Placeholder */
.placeholder-box {
    border: 2px dashed #ccc;
    padding: 60px;
    color: #999;
    font-style: italic;
    background: #fafafa;
}

/* RSVP Card Redesign */
.rsvp-card {
    background: #ffffff;
    border-radius: 0;
    box-shadow: 0px 8px 32px 0px rgba(62, 62, 62, 0.1), 0px 16px 76px 0px rgba(57, 57, 57, 0.08);
    padding: 60px;
    max-width: 1000px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rsvp-form {
    width: 100%;
}

.rsvp-section {
    margin-bottom: 32px;
    width: 100%;
    text-align: center;
}

.rsvp-section-title {
    font-family: var(--font-headline);
    font-weight: 600;
    font-size: 32px;
    line-height: 24px;
    color: #1f1f1f;
    margin-bottom: 32px;
    letter-spacing: -0.34px;
}

/* Grids */
.input-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.input-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.center-group {
    align-items: center;
    justify-content: center;
}

.center-group.full-width {
    width: 100%;
}

.input-group label {
    font-family: var(--font-primary);
    font-weight: 400;
    /* Regular */
    font-size: 22px;
    line-height: 24px;
    color: #7a7a7a;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: -0.28px;
}

/* Inputs & Selects */
.input-group input,
.input-group select {
    width: 100%;
    height: 56px;
    background-color: #f5f5f5;
    border: none;
    border-radius: 0;
    /* pill (half height) */
    font-family: var(--font-primary);
    font-size: 16px;
    color: #1f1f1f;
    text-align: center;
    outline: none;
    box-shadow: none;
    appearance: none;
    cursor: pointer;
    /* padding: 0 20px; Not strictly needed for centered text but good for overflow */
}

/* Specific styling for select arrow if needed, but standard appearance might conflict with text-align center in some browsers. Custom arrow usually required. */

/* Button */
.btn-rsvp {
    background-color: #f5f5f5;
    color: #1f1f1f;
    height: 56px;
    padding: 0 40px;
    border-radius: 0;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 16px;
}

.btn-rsvp:hover {
    background-color: #e0e0e0;
}

.form-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Form Message */
#form-message {
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .rsvp-card {
        padding: 30px 20px;
        border-radius: 0;
        max-width: 310px;
    }

    .input-row-3,
    .input-row-2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Footer */
footer {
    background: #fafafa;
    color: #d9d9d9;
    text-align: left;
    padding: 12px 42px;
    height: 25px;
    display: flex;
    align-items: center;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
}

footer p {
    margin: 0;
    color: #d9d9d9;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -0.32px;
}