/*
 * Craig & Abi Wedding Portal
 * Cleaned replacement stylesheet
 *
 * Existing visual design preserved.
 * Duplicate and conflicting declarations consolidated.
 */

/* ---------- Reset ---------- */

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

html{

    scroll-behavior:smooth;

}

/* ==========================================================
   Portal Lock
========================================================== */

.portal-locked {

    overflow: hidden;
    height: 100vh;

}

body{

    font-family:var(--body-font);

    color:var(--white);

    overflow-x:hidden;

}

/* ---------- Hero ---------- */

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

}


.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../images/hero/hero.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:heroZoom 30s ease-in-out forwards;

    z-index:-2;

}

/* Dark overlay */

.overlay {
    position: absolute;
    inset: 0;
    

    background: linear-gradient(
        rgba(0,0,0,0.15),
        rgba(0,0,0,0.30)
    );

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;
}

/* Bride & Groom */

.overlay h1{

    font-family:var(--script-font);

    animation:fadeUp 1.5s ease forwards;

    font-size:clamp(5rem,10vw,9rem);

    font-weight:400;

    color:white;

    text-shadow:0 3px 15px rgba(0,0,0,.35);

    margin-top: -20px;

}


.hero-button{
    margin-top: 20px;
}



/* Date */

.overlay h2{

    margin-top:-15px;

    margin-bottom:45px;

    opacity:0;

    animation:fadeUp 1.5s ease forwards;

    animation-delay:.4s;

    font-family:var(--heading-font);

    font-size:1.8rem;

    font-weight:300;

    letter-spacing:4px;

    text-transform:uppercase;

}

/* Countdown */


.hero-button{

    position:relative;

    overflow:hidden;

    padding:16px 55px;

    border:2px solid var(--gold);

    background:transparent;

    color:white;

    letter-spacing:4px;

    cursor:pointer;

    transition:.4s;

}

.hero-button::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:var(--gold);

    transition:.45s;

    z-index:-1;

}

.hero-button:hover::before{

    left:0;

}

.hero-button:hover{

    color:white;

}

/* ===========================
   Countdown
=========================== */

#countdown {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 50px;
    justify-content: center;
    align-items: stretch;
    font-size: 1.4rem;
    opacity: 0;
    animation: fadeUp 1.5s ease forwards;
    animation-delay: .8s;
}

.time-box {

    width: 140px;

    padding: 25px;

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: var(--border-radius);

    text-align: center;

    box-shadow: 0 8px 30px rgba(0,0,0,.2);

}

.time-box span {

    display: block;

    font-family: var(--heading-font);

    font-size: 3.8rem;

    font-weight: 600;

    color: white;

}

.time-box small {

    font-family: var(--body-font);

    text-transform: uppercase;

    letter-spacing: 2px;

    opacity: .85;

}

/* ===========================
   Scroll Indicator
=========================== */

.scroll-indicator{

    margin-top:35px;

    font-size:2.8rem;

    color:white;

    opacity:.75;

    cursor:pointer;

    animation:bounce 2s infinite;

    transition:opacity .3s;
    opacity:0;

    animation:
        fadeUp 1.5s ease forwards,
        bounce 2s infinite 2s;

}

.scroll-indicator:hover{

    opacity:1;

}

/* ===========================
   Particle System
=========================== */

.particle {
    position: absolute;
    width: 6px;
    height: 6px;

    background: rgba(255, 255, 255, 0.8);

    border-radius: 50%;

    pointer-events: none;

    z-index: 2;

    box-shadow: 0 0 8px rgba(255,255,255,.6);
}

/* ==========================================================
   FINAL SECTION — SUBTLE PARTICLES
   ========================================================== */

.one-last-thing-section .final-particle {
    width: 3px;
    height: 3px;

    opacity: .35;

    z-index: 1;

    box-shadow:
        0 0 6px rgba(255,255,255,.45);

    pointer-events: none;
}

/* ===========================
   Welcome
=========================== */

#welcome{
    min-height:100vh;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:100px 30px;
}

.welcome-container{

    max-width:850px;

    text-align:center;

    color:var(--text);

}

.welcome-container h2{

    font-family:var(--heading-font);

    font-size:3rem;

    margin-bottom:30px;

}

.welcome-container h2.welcome-thank-you{
    margin-top:55px;
    margin-bottom:25px;
    font-size:2.1rem;
}

.divider{

    width:100px;

    height:2px;

    background:var(--gold);

    margin:30px auto 50px;

}

.welcome-container p{

    font-size:1.15rem;

    line-height:2;

    margin-bottom:25px;

}

.welcome-container h3{

    margin-top:60px;

    font-family:var(--script-font);

    font-size:3rem;

    color:var(--gold);

}

/* ===========================
   Navigation
=========================== */

#navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;
        box-sizing:border-box;

    padding:10px 32px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:var(--background);

    border:none;

    border-bottom:1px solid rgba(0,0,0,.04);

    box-shadow:0 4px 18px rgba(0,0,0,.06);

    opacity:0;

    transform:translateY(-30px);

    transition:.45s ease;

    z-index:9999;

}

#navbar.visible{

    opacity:1;

    transform:translateY(0);

}

.nav-logo{

    font-family:var(--script-font);

    font-size:2rem;

    color:var(--gold);

    text-decoration:none;

    transition:.3s ease;

    margin-left:6px;

    flex-shrink:0;

}

.nav-logo:hover{

    transform:scale(1.08);

    opacity:.9;

}

.nav-links{

    display:flex;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0;

    align-items:center;

}

.nav-links a{

    color:var(--gold);

    text-decoration:none;

    font-family:var(--body-font);

    font-size:.88rem;

    letter-spacing:1.6px;

    text-transform:uppercase;

    transition:.3s ease;

    white-space:nowrap;

}

.nav-links a:hover{

    opacity:.7;

}

.weather-nav {
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    margin-right:18px;
    padding:7px 12px;
    border:1px solid rgba(205,163,73,.35);
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:inherit;
    font-family:inherit;
    cursor:pointer;
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease;
}

.weather-nav:hover {
    background:rgba(205,163,73,.12);
    border-color:var(--gold);
    transform:translateY(-1px);
}

#weatherNavIcon {
    font-size:1rem;
    line-height:1;
}

.weather-nav-temperature {
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.5px;
    color:var(--gold);
}

.weather-nav-location {
    font-size:.72rem;
    opacity:.75;
    letter-spacing:.5px;
    color:var(--gold);
}

@media (max-width:700px) {

    .weather-nav {
        margin-left:auto;
        margin-right:10px;
        padding:7px 9px;
    }

    .weather-nav-location {
        display:none;
    }

    .weather-nav-temperature {
        font-size:.78rem;
    }

}


/* ===========================
   Guest Selector
=========================== */

.guest-menu{

    position:relative;

    margin-left:18px;

    flex-shrink:0;

}

.guest-menu-button{

    display:flex;

    align-items:center;

    gap:7px;

    padding:8px 10px;

    border:none;

    background:transparent;

    color:var(--gold);

    font-family:var(--body-font);

    font-size:.82rem;

    letter-spacing:1px;

    cursor:pointer;

    white-space:nowrap;

}

.guest-menu-icon{

    font-size:1rem;

}

.guest-menu-chevron{

    font-size:.8rem;

    transition:.25s ease;

}

.guest-menu-button.active .guest-menu-chevron{

    transform:rotate(180deg);

}

.guest-menu-dropdown{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    width:230px;

    padding:18px;

    background:var(--background);

    border:1px solid rgba(0,0,0,.06);

    border-radius:14px;

    box-shadow:0 12px 35px rgba(0,0,0,.12);

    z-index:10000;

}

.guest-menu-dropdown.hidden{

    display:none;

}

.guest-menu-title{

    margin-bottom:12px;

    color:var(--text);

    font-family:var(--heading-font);

    font-size:1.15rem;

}

.guest-menu-option{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:11px 8px;

    border:none;

    border-top:1px solid rgba(0,0,0,.06);

    background:transparent;

    color:var(--text);

    font-family:var(--body-font);

    font-size:.9rem;

    text-align:left;

    cursor:pointer;

}

.guest-menu-option:hover{

    color:var(--gold);

}

.guest-menu-option.current{

    color:var(--gold);

}

/* Divider between navigation and current guest */

.guest-menu {
    border-left: 1px solid rgba(190, 150, 70, 0.25);
    padding-left: 22px;
    margin-left: 8px;
}

/* ===========================
   Hamburger
=========================== */

.hamburger{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    width:44px;

    height:44px;

    padding:0;

    background:transparent;

    border:none;

    cursor:pointer;

}

.hamburger span{

    display:block;

    width:30px;

    height:3px;

    background:var(--gold);

}

.hamburger .line{

    transition:
        transform .35s ease,
        opacity .35s ease;

    transform-origin:center;

}

.hamburger.active .line1{

    transform:
        translateY(9px)
        rotate(45deg);

}

.hamburger.active .line2{

    transform:scaleX(0);

    opacity:0;

}

.hamburger.active .line3{

    transform:
        translateY(-9px)
        rotate(-45deg);

}

body.menu-open{

    overflow:hidden;

}

/* ===========================
   Content Sections
=========================== */

.content-section{

    min-height:100vh;

    padding:120px 40px;

    background:var(--background);

}

.content-section:nth-child(even){

    background:white;

}

.section-header{

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.section-header h2{

    font-family:var(--heading-font);

    font-size:4rem;

    color:var(--text);

    margin-bottom:20px;

}

.section-header p{

    font-size:1.2rem;

    line-height:2;

    color:#666;

}

.personalised-welcome {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: var(--gold);
    margin-top: 5px;
    margin-bottom: 30px;
}

/* ===========================
   Card System
=========================== */

.card-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:30px;

    max-width:1100px;

    margin:70px auto 0;

    align-items:stretch;

}

/* ===================================
   Travel Detail Panel
=================================== */

.travel-panel{
    max-width:1100px;
    margin:40px auto 0;
    background:white;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-20px);
    transition:
        max-height .8s cubic-bezier(.4,0,.2,1),
        opacity .5s ease,
        transform .65s ease;
}

.travel-panel-content h2{

    font-family:var(--heading-font);

    font-size:3rem;

    color:var(--text);

    margin-bottom:30px;

}

.travel-panel.open{

    max-height:5000px;

    opacity:1;

    transform:translateY(0);

}

.travel-panel:not(.open){
    pointer-events:none;
}

.travel-panel-content{
    padding:4px;
    opacity:0;
    transform:translateY(20px);
    transition:
        opacity .45s ease,
        transform .6s ease;
}

.travel-panel-close{
    margin-top:26px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.08);
    display:flex;
    justify-content:center;
}

.travel-panel-close-button{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:transparent;
    color:var(--gold);
    cursor:pointer;
    border-radius:50%;
    transition:
        background .2s ease,
        transform .2s ease;
}

.travel-panel-close-button:hover{
    background:rgba(205,163,73,.08);
}

.travel-panel-close-chevron{
    font-size:1.5rem;
    line-height:1;
    transform:translateY(2px);
}

@media (max-width:768px){

    .travel-panel{
        max-width:100%;
        margin:0 8px 0;
        border-radius:0 0 18px 18px;
        border-top:2px solid var(--gold);
        box-shadow:0 12px 30px rgba(0,0,0,.08);
        overflow:hidden;
    }

    .travel-panel-content{
        padding:26px 24px 30px;
    }

}

.travel-panel.open .travel-panel-content{
    opacity:1;
    transform:translateY(0);
    transition-delay:.15s;
}

.info-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

}

.info-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--gold);

    z-index:2;

}

.info-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.info-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.card-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding: 24px;

}

.card-content h3{

    font-family:var(--heading-font);

    font-size:1.7rem;

    color:var(--text);

    margin-bottom:15px;

}

.card-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}
.card-content a{

    margin-top:auto;

}

.card-content a:hover{

    text-decoration:underline;

}

.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    display:block;

    transition:transform .6s ease;

}

.info-card.open{

    border:2px solid var(--gold);

    box-shadow:0 20px 50px rgba(0,0,0,.15);

    transform:translateY(-8px);

}

.info-card.open img{

    transform:scale(1.05);

}

.info-card:hover .card-image img{

    transform:scale(1.08);

}

.card-toggle{

    margin-top:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:18px 0 0;

    background:none;

    border:none;

    border-top:1px solid rgba(0,0,0,.08);

    color:var(--gold);

    font-family:var(--body-font);

    font-size:1rem;

    cursor:pointer;

}

.card-details{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:

        max-height .45s ease,

        opacity .3s ease,

        margin-top .3s ease;

}

.card-details.open{

    max-height:2000px;

    opacity:1;

    margin-top:25px;

}

.arrow{

    transition:.35s ease;

    font-size:1.3rem;

}

.info-card.open .arrow{

    transform:rotate(180deg);

}

/* Negril destination cards */
.negril-destination-card.open .arrow{
    transform:rotate(180deg);
}

.hamburger{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    width:44px;

    height:44px;

    padding:0;

    background:transparent;

    border:none;

    cursor:pointer;

}

.hamburger span{

    display:block;

    width:30px;

    height:3px;

    border-radius:10px;

    background:var(--gold);

}

.hamburger .line{

    transition:
        transform .35s ease,
        opacity .35s ease;

    transform-origin:center;

}

.hamburger.active .line1{

    transform:
        translateY(9px)
        rotate(45deg);

}

.hamburger.active .line2{

    transform:scaleX(0);

opacity:0;

}

.hamburger.active .line3{

    transform:
        translateY(-9px)
        rotate(-45deg);

}

body.menu-open{

    overflow:hidden;

}

/* ===================================
   Mobile Menu
=================================== */

.mobile-menu{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(20px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:50px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

#welcome{
    min-height:auto;
    padding:65px 20px 25px;
}

.mobile-menu a{

    text-decoration:none;

    color:var(--text);

    font-family:var(--heading-font);

    font-size:2.2rem;

    transition:.3s;

}

.mobile-menu a:hover{

    color:var(--gold);

}

.mobile-menu.active{

    opacity:1;

    visibility:visible;

}

/* ===================================
   TABLET
=================================== */

@media (max-width: 992px) {

    .card-grid{

        grid-template-columns:1fr;

    }

}

/* ===================================
   MOBILE
=================================== */

@media (max-width:768px){

    #navbar{

        top:0;
        left:0;

        width:100%;

        padding:12px 20px;

        border:none;

        border-bottom:1px solid rgba(0,0,0,.04);

        border-radius:0;

        box-shadow:0 4px 18px rgba(0,0,0,.06);

    }

    .hamburger{

        display:flex;

    }

    .nav-links{

        display:none;

    }

    .guest-menu {
    margin-left:8px;
    padding-left:12px;
}

.guest-menu-button {
    padding:8px 6px;
    gap:5px;
    font-size:.76rem;
}

    .hero{

        height:100svh;

    }

    .overlay h1{

        margin-top:0;
        font-size:4.2rem;

    }

    .overlay h2{

        margin-top:10px;
        margin-bottom:35px;

    }

    .section-header h2{

        font-size:2.8rem;

    }

    .section-header p{

        font-size:1rem;

    }

}

.content-section{
    min-height:auto;
    padding:75px 20px;
}

/* ===================================
   SMALL PHONES
=================================== */

@media (max-width: 480px) {



}

.negril-destinations {
    max-width: 1100px;
    margin: 70px auto 0;
    display: grid;
    gap: 1.25rem;
}

.negril-destination-card {
    max-width: 100%;
}

.negril-destination-eyebrow {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--gold);
}

.negril-destination-details {
    padding: 0 24px 24px;
}

.negril-destination-details > div + div {
    margin-top: 1.25rem;
}

.negril-destination-details strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.negril-destination-details p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}

.negril-destination-details {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    transition:
        max-height 0.45s ease,
        opacity 0.3s ease,
        padding-top 0.3s ease;
}

.negril-destination-details.open {
    max-height: 500px;
    opacity: 1;
    padding-top: 0;
}

@media (min-width: 769px) {

    .negril-destinations {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }

}

.negril-destination-toggle {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--gold) !important;
    font-family: var(--body-font);
    font-size: 1rem;
    cursor: pointer;
}

.negril-destination-toggle .arrow {
    transition: 0.35s ease;
    font-size: 1.3rem;
}

.negril-destination-toggle[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}

@media (min-width: 769px) {

    .negril-destination-card {
        max-width: none;
    }

    .negril-destination-card .card-image img {
        height: 190px;
        aspect-ratio: auto;
    }

    .negril-destination-card .card-content {
        padding: 20px;
    }

    .negril-destination-card .card-content h3 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .negril-destination-card .card-content > p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .negril-destination-details {
        padding: 0 20px 20px;
    }

}

/* ======================================================
   MORE TO EXPLORE
   ====================================================== */

.negril-other{
    margin-top:60px;
    padding-top:50px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-other-header{
    margin-bottom:42px;
    text-align:center;
}

.negril-other-header h3{
    margin:8px 0 12px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.8rem;
    font-weight:400;
}

.negril-other-header p{
    max-width:720px;
    margin:0 auto;
    color:#666;
    line-height:1.7;
}


/* SIX ITEMS */

.negril-other-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.negril-other-item{
    padding:0 32px;
    border-left:1px solid rgba(0,0,0,.08);
}

.negril-other-item:first-child{
    padding-left:0;
    border-left:none;
}

.negril-other-item:nth-child(4){
    padding-top:40px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-other-item:nth-child(5){
    padding-top:40px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-other-item:nth-child(6){
    padding-top:40px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-other-item:nth-child(3),
.negril-other-item:nth-child(6){
    padding-right:0;
}

.negril-other-item h4{
    margin:0 0 12px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.2rem;
    font-weight:400;
}

.negril-other-item p{
    margin:0 0 12px;
    color:#666;
    line-height:1.7;
}

.negril-other-item p:last-child{
    margin-bottom:0;
}


/* MOBILE */

@media (max-width:768px){

    .negril-other{
        margin-top:42px;
        padding-top:35px;
    }

    .negril-other-header{
        margin-bottom:30px;
    }

    .negril-other-header h3{
        font-size:1.6rem;
    }

    .negril-other-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .negril-other-item,
    .negril-other-item:first-child,
    .negril-other-item:nth-child(4),
    .negril-other-item:nth-child(5),
    .negril-other-item:nth-child(6){
        padding:0 0 28px;
        border-left:none;
        border-top:none;
        border-bottom:1px solid rgba(0,0,0,.08);
    }

    .negril-other-item + .negril-other-item{
        padding-top:28px;
    }

    .negril-other-item:last-child{
        padding-bottom:0;
        border-bottom:none;
    }

}

.negril-other-item:nth-child(4){
    padding-left:0;
    border-left:none;
}

.negril-other-item:nth-child(n+4){
    padding-top:42px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-other-item:nth-child(4){
    border-left:none;
}

/* ==========================================================
   Before You Go Checklist
========================================================== */

.before-you-go-details{
    padding: 0 24px 24px;
}

.checklist-intro{
    margin-bottom: 20px;
}

.checklist-intro p{
    margin-bottom: 15px;
}

.checklist-progress{
    font-size: .85rem;
    color: var(--gold);
    letter-spacing: .5px;
}

.checklist{
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(0,0,0,.08);
}

/* ======================================================
   CHECKLIST
   ====================================================== */

.checklist-item{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid rgba(0,0,0,.08);
    cursor:pointer;
    color:var(--text);
    transition:
        color .25s ease,
        background .25s ease;
}

.checklist-item:hover{
    color:var(--gold);
}

.checklist-item input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.checklist-box{
    flex:0 0 22px;
    width:22px;
    height:22px;

    border:1.5px solid rgba(0,0,0,.25);
    border-radius:5px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .2s ease;
}

.checklist-box::after{
    content:"✓";

    font-size:14px;
    color:white;

    opacity:0;
    transform:scale(.6);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

/* Checked box */

.checklist-item input:checked + .checklist-box{
    background:var(--gold);
    border-color:var(--gold);
}

.checklist-item input:checked + .checklist-box::after{
    opacity:1;
    transform:scale(1);
}

/* Checked text */

.checklist-item input:checked ~ .checklist-label{
    color:var(--gold);
    font-weight:400;
    opacity:1;
    text-decoration:none;
}

/* Label */

.checklist-label{
    font-size:.9rem;
    color:inherit;
    transition:
        color .25s ease,
        font-weight .25s ease;
}

.checklist-complete{
    display:none;
    margin:20px 0 0;
    padding:15px;
    text-align:center;
    background:rgba(0,0,0,.025);
    border:1px solid rgba(0,0,0,.08);
    color:var(--gold);
    font-size:.95rem;
}

.checklist-complete.visible{
    display:block;
}

.before-you-go-details{
    color:var(--text);
}

.before-you-go-details .checklist-intro p{
    color:#666;
    line-height:1.7;
}

/* C5 Passenger Declaration */

.c5-section{
    padding:0 0 24px;
    margin-bottom:24px;
    border-bottom:1px solid rgba(0,0,0,.08);
}

.c5-section h3{
    margin:0 0 10px;
    color:var(--text);
}

.c5-section p{
    margin:0 0 16px;
    color:#666;
    line-height:1.7;
}

.c5-button{
    display:inline-block;
    padding:11px 18px;
    background:var(--gold);
    color:white;
    text-decoration:none;
    font-size:.85rem;
    letter-spacing:.4px;
    border-radius:4px;
    transition:.25s ease;
}

.c5-button:hover{
    opacity:.88;
    transform:translateY(-1px);
}

.c5-note{
    margin-top:12px !important;
    margin-bottom:0 !important;
    font-size:.8rem;
    opacity:.8;
}


/* Checklist */

.checklist-section h3{
    margin:0 0 10px;
    color:var(--text);
}

.checklist-section .checklist-intro{
    margin-bottom:20px;
}

.checklist-section .checklist-intro p{
    color:#666;
    line-height:1.7;
}


/* Mobile */

@media (max-width:768px){

    .c5-section{
        padding-bottom:20px;
        margin-bottom:20px;
    }

    .c5-section h3,
    .checklist-section h3{
        font-size:1.05rem;
    }

    .c5-button{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }

}

/* Transfers panel spacing */

.checklist-section{
    margin-bottom:28px;
}

.checklist-section:last-child{
    margin-bottom:0;
}

.checklist-section h3{
    margin-bottom:10px;
}

.checklist-section p{
    margin-bottom:10px;
    color:#666;
    line-height:1.7;
}


/* Good to know box */

.checklist-complete.visible{
    color:var(--text);
}

.checklist-complete.visible strong{
    display:block;
    color:var(--gold);
    margin-bottom:10px;
}

.checklist-complete.visible p{
    margin:0 !important;
    color:#666;
    line-height:1.7;
}

/* ==========================================================
   Explore Negril Full-Width Panel
   ========================================================== */

.negril-panel-details{
    padding:0 24px 24px;
    color:var(--text);
}

.negril-panel-details > div{
    margin-bottom:24px;
}

.negril-panel-details > div:last-child{
    margin-bottom:0;
}

.negril-panel-details strong{
    display:block;
    margin-bottom:8px;
    color:var(--text);
}

.negril-panel-details p{
    margin:0;
    color:#666;
    line-height:1.7;
}

/* ======================================================
   Hotel Panel
   ====================================================== */

.hotel-details{
    padding:0 24px 24px;
    color:var(--text);
}

.hotel-intro{
    margin-bottom:28px;
}

.hotel-intro h3,
.hotel-section h3{
    margin:0 0 10px;
    color:var(--text);
}

.hotel-intro p,
.hotel-section p{
    margin:0 0 12px;
    color:#666;
    line-height:1.7;
}

.hotel-section{
    margin-bottom:28px;
}

.hotel-section:last-of-type{
    margin-bottom:0;
}

.hotel-section strong{
    color:var(--text);
}

.hotel-note{
    margin-top:28px;
    padding:16px;
    background:rgba(0,0,0,.025);
    border:1px solid rgba(0,0,0,.08);
}

.hotel-note strong{
    display:block;
    margin-bottom:8px;
    color:var(--gold);
}

.hotel-note p{
    margin:0;
    color:#666;
    line-height:1.7;
}



@media (max-width:768px){

    .hotel-details{
        padding:0 20px 20px;
    }

}



/* ======================================================
   THE BIG DAY
   ====================================================== */

.big-day-feature{
    margin-bottom:24px;
    padding:28px 30px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:6px;
}

.big-day-feature-content{
    max-width:850px;
    margin:0 auto;
}

.big-day-eyebrow{
    display:block;
    margin-bottom:10px;
    color:var(--gold);
    font-size:.75rem;
    letter-spacing:1.5px;
    font-weight:600;
}

.big-day-feature h3,
.big-day-locked h3{
    margin:0 0 12px;
    color:var(--text);
    font-size:1.35rem;
}

.big-day-feature p{
    margin:0 0 12px;
    color:#666;
    line-height:1.75;
}

.big-day-feature p:last-child{
    margin-bottom:0;
}


/* ======================================================
   LOCKED WEDDING DAY CONTENT
   ====================================================== */

.big-day-locked{
    position:relative;
    margin-bottom:24px;
    padding:32px 30px;
    background:rgba(0,0,0,.025);
    border:1px solid rgba(0,0,0,.08);
    border-radius:6px;
    text-align:center;
    overflow:hidden;
}

.big-day-locked-content{
    max-width:650px;
    margin:0 auto;
}

.big-day-lock{
    margin:14px 0;
    font-size:1.5rem;
    opacity:.7;
}

.big-day-locked p{
    margin:0;
    color:#666;
    line-height:1.7;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width:768px){

    .big-day-feature{
        padding:22px 20px;
        margin-bottom:20px;
    }

    .big-day-locked{
        padding:26px 20px;
        margin-bottom:20px;
    }

    .big-day-feature h3,
    .big-day-locked h3{
        font-size:1.15rem;
    }

}

/* ======================================================
   HOTEL — MORE TO KNOW
   ====================================================== */

.hotel-more-section{
    margin-top:70px;
    padding-top:55px;
    border-top:1px solid rgba(0,0,0,.08);
}

.hotel-more-section .section-header{
    margin-bottom:45px;
    text-align:center;
}

.hotel-more-section .hotel-eyebrow{
    display:block;
    margin-bottom:10px;
    color:var(--gold);
    font-size:.75rem;
    letter-spacing:1.8px;
    font-weight:600;
}

.hotel-more-section .section-header h3{
    margin:8px 0 14px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:2rem;
    font-weight:400;
}

.hotel-more-section .section-header p{
    max-width:720px;
    margin:0 auto;
    color:#666;
    line-height:1.7;
}

.hotel-more-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.hotel-more-item{
    padding:0 35px;
    border-left:1px solid rgba(0,0,0,.08);
}

.hotel-more-item:first-child{
    padding-left:0;
    border-left:none;
}

.hotel-more-item:last-child{
    padding-right:0;
}

.hotel-more-item h4{
    margin:0 0 12px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.2rem;
    font-weight:400;
}

.hotel-more-item p{
    margin:0;
    color:#666;
    line-height:1.7;
}

.hotel-more-item .c5-button{
    margin-top:18px;
}


/* ======================================================
   MOBILE
   ====================================================== */

@media (max-width:768px){

    .hotel-more-section{
        margin-top:50px;
        padding-top:40px;
    }

    .hotel-more-section .section-header{
        margin-bottom:32px;
    }

    .hotel-more-section .section-header h3{
        font-size:1.7rem;
    }

    .hotel-more-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .hotel-more-item{
        padding:0 0 28px;
        margin-bottom:28px;
        border-left:none;
        border-bottom:1px solid rgba(0,0,0,.08);
    }

    .hotel-more-item:last-child{
        padding-bottom:0;
        margin-bottom:0;
        border-bottom:none;
    }

}

/* ======================================================
   BIG DAY — CARD GRID
   ====================================================== */

.big-day-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}


/* ======================================================
   BIG DAY — INFO CARDS
   ====================================================== */

.big-day-info-card {
    min-width: 0;
}


/* Keep the three cards equal in height */

.big-day-info-card .card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}


/* Push the button to the bottom */

.big-day-info-card .card-toggle {
    margin-top: auto;
}


/* ======================================================
   BIG DAY — DOCUMENT GRID
   ====================================================== */

.big-day-document-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: start;
}


/* Make the two document cards stretch equally */

.big-day-document-grid > .big-day-locked {
    height: auto;
    box-sizing: border-box;
}

.big-day-document-grid > .big-day-locked {
    position:relative;
    overflow:hidden;

    background:
        linear-gradient(
            rgba(255,255,255,.78),
            rgba(251,248,241,.82)
        ),
        url("images/Cards/BigDayBackground.png") center / cover no-repeat;

    border:1px solid rgba(201,164,77,.65);
    border-radius:18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.07),
        inset 0 0 0 1px rgba(201,164,77,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* =========================================
   BIG DAY DOCUMENT CARDS
   ========================================= */

.big-day-document-grid > .big-day-locked {
    position:relative;
    overflow:hidden;
    min-height:300px;
    box-sizing:border-box;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.94),
            rgba(251,248,241,.88)
        );

    border:1px solid rgba(201,164,77,.65);
    border-radius:18px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.07),
        inset 0 0 0 1px rgba(201,164,77,.12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.big-day-document-grid > .big-day-locked:hover {
    transform:translateY(-3px);

    border-color:rgba(201,164,77,.9);

    box-shadow:
        0 18px 45px rgba(0,0,0,.10),
        inset 0 0 0 1px rgba(201,164,77,.18);
}

/* Gold decorative divider */

.big-day-card-decoration {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin:14px auto 18px;
    width:180px;
}

.big-day-card-decoration span:not(.heart) {
    height:1px;
    flex:1;
    background:rgba(201,164,77,.65);
}

.big-day-card-decoration .heart {
    font-family:Georgia, serif;
    font-size:24px;
    line-height:1;
    color:var(--gold);
    transform:translateY(-1px);
}


/* ======================================================
   BIG DAY — MOBILE
   ====================================================== */

@media (max-width: 900px) {

    .big-day-card-grid {
        grid-template-columns: 1fr;
    }

    .big-day-document-grid {
        grid-template-columns: 1fr;
    }

} 

/* ======================================================
   BIG DAY — LOCKED CONTENT
   ====================================================== */

.big-day-locked:not(.big-day-unlocked) .order-of-service-content,
.big-day-locked:not(.big-day-unlocked) .wedding-menu-content {
    display:none;
}

/* ======================================================
   BIG DAY — LOCKED CARD BACKGROUND
   ====================================================== */

.big-day-document-grid > .big-day-locked:not(.big-day-unlocked) {
    background:
        linear-gradient(
            rgba(255,255,255,.86),
            rgba(251,248,241,.90)
        ),
        url("../images/Cards/BigDayBackground.png") center / cover no-repeat;
}

/* ======================================================
   BIG DAY — UNLOCKED
   ====================================================== */

.big-day-locked.big-day-unlocked{
    background:#fff;
    cursor:pointer;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.big-day-locked.big-day-unlocked:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.big-day-locked.big-day-unlocked .big-day-lock{
    display:none;
}

.big-day-locked.big-day-unlocked .big-day-locked-message{
    display:none;
}

/* ======================================================
   ORDER OF SERVICE — SCROLL
   ====================================================== */

.order-of-service-content{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:
        grid-template-rows .8s ease,
        opacity .5s ease;
}

.big-day-open .order-of-service-content{
    grid-template-rows:1fr;
    opacity:1;
}

.order-of-service-content > *{
    min-height:0;
    overflow:hidden;
}

.order-of-service-scroll{
    margin-top:24px;
    padding:46px 38px;
    background:#fbf8f1;
    border:1px solid rgba(201,164,77,.35);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    text-align:center;
}

.order-of-service-heading{
    position:relative;
    text-align:center;
    padding-bottom:30px;
    margin-bottom:30px;
}

.order-of-service-heading::after{
    content:"";
    display:block;
    width:70px;
    height:1px;
    margin:22px auto 0;
    background:#C9A44D;
}

.order-of-service-heading::before{
    content:"✦";
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    padding:0 10px;
    background:#fbf8f1;
    color:#C9A44D;
    font-size:.7rem;
}

.order-of-service-heading span{
    display:block;
    margin-bottom:4px;
    color:#9a7a32;
    font-size:.68rem;
    letter-spacing:2.5px;
    font-weight:600;
}

.order-of-service-heading h4{
    margin:4px 0 10px;
    color:#C9A44D;
    font-family:"Allura", cursive;
    font-size:3.2rem;
    font-weight:400;
    line-height:1.1;
}

.order-of-service-heading p{
    margin:0;
    color:#777;
    font-size:.8rem;
    letter-spacing:.5px;
}

/* ======================================================
   ORDER OF SERVICE — TIMELINE
   ====================================================== */

.order-of-service-items{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:0;
}

.order-of-service-item{
    position:relative;
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    padding:0 0 30px;
    text-align:left;
}

.order-of-service-item:last-child{
    padding-bottom:0;
}

/* Vertical gold line */

.order-of-service-item:not(:last-child)::after{
    content:"";
    position:absolute;
    left:49px;
    top:30px;
    bottom:0;
    width:1px;
    background:rgba(201,164,77,.35);
}

/* Time */

.order-of-service-time{
    position:relative;
    z-index:1;
    color:#9a7a32;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:1.5px;
    text-align:center;
}

/* Small gold point */

.order-of-service-time::after{
    content:"";
    position:absolute;
    top:5px;
    right:-5px;
    width:9px;
    height:9px;
    border:1px solid #C9A44D;
    border-radius:50%;
    background:#fbf8f1;
}

/* Event */

.order-of-service-item h5{
    margin:0 0 6px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.12rem;
    font-weight:400;
}

.order-of-service-item p{
    margin:0;
    color:#777;
    line-height:1.65;
    font-size:.88rem;
}

@media (max-width:768px){

    .order-of-service-scroll{
    margin-top:20px;
    padding:32px 20px;
}

    .order-of-service-heading{
        padding-bottom:22px;
        margin-bottom:22px;
    }

    .order-of-service-heading h4{
    font-size:3rem;
}

}



    @media (max-width:768px){

    .order-of-service-item{
        grid-template-columns:70px 1fr;
        gap:18px;
        padding-bottom:28px;
    }

    .order-of-service-item:not(:last-child)::after{
        left:34px;
        top:29px;
    }

    .order-of-service-time{
        font-size:.68rem;
        letter-spacing:1px;
    }

    .order-of-service-time::after{
        right:-5px;
        width:8px;
        height:8px;
    }

    .order-of-service-item h5{
        font-size:1rem;
    }

    .order-of-service-item p{
        font-size:.84rem;
    }
    

}

.big-day-unlocked-prompt{
    display:none;
    margin:10px 0 0;
    color:var(--gold);
    font-size:.75rem;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:600;
}

.big-day-unlocked .big-day-unlocked-prompt{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.big-day-unlocked-arrow{
    font-size:1rem;
    line-height:1;
    animation:bigDayArrow 1.5s ease-in-out infinite;
}

@keyframes bigDayArrow{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(4px);
    }
}

@media (max-width:768px){

    .big-day-unlocked-prompt{
        font-size:.68rem;
    }

}

/* ======================================================
   WEDDING MENU
   ====================================================== */

.wedding-menu-content{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:
        grid-template-rows .8s ease,
        opacity .5s ease;
}

.big-day-open .wedding-menu-content{
    grid-template-rows:1fr;
    opacity:1;
}

.wedding-menu-content > *{
    min-height:0;
    overflow:hidden;
}

.wedding-menu-card{
    margin-top:24px;
    padding:46px 38px;
    background:#fbf8f1;
    border:1px solid rgba(201,164,77,.35);
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    text-align:center;
}

.wedding-menu-heading{
    padding-bottom:30px;
    margin-bottom:30px;
    border-bottom:1px solid rgba(201,164,77,.30);
}

.wedding-menu-heading span{
    display:block;
    margin-bottom:5px;
    color:#9a7a32;
    font-size:.68rem;
    letter-spacing:2.5px;
    font-weight:600;
}

.wedding-menu-heading h4{
    margin:2px 0 5px;
    color:#C9A44D;
    font-family:"Allura", cursive;
    font-size:3.2rem;
    font-weight:400;
    line-height:1.1;
}

.wedding-menu-heading p{
    margin:0;
    color:#777;
    font-size:.8rem;
    letter-spacing:1px;
    text-transform:uppercase;
}

.wedding-menu-section{
    padding:0 0 25px;
    margin-bottom:25px;
    border-bottom:1px solid rgba(0,0,0,.07);
}

.wedding-menu-section:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

.wedding-menu-section h5{
    margin:0 0 14px;
    color:#9a7a32;
    font-family:var(--heading-font);
    font-size:1.15rem;
    font-weight:400;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.wedding-menu-section p{
    margin:5px 0;
    color:#555;
    font-size:.88rem;
    line-height:1.6;
}

.wedding-menu-dessert h5{
    margin-bottom:10px;
}

@media (max-width:768px){

    .wedding-menu-card{
        margin-top:20px;
        padding:32px 20px;
    }

    .wedding-menu-heading{
        padding-bottom:24px;
        margin-bottom:24px;
    }

    .wedding-menu-heading h4{
        font-size:3rem;
    }

    .wedding-menu-section{
        padding-bottom:22px;
        margin-bottom:22px;
    }

    .wedding-menu-section h5{
        font-size:1.05rem;
    }

    .wedding-menu-section p{
        font-size:.84rem;
    }

}

/* ======================================================
   WORTH THE TRIP
   ====================================================== */

.negril-worth-trip{
    margin-top:60px;
    padding-top:50px;
    border-top:1px solid rgba(0,0,0,.08);
}

.negril-worth-trip-header{
    margin-bottom:42px;
    text-align:center;
}

.negril-worth-trip-header h3{
    margin:8px 0 12px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.8rem;
    font-weight:400;
}

.negril-worth-trip-header p{
    max-width:720px;
    margin:0 auto;
    color:#666;
    line-height:1.7;
}

.negril-worth-trip-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.negril-worth-trip-item{
    padding:0 32px;
    border-left:1px solid rgba(0,0,0,.08);
}

.negril-worth-trip-item:first-child{
    padding-left:0;
    border-left:none;
}

.negril-worth-trip-item:last-child{
    padding-right:0;
}

.negril-worth-trip-item h4{
    margin:0 0 12px;
    color:var(--text);
    font-family:var(--heading-font);
    font-size:1.2rem;
    font-weight:400;
}

.negril-worth-trip-item p{
    margin:0 0 12px;
    color:#666;
    line-height:1.7;
}

.negril-worth-trip-item p:last-child{
    margin-bottom:0;
}


@media (max-width:768px){

    .negril-worth-trip{
        margin-top:42px;
        padding-top:35px;
    }

    .negril-worth-trip-header{
        margin-bottom:30px;
    }

    .negril-worth-trip-header h3{
        font-size:1.6rem;
    }

    .negril-worth-trip-grid{
        grid-template-columns:1fr;
        gap:28px;
    }

    .negril-worth-trip-item{
        padding:0 0 28px;
        border-left:none;
        border-bottom:1px solid rgba(0,0,0,.08);
    }

    .negril-worth-trip-item:last-child{
        padding-bottom:0;
        border-bottom:none;
    }

}

/* ==================================================
   TRIP INTEREST POLL
   ================================================== */

.negril-trip-poll {
    margin-top: 48px;
    padding: 32px;
    background: var(--card-bg, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.negril-trip-poll-header {
    max-width: 720px;
    margin-bottom: 28px;
}

.negril-trip-poll-header h3 {
    margin: 8px 0 10px;
}

.negril-trip-poll-header p {
    margin: 0;
    line-height: 1.6;
}

.negril-trip-poll-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.negril-trip-poll-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.negril-trip-poll-option:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.22);
}

.negril-trip-poll-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.negril-trip-poll-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1.5px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.negril-trip-poll-option input:checked + .negril-trip-poll-check {
    background: #222;
    border-color: #222;
}

.negril-trip-poll-option input:checked + .negril-trip-poll-check::after {
    content: "✓";
    display: block;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
}

.negril-trip-poll-option:has(input:checked) {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.3);
}

.negril-trip-poll-option-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.negril-trip-poll-option-content strong {
    font-size: 1rem;
}

.negril-trip-poll-option-content span {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.75;
}

.negril-trip-poll-submit {
    margin-top: 22px;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background: #222;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.negril-trip-poll-submit:hover {
    transform: translateY(-1px);
}

.negril-trip-poll-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.negril-trip-poll-message {
    margin: 14px 0 0;
    font-size: 0.9rem;
}

.negril-trip-poll-results {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.negril-trip-poll-results > strong {
    display: block;
    margin-bottom: 12px;
}

.negril-trip-poll-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 0;
    font-size: 0.9rem;
}

.negril-trip-poll-result strong {
    min-width: 28px;
    text-align: right;
}


/* --------------------------------------------------
   Mobile
   -------------------------------------------------- */

@media (max-width: 700px) {

    .negril-trip-poll {
        margin-top: 36px;
        padding: 24px 20px;
        border-radius: 16px;
    }

    .negril-trip-poll-options {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .negril-trip-poll-option {
        padding: 17px;
    }

    .negril-trip-poll-submit {
        width: 100%;
    }

}

/* Trip poll text colours */
.negril-trip-poll,
.negril-trip-poll h3,
.negril-trip-poll p,
.negril-trip-poll strong,
.negril-trip-poll-option-content,
.negril-trip-poll-option-content span,
.negril-trip-poll-result,
.negril-trip-poll-result strong {
    color: #222;
}

.negril-trip-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 16px 0 18px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.negril-trip-meta span {
    display: inline-flex;
    align-items: center;
}

.negril-trip-note {
    margin: 18px auto 0;
    max-width: 760px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #555;
    opacity: 0.8;
    text-align: center;
}

/* ==================================================
   Trip options — two centred cards
   ================================================== */

.negril-trip-options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}


/* Trip information inside cards */

.negril-trip-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 16px 0 18px;
    font-size: 0.82rem;
    line-height: 1.4;
    color: inherit;
}

.negril-trip-meta div {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #555;
    white-space: nowrap;
}


/* Mobile */

@media (max-width: 768px) {

    .negril-trip-options-grid {
        grid-template-columns: 1fr;
        max-width: none;
    }

}

.big-day-document-grid > .big-day-locked.big-day-unlocked {
    background:
        linear-gradient(
            rgba(255,255,255,.86),
            rgba(251,248,241,.90)
        ),
        url("../images/Cards/BigDayBackground.png") center / cover no-repeat;
}

/* Big Day expanded backgrounds */
.order-of-service-scroll,
.wedding-menu-card {
    background:
        linear-gradient(
            rgba(255,255,255,.84),
            rgba(251,248,241,.88)
        ),
        url("../images/Cards/BigDayBackground.png") center / cover no-repeat;
}

/* ==========================================================
   ONE LAST THING — CLEAN FINAL SECTION
   ========================================================== */

.one-last-thing-section {
    position: relative;

    min-height: 760px;

    overflow: hidden;

    display: flex;
    align-items: center;

    background: transparent;
}


/* ----------------------------------------------------------
   HERO IMAGE
   Same treatment as the main hero
   ---------------------------------------------------------- */

.one-last-thing-section::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        url("../images/hero/hero.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: -2;
}


/* ----------------------------------------------------------
   HERO OVERLAY
   ---------------------------------------------------------- */

.one-last-thing-section::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.30)
        );

    z-index: -1;

    pointer-events: none;
}


/* ----------------------------------------------------------
   CONTENT
   ---------------------------------------------------------- */

.one-last-thing-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 45px 30px 55px;

    text-align: center;
}


/* ----------------------------------------------------------
   EYEBROW
   ---------------------------------------------------------- */

.one-last-thing-eyebrow {
    display: block;

    margin-bottom: 10px;

    font-family: var(--body-font);

    font-size: .72rem;

    font-weight: 500;

    letter-spacing: .28em;

    color: var(--gold);
}


/* ----------------------------------------------------------
   DIVIDER
   ---------------------------------------------------------- */

.one-last-thing-divider {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 18px;
}


.one-last-thing-divider span:not(.heart) {
    width: 48px;
    height: 1px;

    background: rgba(201,164,77,.8);
}


.one-last-thing-divider .heart {
    color: var(--gold);

    font-size: 1.1rem;

    line-height: 1;
}


/* ----------------------------------------------------------
   MAIN HEADING
   ---------------------------------------------------------- */

.one-last-thing-header {
    margin-bottom: 30px;
}


.one-last-thing-header h2 {
    margin: 0;

    font-family: var(--heading-font);

    font-size: clamp(2.8rem, 5vw, 4.3rem);

    font-weight: 400;

    line-height: 1.05;

    color: #ffffff;

    text-shadow:
        0 3px 15px rgba(0,0,0,.35);
}


.one-last-thing-header h2 em {
    color: var(--gold);

    font-weight: 400;

    text-shadow:
        0 3px 15px rgba(0,0,0,.35);
}


/* ----------------------------------------------------------
   MESSAGE
   NO BOX
   NO BLUR
   ---------------------------------------------------------- */

.one-last-thing-message {
    width: 100%;
    max-width: 850px;

    margin: 0 auto;

    padding: 0;

    background: none;

    border: none;

    border-radius: 0;

    box-shadow: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    text-align: center;
}


/* ----------------------------------------------------------
   BODY TEXT
   Light, elegant and crisp
   ---------------------------------------------------------- */

.one-last-thing-message p {
    max-width: 820px;

    margin: 0 auto 22px;

    font-family: var(--body-font);

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.65;

    letter-spacing: .01em;

    color: #ffffff;

    text-shadow:
        0 2px 6px rgba(0,0,0,.55);
}


/* ----------------------------------------------------------
   CLOSING MESSAGE
   ---------------------------------------------------------- */

.one-last-thing-closing {
    margin-top: 30px !important;

    font-family: var(--heading-font) !important;

    font-size: 1.45rem !important;

    font-weight: 400 !important;

    line-height: 1.3 !important;

    color: var(--gold) !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55) !important;
}


/* ----------------------------------------------------------
   SIGN OFF
   ---------------------------------------------------------- */

.one-last-thing-signoff {
    margin-top: 8px !important;

    font-family: var(--heading-font) !important;

    font-size: 1.2rem !important;

    font-weight: 400 !important;

    line-height: 1.3 !important;

    color: #ffffff !important;

    text-shadow:
        0 2px 8px rgba(0,0,0,.55) !important;
}


.one-last-thing-signoff span {
    margin-left: 5px;

    color: var(--gold);
}


/* ----------------------------------------------------------
   FINAL PARTICLES
   ---------------------------------------------------------- */

.one-last-thing-section .final-particle {
    z-index: 1;

    width: 3px;
    height: 3px;

    opacity: .35;

    box-shadow:
        0 0 5px rgba(255,255,255,.4);

    pointer-events: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {

    .one-last-thing-section {
        min-height: 760px;

        align-items: flex-start;
    }


    .one-last-thing-inner {
        max-width: 100%;

        padding: 38px 22px 50px;
    }


    .one-last-thing-header {
        margin-bottom: 28px;
    }


    .one-last-thing-eyebrow {
        font-size: .68rem;
    }


    .one-last-thing-header h2 {
        font-size: 2.65rem;

        line-height: 1.02;
    }


    .one-last-thing-message {
        max-width: 100%;
    }


    .one-last-thing-message p {
        max-width: 100%;

        font-size: .94rem;

        font-weight: 400;

        line-height: 1.6;

        margin-bottom: 19px;

        text-shadow:
            0 2px 6px rgba(0,0,0,.6);
    }


    .one-last-thing-closing {
        margin-top: 25px !important;

        font-size: 1.3rem !important;
    }


    .one-last-thing-signoff {
        margin-top: 7px !important;

        font-size: 1.15rem !important;
    }

}
/* ======================================================
   HERO COUNTDOWN — MOBILE
   ====================================================== */

@media (max-width: 768px) {

    #countdown {
        width: 100%;
        max-width: 100%;
        gap: 8px;
        margin-top: 15px;
        margin-bottom: 35px;
        padding: 0 10px;
        flex-wrap: nowrap;
    }

    #countdown .time-box {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        padding: 14px 4px;
    }

    #countdown .time-box span {
        font-size: 2.25rem;
    }

    #countdown .time-box small {
        font-size: .58rem;
        letter-spacing: 1.2px;
        white-space: nowrap;
    }

}