/* ==========================================================================
   01. GENERAL STYLES & RESETS
   ========================================================================== */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Montserrat', sans-serif; color:#fff; background: var(--bg-darkest); overflow-x:hidden; transition:background 0.5s ease; will-change: background; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
a {text-decoration:none; color:inherit;}
img {max-width:100%; display:block; -webkit-user-drag: none; user-drag: none;}
html, body {
  overflow-x: hidden;
}

/* ==========================================================================
   03. LOADER & PROGRESS BAR
   ========================================================================== */
#loader {position:fixed; top:0; left:0; width:100%; height:100%; background: var(--bg-darkest); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity 0.5s;}
#loader .loader-content {text-align:center;}
#loader h1 {font-family:'Playfair Display', serif; font-size:3rem; margin-bottom:10px;}
#loader p {font-size:1.2rem;}

#progress-bar {position:fixed; top:0; left:0; width:0; height:4px; background:#fff; z-index:1000; transition:width 0.25s; will-change: width;}

/* ==========================================================================
   04. GLOBAL SECTION TYPOGRAPHY VARIABLES
   The actual per-section classes (.hero-gate, .countdown-section, etc.)
   each set their own background/color directly — that's the real system
   in use. These two variables exist only so a client's theme.css can
   override subtitle/heading-shadow color ONCE for a light-pastel theme
   instead of repeating the same override on every light section. Both
   default to the original hardcoded dark-theme values below, so nothing
   changes for any existing client unless their theme.css sets these.
   ========================================================================== */
:root {
  --section-subtitle-color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   05. LOGO, COCKPIT CONTROLS (NAV & MUSIC)
   ========================================================================== */

/* Custom Logo Styling */
.studio-logo {
    width: 32px; /* Adjust based on your logo's aspect ratio */
    height: auto;
    filter: brightness(0) invert(1); /* Makes a dark logo white to match your theme */
    transition: transform 0.4s ease;
}

.brand-btn {
    border-color: var(--accent-glow) !important;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0s;
    position: relative;
}

/* Small dot indicator - shows there's a menu */
.brand-btn::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    background: var(--accent, #C97B8A);
    border-radius: 50%;
    border: 1.5px solid rgba(0,0,0,0.4);
}

#cockpit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensures the SVG doesn't bleed out */
    cursor: pointer;
    /* Your existing button styles (border, glassmorphism, etc.) */
}

.logo-at {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 38px;
    fill: #FFFFFF;
    /* Optional: subtle shadow to lift it off the background */
    filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
}

.logo-studio {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Increased from 600 for readability */
    font-size: 11px;  /* Slight bump in size */
    letter-spacing: 3px; /* Reduced spacing so letters don't disappear */
    fill: var(--accent-light); /* A slightly punchier gold for small text */
    text-transform: uppercase;
}

.at-logo text {
    transition: filter 0.3s ease, fill 0.3s ease;
}

#cockpit-btn:hover .logo-at {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#cockpit-btn:hover .logo-studio {
    filter: drop-shadow(0 0 5px var(--accent-glow)); /* Your gold color */
}

/* ==========================================================================
   COMMAND BAR — centered bottom pill (music + nav)
   Replaces the two isolated corner floaters.
   ========================================================================== */
.command-bar {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000000;

    display: flex;
    align-items: center;
    gap: 0;

    background: rgba(8, 8, 8, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 100px;
    padding: 8px 18px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;

    /* Gentle entrance */
    animation: barRise 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;

    /* Show/hide transition — toggled via .is-hidden (photo lightbox open, footer in view) */
    opacity: 1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.command-bar.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
    pointer-events: none;
    /* The barRise entrance animation (fill-mode: both) keeps holding
       opacity:1 forever after it finishes, and CSS animations override
       normal rules regardless of specificity — so it was silently
       fighting this opacity:0 the whole time. Cancelling it here lets
       is-hidden actually take effect. */
    animation: none;
}

@keyframes barRise {
    from { opacity: 0; transform: translateX(-50%) translateY(14px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Each button inside the bar */
.command-bar__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 18px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.70);
    border-radius: 80px;
    transition: color 0.25s ease, background 0.25s ease;
}

.command-bar__btn:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.command-bar__btn i {
    font-size: 1rem;
    line-height: 1;
}

.command-bar__label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.75;
    line-height: 1;
}

/* Thin divider between the two buttons */
.command-bar__divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,0.12);
    margin: 0 4px;
    flex-shrink: 0;
}

/* Music active state */
#music-toggle.active,
.command-bar__music.active {
    color: var(--accent) !important;
    background: var(--accent-bg) !important;
    animation: none;
}

/* Pulse on music button to draw attention (stops once active) */
.command-bar__music {
    animation: barMusicPulse 3.5s ease-in-out infinite;
}
.command-bar__music.active {
    animation: none;
}

@keyframes barMusicPulse {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 0 4px rgba(201, 123, 138, 0.18); border-radius: 80px; }
}

/* Mobile: tighten spacing */
@media (max-width: 480px) {
    .command-bar {
        bottom: 20px;
        padding: 7px 14px;
    }
    .command-bar__btn {
        padding: 5px 14px;
    }
    .command-bar__label {
        font-size: 0.50rem;
        letter-spacing: 1.5px;
    }
}

.cockpit-btn {
    width: 55px;
    height: 55px;
    background: rgba(5, 5, 5, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.cockpit-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 15px var(--accent-glow);
    transform: translateY(-3px);
}

#music-toggle.active,
.music-float.active {
    background: var(--accent-glow-soft);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
    animation: none;
}

#quick-nav-toggle {
    color: #ffffff !important;
    font-weight: bold;
    line-height: 1;
}

/* ==========================================================================
   06. QUICK NAV MENU (RADAR SLIDE-OUT)
   ========================================================================== */
#quick-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    max-width: 85vw; /* Prevents overflow on ultra-small screens */
    height: 100vh;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 100px 30px 40px 40px;
    gap: 15px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
    transform: translateX(100%); /* Safer than hardcoded negative pixels */
    opacity: 0;
    border-left: 1px solid var(--accent-bg);
    overflow-y: auto;
    z-index: 999999 !important;
}

#quick-nav.show {
    transform: translateX(0);
    opacity: 1;
}

#quick-nav::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, transparent 0%, var(--accent-glow-faint) 50%, transparent 100%);
    animation: radarSweep 4s infinite linear;
    pointer-events: none;
}

@keyframes radarSweep {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

#quick-nav a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
}

/* Keep the plane visible and text bright for the active section */
#quick-nav a.active {
    color: #fff !important;
    font-weight: 700;
    padding-left: 5px; /* Subtle shift */
}

#quick-nav a.active::before {
    opacity: 1 !important;
    transform: translateX(0) !important;
    color: var(--accent); /* Gold plane */
}

/* Optional: Add a very faint gold glow to the active link */
#quick-nav a.active {
    text-shadow: 0 0 10px var(--accent-glow);
}

#quick-nav a::before {
    content: '✈';
    color: var(--accent);
    margin-right: 10px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    font-size: 0.7rem;
}

#quick-nav a:hover {
    color: #fff;
}

#quick-nav a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

#quick-nav::-webkit-scrollbar { width: 3px; }
#quick-nav::-webkit-scrollbar-thumb { background: var(--accent-border); }

/* ==========================================================================
   07. HERO GATE
   ========================================================================== */
.premium-fade {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), 
                transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.premium-fade.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Legacy aliases — do not remove. Used by JS-generated HTML and index.html */
:root {
    --gold: var(--accent);
    --rose-gold: var(--secondary);
    --terminal-dark: var(--bg-dark-3);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   07. HERO GATE (FIXED FOR FULL SCREEN & DIMMING)
   ========================================================================== */
.now-boarding-text {
    background: var(--accent-bg); /* Very subtle gold tint */
    border: 1px solid var(--accent-border-strong);
    padding: 4px 15px;
    border-radius: 50px; /* Makes it look like a sleek terminal badge */
    font-size: 0.7rem;
    letter-spacing: 2px;
}

#passenger-name {
    color: #fff;
    background: rgba(0, 0, 0, 0.3); /* Tiny dark 'pill' behind the name */
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
}

.hero-gate {
    position: relative;
    width: 100%;
    height: 100vh; 
    height: 100svh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    background: var(--bg-darkest);
    padding-bottom: 8vh;
}

/* 1. Standardize the containers */
.hero-canvas, .canvas-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden; /* Ensures no image overlap */
}

/* 2. Handle the Image Framing */
.hero-canvas img, 
.canvas-slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    /* This is the most 'universal' setting for wedding portraits */
    object-position: center center; 
    z-index: 1;
}


/* The "Dimmer" needs to be above the image (z:2) */
.scenic-gradient-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.55) 0%, 
        transparent 25%, 
        transparent 60%,
        rgba(0,0,0,0.75) 85%,
        rgba(0,0,0,0.9) 100%);
    z-index: 2; 
    pointer-events: none;
}

/* Badge + title pinned to the top of the hero, clear of the couple below */
.hero-top-content {
    position: absolute;
    top: 15vh;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Content must be at the very top (z:10) */
.hero-content-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.terminal-header {
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column; /* Stack them on mobile */
    gap: 8px;
    align-items: center;
}

.gate-number {
    color: var(--hero-gate-color); /* The specific vibrant purple from image_3d9d17.jpg */
    margin-right: 15px;
    font-weight: bold;
    text-transform: uppercase;
    /* This subtle glow makes it look like an illuminated airport sign */
    text-shadow: 0 0 10px var(--hero-gate-glow); 
    letter-spacing: 2px;
}

.status-badge {
    border: 1px solid var(--gold);
    padding: 4px 12px;
    border-radius: 4px;
    color: var(--gold);
}

.blinking {
    animation: pulseStatus 2s infinite ease-in-out;
}

.brand-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 10vw, 5rem);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 1);
    margin-bottom: 20px;
}

.brand-title .ampersand {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: var(--ampersand-color); 
    opacity: 0.8;
}

/* ==========================================================================
   08b. COUNTDOWN SECTION (moved out of hero — its own moment on the page)
   ========================================================================== */
.countdown-section {
    padding: 100px 20px;
    position: relative;
    overflow: hidden;
    text-align: center;
    background: radial-gradient(circle at center, var(--bg-dark-3) 0%, var(--bg-dark-2) 100%);
    background-image: 
        linear-gradient(var(--accent-glow-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-glow-faint) 1px, transparent 1px);
    background-size: 50px 50px;
}

.countdown-section .container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-section .departure-board {
    margin-top: 10px;
}

/* ==========================================================================
   08. DEPARTURE BOARD (COUNTDOWN)
   ========================================================================== */
.departure-board {
    background: rgba(10, 10, 10, 0.6) !important;
    backdrop-filter: blur(15px);
    
    /* Using a subtle gold border instead of white */
    border: 1px solid var(--accent-glow) !important;
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-radius: 20px;            
    padding: 1.8rem;
    display: inline-block;
}

.board-label {
    font-size: 0.7rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.9;
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.flip-counters {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.counter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.counter-box {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.2rem, 4vw, 2.5rem);
    background: #111;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    min-width: clamp(50px, 10vw, 80px);
    border-bottom: 3px solid var(--gold);
}

.counter-label {
    font-size: 0.6rem;
    letter-spacing: 2px;
    opacity: 0.6;
}

.counter-delimiter {
    font-size: clamp(1rem, 3vw, 2rem);
    color: var(--gold);
    padding-bottom: 25px;
}

.cta-container { margin-top: 50px; }

.btn-boarding-pass {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #fff;
    color: #000;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 30px rgba(255,255,255,0.1);
}

.btn-boarding-pass:hover {
    transform: translateY(-5px) scale(1.02);
    background: var(--gold);
    color: #fff;
    box-shadow: 0 15px 40px var(--accent-glow);
}

.scroll-hint {
    margin-top: 20px;
    font-size: 0.8rem;
    opacity: 0.5;
    letter-spacing: 1px;
}

@keyframes pulseStatus {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.98); }
}

/* ==========================================================================
   09. IN-FLIGHT ENTERTAINMENT (CINEMATIC VIDEO)
   ========================================================================== */
.cinema-section {
    min-height: 100vh; /* Changed from height to min-height for better mobile scaling */
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column; /* Ensures children stack vertically */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
    /* Background Image Optimization */
    background-image: var(--bg-cinema-image); 
    background-size: cover;    /* Fills the area */
    background-position: center 20%; /* Nudges the image up slightly to show more of the seat/windows */
    background-repeat: no-repeat;
    background-attachment: scroll; /* Better for mobile performance */
    transition: background 0.8s ease; 
}

.theater-dimmer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bg-darkest);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

.cinema-section.theater-mode {
    background: black;
    transition: background 0.8s ease;
    /* maybe dim other elements or add a z-index overlay */
}

.cinema-section.theater-mode .theater-dimmer {
    opacity: 0.95; 
}

.cabin-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.35); 
    z-index: 2;
}

/* Fix for the Header & Content Centering */
.ife-content {
    position: relative;
    z-index: 3; 
    display: flex;
    flex-direction: column;
    align-items: center;    /* Horizontal Center */
    justify-content: center; /* Vertical Center */
    text-align: center;      /* Centers the Text specifically */
    width: 100%;
    max-width: 1200px;
    padding: 40px 20px;
}

.ife-content .section-title {
    font-family: 'Playfair Display', serif;
    color: var(--gold, var(--accent));
    font-size: clamp(1.8rem, 5vw, 3.5rem); 
    margin-bottom: 35px;
    font-weight: 300;
    text-shadow: 0 4px 15px rgba(0,0,0,1); /* Stronger shadow for readability against the sky */
    text-align: center; /* THE FIX: Centers the header text */
    width: 100%;
}

.seatbelt-sign {
    margin-bottom: 25px;
    padding: 8px 20px;
    border: 2px solid var(--gold, var(--accent));
    border-radius: 5px;
    color: var(--gold, var(--accent));
    box-shadow: 0 0 15px var(--accent-border-strong);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: opacity 0.5s ease;
}

.cinema-section.theater-mode .seatbelt-sign,
.cinema-section.theater-mode .section-title,
.cinema-section.theater-mode .couple-tagline {
    opacity: 0.2; 
}

.blinking-dot {
    color: #ff3b3b;
    animation: blink 2s infinite;
}

.section-title {
    font-family: 'Playfair Display', serif;
    color: var(--gold, var(--accent));
    font-size: clamp(2rem, 5vw, 3.5rem); 
    margin-bottom: 35px;
    font-weight: 300;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    transition: opacity 0.5s ease;
}

/* Video Tablet Adjustments */
.video-tablet {
    width: 95%;
    max-width: 900px;
    background: rgba(10, 10, 10, 0.4); /* Darker glass for better contrast */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
    position: relative;
    z-index: 10;
}

.cinema-section.theater-mode .video-tablet {
    transform: scale(1.03); 
    box-shadow: 0 0 100px var(--accent-glow-soft);
}

.video-inner {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
}

.video-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tablet-ui-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
}

.ui-jack span {
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px 8px;
    border-radius: 3px;
}

.ui-brand {
    font-weight: 600;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.5);
}

.couple-tagline {
    margin-top: 30px;
    color: var(--gold, var(--accent));
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    transition: opacity 0.5s ease;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* ==========================================================================
   10. OUR JOURNEY (RADAR TIMELINE)
   ========================================================================== */

/* Force the specific Flight Path title to center regardless of layout */
.flight-path-section{
    padding: 100px 20px; 
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at center, var(--bg-dark-3) 0%, var(--bg-dark-2) 100%);
    background-image: 
        linear-gradient(var(--accent-glow-faint) 1px, transparent 1px),
        linear-gradient(90deg, var(--accent-glow-faint) 1px, transparent 1px);
    background-size: 50px 50px; /* Subtle grid size */
}

/* Optional: Add a faint 'sweep' effect like a real radar */
.flight-path-section::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--accent-glow-faint), transparent 30deg);
    animation: radarSweep 10s linear infinite;
    pointer-events: none;
}

@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.flight-path-section h2{
    width: 100%;
    max-width: 100%;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
}

.flight-path-section .container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.section-badge {
    display: inline-block; /* Ensures it only takes as much space as needed */
    padding: 6px 16px;
    background: var(--accent-bg);
    border: 1px solid var(--accent-glow);
    border-radius: 50px;
    color: var(--accent);
    font-size: 0.65rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
}

.section-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    color: var(--section-subtitle-color);
    max-width: 600px; /* Prevents text from being too wide on desktop */
    margin: 0 auto 40px; /* Centers the block and adds bottom spacing */
    line-height: 1.6;
}

.radar-timeline {
    width: 100%;
    text-align: left; 
    position: relative;
    padding: 20px 0;
}


.flight-line {
    position: absolute;
    left: 20px; 
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, 
        var(--accent-bg) 0%, 
        var(--gold) 50%, 
        var(--accent-bg) 100%);
    box-shadow: 0 0 15px var(--accent-glow);
}

.milestone {
    position: relative;
    margin-bottom: 80px;
    padding-left: 60px; 
    cursor: default;
}

/* Create a header area for the Date/Title and Stamp */
.milestone-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 15px; /* Ensures text never touches the stamp */
}

.milestone:last-child {
    margin-bottom: 0;
}

.radar-node {
    position: absolute;
    left: 14px; 
    top: 5px;
    width: 14px;
    height: 14px;
    background: var(--bg-darkest);
    border: 2px solid var(--gold);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 10px var(--gold);
    transition: all 0.3s ease;
}

.radar-node::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px;
    right: -5px; bottom: -5px;
    border-radius: 50%;
    border: 1px solid var(--rose-gold);
    opacity: 0;
    animation: radarPulse 2s infinite ease-out;
}

.milestone-info {
    flex: 1; /* Takes up all available space on the left */
}

.milestone-content {
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    padding-top: 35px; 
    padding: 25px;
    display: flex;
    flex-direction: column;
}

.milestone:hover .milestone-content {
    transform: translateX(10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-glow);
}

.milestone:hover .radar-node {
    background: var(--gold);
    box-shadow: 0 0 20px var(--gold);
}

.milestone-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rose-gold);
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.milestone-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 12px;
}

.milestone-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
}

/* Ensure the container strictly clips everything */
.milestone-photo {
    position: relative; /* Required for absolute positioning of effects */
    width: 100%;
    height: 400px;
    overflow: hidden; /* This MUST be here to stop the white line */
    border-radius: 12px;
    margin: 15px 0;
    z-index: 1; /* Isolates the stacking context */
}

/* If you have a 'shine' or 'glint' effect, update its logic here */
.milestone-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Starts completely hidden to the left */
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent
    );
    transform: skewX(-25deg);
    transition: none; /* Prevents it from showing unless hovered */
}

/* Only move the line when the card is hovered */
.timeline-card:hover .milestone-photo::after {
    left: 150%; /* Moves it across to the right */
    transition: left 0.7s ease-in-out;
}

.milestone:hover .milestone-photo::after {
    left: 100%;
}

.milestone-photo img {
    width: 100%;
    height: 100%;
    /* This fills the gap while keeping the focus high */
    object-fit: cover;
    object-position: top; 
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.milestone:hover .milestone-photo img {
    transform: scale(1.05);
}

.passport-stamp {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0;
    position: relative; /* Change from absolute */
    top: 0;
    right: 0;
    flex-shrink: 0; /* Prevents the stamp from getting squished */
    opacity: 0;
    transform: scale(2); /* Starts big as if it's in the air */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.passport-stamp.animate-stamp {
    opacity: 1;
    transform: scale(1); /* Slams down to normal size */
}

.stamp-gold {
    border: 2px dashed var(--gold);
    color: var(--gold);
}

.stamp-rose {
    border: 2px dashed var(--rose-gold);
    color: var(--rose-gold);
}

.stamp-location { font-size: 0.8rem; letter-spacing: 1px; }
.stamp-date { font-size: 0.6rem; opacity: 0.8; }

.milestone:hover .passport-stamp {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
    filter: drop-shadow(0 0 5px var(--accent-glow));
}

/* Revealed state: Slammed down */
.milestone.revealed .passport-stamp {
    opacity: 1;
    transform: rotate(-12deg) scale(1);
}

@keyframes radarPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* ==========================================================================
   11. FLIGHT DETAILS (MECHANICAL SPLIT-FLAP)
   ========================================================================== */
.logistics-section {
    width: 100%;
    min-height: 100vh; /* Takes up the full screen height */
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    text-align: center; /* Centers the titles and subtitles */
    padding: 60px 20px;
    position: relative;
    
    /* ADD YOUR GENERATED IMAGE HERE */
    background-image: linear-gradient(rgba(0,0,0,0.85), rgba(0,0,0,0.85)), var(--bg-schedule-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect for extra premium feel */
}

.logistics-section .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the badge, title, and board */
}

/* Ensuring the text matches the premium flight theme */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: #fff;
    margin-bottom: 15px;
    width: 100%; /* Ensures it centers relative to container */
}

.section-subtitle {
    max-width: 600px;
    margin-bottom: 40px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   GARDEN EVENT CARDS — replaces split-flap board for garden theme
   ========================================================================== */

.floral-divider {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 10px 20px;
    display: block;
    overflow: visible;
    background: transparent;
}

/* First divider: dark section above → cinema section below (also dark) */
.floral-divider--dark-to-light {
    max-width: 100%;
    padding: 16px 20px;
    background: linear-gradient(to bottom, #0f1a10 0%, #0f1a10 50%, transparent 100%);
}

/* Second divider: between two light sections */
.floral-divider--light-to-light {
    max-width: 100%;
    padding: 16px 20px;
}

.floral-divider svg {
    width: 100%;
    height: 80px;
    overflow: visible;
}

/* ==========================================================================
   LOGISTICS SECTION — text contrast fixes for light lavender background
   ========================================================================== */
.logistics-section .section-title,
.logistics-section h2 {
    color: #2a1a2e !important;
    text-shadow: none !important;
}

.logistics-section .section-badge {
    color: var(--accent-dark) !important;
    border-color: var(--accent-border-mid) !important;
    background: rgba(255,255,255,0.45) !important;
}

.logistics-section .section-subtitle {
    color: #5a3a4a !important;
}

.logistics-section .garden-card-ornament {
    color: var(--accent) !important;
    opacity: 0.8 !important;
}

.logistics-section .garden-date-label {
    color: var(--accent-dark) !important;
    opacity: 0.9 !important;
}

.logistics-section .garden-event-tag {
    color: var(--accent-dark) !important;
}

.logistics-section .garden-event-divider {
    background: var(--accent-border-strong) !important;
}

.garden-date-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 40px auto 0;
    max-width: 600px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--accent-border-mid);
    border-radius: 16px;
    padding: 28px 40px;
    backdrop-filter: blur(12px);
    text-align: center;
    flex-wrap: nowrap;
}

.garden-date-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    opacity: 0.7;
}

.garden-date-value {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: #2a1a2e;
    letter-spacing: 2px;
}

.garden-card-ornament {
    font-size: 1rem;
    color: var(--accent);
    opacity: 0.6;
}

.garden-events-wrap {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.garden-event-card {
    background: rgba(255,255,255,0.60);
    border: 1px solid var(--accent-border-mid);
    border-radius: 20px;
    padding: 40px 36px;
    min-width: 260px;
    max-width: 340px;
    flex: 1;
    text-align: center;
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.garden-event-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-border-strong);
}

.garden-event-leaf { font-size: 2rem; margin-bottom: 4px; }

.garden-event-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 4px;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
}

.garden-event-time {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #2a1a2e;
    line-height: 1;
    margin: 6px 0;
}

.garden-event-divider {
    width: 40px;
    height: 1px;
    background: var(--accent-border-mid);
    margin: 6px auto;
}

.garden-event-venue-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: rgba(60,30,50,0.50);
    text-transform: uppercase;
}

.garden-event-venue {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: rgba(42,26,46,0.90);
    font-style: italic;
}

.garden-map-link {
    display: inline-block;
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: var(--accent-dark);
    text-decoration: none;
    border: 1px solid var(--accent-border-mid);
    border-radius: 20px;
    padding: 6px 16px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.garden-map-link:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 768px) {
    .garden-events-wrap {
        flex-direction: column;
        align-items: center;
    }
    .garden-event-card {
        width: 100%;
        max-width: 100%;
    }
    .garden-date-card {
        padding: 18px 16px;
        gap: 10px;
    }
    .garden-date-value {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
        letter-spacing: 1px;
    }
    .garden-card-ornament {
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   SPLIT-FLAP BOARD — kept for future client reuse
   ========================================================================== */

.split-flap-board {
    border-radius: 20px;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    box-shadow: 
        0 40px 80px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(0,0,0,1);
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 50px auto 0;
    width: 100%;
    max-width: 950px;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(10px);
    border: 2px solid var(--accent-border);
    align-self: center;
}

.board-row {
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding-bottom: 20px;
}

.board-row:last-child { border: none; }

.row-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gold); /* Using your gold variable */
    letter-spacing: 4px;
    width: 90px;
    text-transform: uppercase;
    opacity: 0.6;
    flex-shrink: 0;
}

/* The Flap Container */
.flap-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 250px; /* Keeps the 'Gate' and 'Time' blocks the same width */
}

.flap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: clamp(28px, 4.8vw, 42px);
    height: clamp(45px, 7vw, 65px);
    background: linear-gradient(to bottom, #151515 0%, #111 50%, #111 50%, #151515 100%);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.1rem, 4vw, 1.8rem);
    font-weight: 800;
    text-align: center;
    line-height: clamp(45px, 7vw, 65px);
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

/* The Mechanical Hinge Line */
.flap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--bg-darkest);
    z-index: 5;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

/* Subtle gradient for the "plastic" flap bend */
.flap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.4) 0%,
        transparent 45%,
        transparent 55%,
        rgba(0,0,0,0.4) 100%
    );
    pointer-events: none;
    z-index: 6;
}

.flap-space { width: 15px; display: inline-block;}




/* Desktop Specific: Keep everything in one line */
@media (min-width: 992px) {
    .flap-container { flex-wrap: nowrap; }
}

/* Mobile Specific: Adjust layout so labels don't crush the flaps */
@media (max-width: 768px) {
    .board-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .row-label {
        width: 100%;
        margin-bottom: 5px;
    }
    .flap-container {
        justify-content: flex-start;
    }
}



/* ==========================================================================
   12. IN-FLIGHT MAGAZINE
   ========================================================================== */
.magazine-section {
    min-height: 100vh; 
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    background: var(--bg-light); 
    color: #1a1a1a;
    padding: 60px 20px; 
}

.magazine-section .container {
    padding-top: 100px; 
    text-align: center;
}

.magazine-teaser {
    max-width: 500px;
    margin: 40px auto 0;
    cursor: pointer;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.magazine-teaser:hover {
    transform: translateY(-15px) scale(1.02);
}

.teaser-cover {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}

.teaser-cover img {
    width: 100%;
    display: block;
}

.teaser-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(20px, 5vw, 40px);
    color: #fff;
    text-align: center;
}

.teaser-title { font-family: 'Montserrat', sans-serif; letter-spacing: 5px; font-size: 0.7rem; margin-bottom: 10px; }
.teaser-subtitle { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 20px; }

.read-btn {
    align-self: center;
    background: #fff;
    color: #000;
    border: none;
    padding: 12px 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 2px;
    cursor: pointer;
}

.magazine-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-light-overlay); /* A slight cream/bone color */
    background-image: url('https://www.transparenttextures.com/patterns/felt.png'); /* Very subtle texture */
    z-index: 9999;
    display: none; 
    overflow-y: auto;
    padding: 80px 20px;
    pointer-events: none; /* Clips through when inactive */
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s;
    visibility: hidden;
}

.magazine-overlay.active {
    animation: slideUp 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    display: block !important;
    pointer-events: auto; /* Re-enable clicks when open */
    opacity: 1;
    visibility: visible;
}

.close-mag-btn {
    position: fixed;
    top: 25px;
    right: 25px;
    background: white;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 50px; /* Circular looks more premium for a close button */
    padding: 10px 20px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 2px;
    cursor: pointer;
    z-index: 10001; /* Must be higher than everything else */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    
    /* Ensuring no parent 'transform' stops it */
    transform: translateZ(0);
    color: black;
}

.magazine-container {
    max-width: 1000px;
    margin: 0 auto;
}

.mag-page { margin-bottom: 150px; transition: opacity 0.8s ease, transform 0.8s ease; }

.cover-main-title{
    letter-spacing: -0.02em;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    text-align: center;
    margin-bottom: 50px;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* MASONRY LAYOUT — each photo keeps its natural aspect ratio (no forced
   cropping), so portrait and landscape prenup shots sit side by side
   without any manual "tall" tagging. Scales cleanly from 5 photos to 45+. */
.prenup-grid {
    column-count: 3;
    column-gap: 20px;
}

.prenup-grid .grid-item {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(168, 90, 106, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.prenup-grid .grid-item:hover {
    box-shadow: 0 14px 34px var(--accent-glow-soft, rgba(201, 123, 138, 0.28));
    transform: translateY(-3px);
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.prenup-grid .grid-item:hover img {
    transform: scale(1.04);
}

@media (max-width: 1024px) and (min-width: 769px) {
    .prenup-grid { column-count: 2; }
}

/* --- Single-photo viewer (opens when tapping any Feature Gallery photo) --- */
.fg-viewer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(20, 12, 14, 0.94);
    align-items: center;
    justify-content: center;
}

.fg-viewer.active { display: flex; }

.fg-viewer img {
    max-width: 88vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    user-select: none;
    -webkit-user-drag: none;
}

.fg-viewer-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.85;
    z-index: 2;
}

.fg-viewer-close:hover { opacity: 1; }

.fg-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.fg-nav:hover { background: rgba(255,255,255,0.25); }
.fg-prev { left: 16px; }
.fg-next { right: 16px; }

.fg-viewer-counter {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .fg-viewer img { max-width: 94vw; max-height: 76vh; }
    .fg-nav { width: 40px; height: 40px; font-size: 1.3rem; }
    .fg-prev { left: 8px; }
    .fg-next { right: 8px; }
}

.editorial-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 5vw, 60px);
    align-items: center;
}

.details-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bible-verse {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 2.2rem);
    line-height: 1.5;
    color: #333;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
}

.verse-column {
    position: relative;
    padding-top: 40px;
    border-top: 2px solid rgba(201, 123, 138, 0.25);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 180px;
}

.verse-quote-mark {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    line-height: 0.6;
    margin-bottom: 10px;
    color: var(--accent, #C97B8A);
    font-weight: 700;
    opacity: 0.85;
}

.editorial-dropcap {
    /* was display:block, which pushes the whole first line ("o our
       dearest...") down onto its own row on narrow/mobile widths.
       float:left is what .pov-dropcap already uses for the "I" / "S"
       drop caps, which is why those sit correctly beside their text —
       matching that pattern here so "T" sits beside "o" as intended. */
    float: left;
    font-family: 'Playfair Display', serif;
    font-size: clamp(4rem, 7vw, 8rem);
    line-height: 0.8;
    margin-right: 12px;
    margin-top: 4px;
    color: var(--accent, #C97B8A);
    font-weight: 400;
    opacity: 0.85;
}

.verse-ref {
    display: block;
    margin-top: 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #bbb;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}


/* --- Magazine Enhancements --- */
.mag-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
    margin: 80px 0;
}

/* Entourage Layout */
.entourage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center;
    margin-top: 40px;
}

.entourage-column h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent-dark); /* Gold Accent */
    margin-bottom: 15px;
}

.entourage-column p, .entourage-column li {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    list-style: none;
    margin-bottom: 5px;
}

/* Dress Code Swatches */
.swatch-container {
    display: flex;
    gap: 14px;
    margin-top: 18px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.swatch-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.swatch {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    cursor: default;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.swatch:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.swatch-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    color: #999;
    text-align: center;
}

/* Gift Registry & QR Section */
.gift-registry-page {
    padding: 20px 0;
}

.gift-registry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 6vw, 80px);
    align-items: start;
}

.gift-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #C97B8A;
    margin-bottom: 12px;
}

.gift-intro {
    font-family: 'Playfair Display', serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 24px;
}

/* Bank Accounts */
.bank-accounts {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bank-entry {
    padding: 14px 0;
}

.bank-entry.bdo-second {
    padding-top: 8px;
}

.bank-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 6px;
}

.bank-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.bank-number {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: #333;
    letter-spacing: 0.5px;
}

.bank-name {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: #888;
    letter-spacing: 0.5px;
}

.bank-divider {
    height: 1px;
    background: rgba(0,0,0,0.07);
    margin: 4px 0;
}

.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid rgba(201, 123, 138, 0.4);
    color: #C97B8A;
    border-radius: 20px;
    padding: 4px 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.copy-btn:hover {
    background: rgba(201, 123, 138, 0.1);
    border-color: #C97B8A;
}

.copy-btn.copied {
    background: rgba(173, 194, 162, 0.2);
    border-color: #ADC2A2;
    color: #7a9e7a;
}

/* QR block: center title, copy, and code both on desktop and mobile */
.qr-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* QR Code Image + Lightbox */
.qr-image-wrap {
    display: inline-block;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    border: 1.5px solid rgba(0,0,0,0.08);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 160px;
    height: 160px;
    padding: 0;
    background: none;
    margin: 0 auto;
    /* button reset */
    -webkit-appearance: none;
    appearance: none;
}

.qr-image-wrap:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}

.qr-img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
}

.qr-zoom-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.qr-image-wrap:hover .qr-zoom-hint {
    opacity: 1;
}

/* QR Lightbox Modal */
.qr-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    padding: 20px;
}

.qr-modal.active {
    display: flex;
}

.qr-modal-inner {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 20px;
    position: relative;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: qrModalIn 0.25s ease;
}

@keyframes qrModalIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

.qr-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    color: #aaa;
    line-height: 1;
    padding: 4px 8px;
    transition: color 0.2s;
}

.qr-modal-close:hover { color: #333; }

.qr-modal-img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 0 auto 14px;
}

.qr-modal-caption {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #aaa;
    text-transform: uppercase;
}

/* QR Placeholder (shown when no image yet) */
.qr-placeholder {
    border: 1.5px dashed rgba(0,0,0,0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 160px;
    background: rgba(0,0,0,0.02);
}

/* FAQ Accordion */
.faq-container {
    max-width: 700px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 20px 0;
}

.faq-item summary {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    list-style: none;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
}

.faq-item summary::after {
    content: '+';
    color: var(--accent-dark);
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin-top: 15px;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #666;
}

/* --- Phase 1: Back Cover Layout --- */
.back-cover {
    text-align: center;
    padding: 100px 20px;
    position: relative;
}

.back-subtitle {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 50px;
}

/* The Boarding Pass Card */
.boarding-pass-card {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.pass-left {
    flex: 2;
    padding: 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.pass-right {
    flex: 1;
    background: var(--bg-light);
    border-left: 2px dashed rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pass-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: #999;
    margin-top: 10px;
}

.pass-value {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.gold-text { color: var(--accent-dark); }

.confirm-btn {
    background: var(--bg-darkest);
    color: #fff;
    border: none;
    padding: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.confirm-btn:hover {
    background: var(--accent-dark);
    transform: scale(1.05);
}

.mag-final-footer {
    margin-top: 80px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: #aaa;
}


/* ==========================================================================
   13. CUSTOMS & IMMIGRATION (RSVP BOARDING PASS)
   ========================================================================== */

   
.rsvp-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark-2);
    padding: 80px 20px;
    position: relative;
}

/* Center the main header elements */
.rsvp-section .container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers children horizontally */
    text-align: center;    /* Centers text inside the children */
    width: 100%;
}

/* Container for the guest's single pass. (Used to switch to a 2-column
   grid on desktop for showing groupmates side-by-side — no longer
   needed now that a login only ever shows one guest's own pass, so it
   stays a single centered column at every width.) */
.passes-container {
    width: 100%;
    max-width: 500px; /* Mobile Default */
    margin: 30px auto 0;
    display: grid;
    grid-template-columns: 1fr; /* Always 1 column */
    gap: 25px;
}

/* Base Boarding Pass Style (Enhanced) */
.boarding-pass {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* The 'Logged In' User gets a gold glow */
.boarding-pass.active-pass {
    border-color: var(--gold);
    box-shadow: 0 0 30px var(--accent-glow-soft);
}

/* Success State */
.boarding-pass.is-confirmed {
    border-color: var(--success, #00ff88);
}

.pass-footer {
    padding: 30px;
    background: rgba(255, 255, 255, 0.02);
}

/* Buttons for RSVP */
.btn-group {
    display: flex;
    gap: 10px;
}

.pass-header {
    background: var(--accent-bg);
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--accent-border);
}

.airline-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--gold, var(--accent));
}

.flight-class {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: #fff;
    opacity: 0.8;
}

.pass-content {
    padding: 30px;
}

.flight-route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.station {
    display: flex;
    flex-direction: column;
}

.city-code {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    color: #fff;
    line-height: 1;
}

.city-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    margin-top: 5px;
}

.flight-icon {
    opacity: 0.8;
    font-size: 1.5rem;
    color: var(--gold, var(--accent));
    filter: drop-shadow(0 0 8px var(--accent-border-strong));
    animation: planeFly 3s ease-in-out infinite;
}

@keyframes planeFly {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.flight-meta {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap; /* Wraps gracefully on very thin phones */
}

.meta-item {
    display: flex;
    flex-direction: column;
    flex: 1; /* Allows them to grow equally */
    min-width: 80px; /* Prevents them from getting too squished */
}

.meta-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.meta-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.pass-divider {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dotted-line {
    width: 100%;
    border-top: 2px dotted rgba(255, 255, 255, 0.2);
}

.notch {
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--bg-dark-2); /* This must match the section background exactly */
    border-radius: 50%;
    z-index: 2;
}

.notch.left { 
    left: -13px; 
    box-shadow: inset -5px 0 10px rgba(0,0,0,0.5); /* Adds depth to the cut */
}

.notch.right { 
    right: -13px; 
    box-shadow: inset 5px 0 10px rgba(0,0,0,0.5); 
}

.pass-form {
    padding: 30px;
}

.form-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 400;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.form-group input, 
.form-group select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.form-group input:focus, 
.form-group select:focus {
    outline: none;
    border-color: var(--gold, var(--accent));
    background: rgba(255, 255, 255, 0.08);
}

.form-group input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}


.form-group textarea{
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.form-group textarea:focus{
    outline: none;
    border-color: var(--gold, var(--accent));
    background: rgba(255, 255, 255, 0.08);
}

.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.2);
}


.submit-btn {
    flex: 1;
    background: var(--gold);
    color: #000;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn.decline {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
}

.submit-btn:hover {
    background: #fff;
    transform: scale(1.02);
    box-shadow: 0 10px 20px var(--accent-glow);
}

/* Add this to your CSS */
.pass-footer .btn-group {
    display: flex;
    gap: 12px;
}

.btn-confirm, .btn-decline {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-confirm {
    background: var(--gold, var(--accent));
    color: #000;
}

.btn-decline {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-confirm:hover {
    background: #fff;
    transform: translateY(-2px);
}

.status-confirmed {
    color: var(--success, #00ff88);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.loading-status {
    color: var(--gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-style: italic;
    text-align: center;
}

.btn-edit-tiny {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.5rem; /* Keep it very small */
    letter-spacing: 1px;
    padding: 4px 8px;
    margin-top: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    border-radius: 2px;
}

.btn-edit-tiny:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}

/* Center it within the footer if needed */
.pass-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Styling for the custom proxy/notes area */
.manifest-note-container {
    margin: 15px 0;
    width: 100%;
    text-align: left; /* Aligns label to the left for a cleaner look */
}

.manifest-label {
    font-size: 0.6rem;
    color: var(--accent-light); /* Subtle gold */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 8px;
    padding-left: 2px;
}

.manifest-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05); /* Very subtle glass effect */
    border: 1px solid var(--accent-border);
    color: #fff;
    padding: 12px;
    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    resize: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Prevents overflow */
}

.manifest-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-border-strong);
    box-shadow: 0 0 10px var(--accent-bg);
}

.manifest-textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
    font-size: 0.75rem;
}

/* Adjusting the button group to sit nicely below the text area */
.btn-group {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}








/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.experience-footer p {
    color: rgba(255, 255, 255, 0.6); /* Increase from 0.4 to 0.6 */
    letter-spacing: 3px;
}

.site-signature {
    padding: 80px 20px 40px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.signature-divider {
    width: 50px;
    height: 1px;
    background: var(--accent-glow); /* Faint Gold Line */
    margin-bottom: 20px;
}

.footer-logo {
    width: 40px;
    height: auto;
    filter: grayscale(1) brightness(2); /* Makes it white/silver */
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.studio-branding:hover .footer-logo {
    opacity: 1;
    filter: none; /* Shows original gold on hover */
}

.branding-text {
    margin-top: 10px;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 2px;
}

.designed-by {
    display: block;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.studio-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
}

.technical-manifest {
    font-family: 'Courier New', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.2);
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* ==========================================================================
   14. TV & ULTRA-WIDE RESOLUTIONS (1921px and up)
   ========================================================================== */
@media (min-width: 1921px) {
    html {
        font-size: 125%; 
    }
    .container, .magazine-container {
        max-width: 1400px; 
    }
}



@media (min-width: 992px) {
    .radar-timeline {
        position: relative;
        padding: 80px 0;
        display: block;
    }

    /* CONTINUOUS CENTER LINE */
    .flight-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: var(--gold);
        transform: translateX(-50%);
        z-index: 1;
    }

    .milestone {
        position: relative;
        width: 100%;
        margin-bottom: 140px;
        display: flex;
        align-items: flex-start;
        z-index: 2;
    }

    /* WIDER, UNIFORM BOXES */
    .milestone-content {
        flex: 0 0 100%; /* Increased width for a more substantial look */
        max-width: 650px; /* Allow it to scale beautifully on ultra-wide */
        margin: 0;
    }

    /* Right Side Milestones */
    .milestone:nth-child(even) {
        justify-content: flex-end;
    }
    .milestone:nth-child(even) .milestone-content {
        text-align: left;
    }

    /* Left Side Milestones */
    .milestone:nth-child(odd) {
        justify-content: flex-start;
        flex-direction: row; /* Keep structure standard */
    }
    .milestone:nth-child(odd) .milestone-content {
        text-align: right;
    }
    .milestone:nth-child(odd) .milestone-header {
        flex-direction: row-reverse;
    }

    /* FIXED RADAR NODE: Centered exactly on the line */
    .radar-node {
        position: absolute;
        left: 50%;
        top: 45px; /* Adjust this to align with your First Contact/Cruising Altitude text */
        transform: translate(0%, -50%);
        margin: 0 !important; /* Forces out any inherited margins causing the offset */
        z-index: 10;
        width: 16px;
        height: 16px;
        background: var(--bg-darkest);
        border: 2px solid var(--gold);
        border-radius: 50%;
        box-shadow: 0 0 15px var(--gold);
    }

    /* Blinking Pulse Effect - Centered with the node */
    .radar-node::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid var(--gold);
        transform: translate(0%, -50%);
        animation: radarPulse 2s infinite;
    }
}

@keyframes radarPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* ==========================================================================
   15. TABLET / MID-SIZE RESOLUTIONS (Between 601px and 1024px)
   ========================================================================== */
@media (min-width: 768px) {

    .terminal-header {
        flex-direction: row; /* Side-by-side on desktop */
    }
    
    .brand-title {
        font-size: 3rem; /* Prevents text from being too overwhelming on small screens */
    }
    
    /* Timeline Alternating Layout */
    .flight-line {
        left: 50%;
        transform: translateX(-50%);
    }

    .milestone {
        width: 50%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .milestone:nth-child(odd) {
        text-align: right;
        padding-right: 60px;
        left: 0;
    }

    .milestone:nth-child(even) {
        text-align: left;
        padding-left: 60px;
        left: 50%;
    }

    .milestone:nth-child(odd) .radar-node {
        left: auto;
        right: -7px;
    }

    .milestone:nth-child(even) .radar-node {
        left: -7px;
    }

    .milestone:nth-child(odd):hover .milestone-content {
        transform: translateX(-10px);
    }

    .milestone-photo {
        margin: 15px 0;
    }
}


@media (max-width: 768px) {
    /* 1. Forces the row to be a horizontal line instead of stacked/centered */
    .board-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important; /* Forces items to the left */
        gap: 8px;
        padding-bottom: 20px;
        width: 100%;
    }

    /* 2. Keeps the labels (TIME, GATE) locked to the left */
    .row-label {
        width: 45px;
        flex-shrink: 0;
        text-align: left;
        font-size: 0.5rem;
        opacity: 0.6;
        margin-left: -50px;
    }

    /* 3. Scales the flaps but keeps them anchored to the label */
    .flap-container {
        display: flex;
        transform: scale(0.75); /* Scaled down slightly more to ensure the long names fit */
        transform-origin: left center;
        margin-right: -80px; /* Pulls the pin closer to account for the scale gap */
        flex-shrink: 1;
    }

    /* 4. PLACING THE PIN BESIDE THE GATE NAME */
    .map-icon-link {
        position: static !important; /* Removes it from the edge and puts it in the row flow */
        display: inline-block;
        transform: scale(0.9);
        text-decoration: none;
        margin-left: 5px; /* Tiny gap between flaps and pin */
    }

    /* 5. Keeps headers left-aligned */
    .board-header-row {
        text-align: left !important;
        margin-bottom: 10px;
        font-size: 0.6rem;
    }
}


/* target mobile phones */
@media (max-width: 767px) {
    .hero-gate {
        height: 100vh;
        height: 100svh; /* Better for mobile browsers */
        background-color: var(--bg-darkest);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 6vh;
    }

    .hero-canvas img, 
    .canvas-slide img {
        /* On mobile, we force the image to height: 100% and 
           let the width overflow naturally, keeping the center 
           of the photo in the center of the phone. */
        width: 100% !important;
        height: 100% !important;
        /* 'center center' is the safest, most scalable choice for couples */
        object-fit: cover !important;
        object-position: center center !important; 
        
        position: absolute;
        top: 0;
        left: 0;
    }

    /* This adds a 'vignette' to mimic the dark cabin feel around the edges */
    .scenic-gradient-overlay {
        background: radial-gradient(circle, 
            transparent 20%, 
            rgba(0,0,0,0.4) 60%, 
            rgba(0,0,0,0.8) 100%) !important;
    }

    .hero-content-wrapper {
        gap: 15px;
    }

    .hero-top-content {
        top: 15vh;
    }

    .brand-title {
        font-size: 2.8rem !important; /* Prevents text overlap */
    }

    .departure-board {
    /* Existing styles... */
    width: 90%; /* Ensures it fits inside the window width on all phones */
    max-width: 320px; 
    padding: 1rem; /* Tightens it up for mobile */
}

    .counter-box {
    /* Smaller font for mobile so the boxes don't touch the edges */
    font-size: 1.8rem; 
}

    .flight-path-section {
        /* Make the grid lines slightly brighter on mobile */
        background-image: 
            linear-gradient(var(--accent-glow-faint) 1px, transparent 1px),
            linear-gradient(90deg, var(--accent-glow-faint) 1px, transparent 1px);
        /* Scale the grid down for smaller screens */
        background-size: 30px 30px; 
    }

    .countdown-section {
        padding: 70px 20px;
        background-image: 
            linear-gradient(var(--accent-glow-faint) 1px, transparent 1px),
            linear-gradient(90deg, var(--accent-glow-faint) 1px, transparent 1px);
        background-size: 30px 30px;
    }

    .cinema-section {
        /* 85% moves the image to the right, showing the seat and the right window */
        background-position: 90% center; 
        
        /* Ensures the height doesn't stretch the image too much */
        background-size: cover; 
        
        /* Optional: reduce padding to give the video more room */
        padding: 40px 10px;
    }

    .video-tablet {
        width: 95%;
        /* Removed scale() — causes Drive iframe overflow on mobile */
        transform: none;
        padding: 10px;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
}

.flight-path-section .container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    display: flex;        /* Add this */
    flex-direction: column; /* Add this */
    align-items: center;    /* Add this - Centers the Badge and Subtitle */
    text-align: center;     /* Add this - Centers the text inside */
}

.flight-path-section .section-badge {
    margin-left: auto;
    margin-right: auto;
    display: table; /* Ensures it stays centered as a block-level element */
}

.radar-node {
    /* Ensure the main container has a defined size and relative positioning */
    position: absolute;
    width: 14px;  /* Smaller for mobile */
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-node::after {
    content: '';
    position: absolute;
    /* This forces the pulse to anchor to the exact center of the node */
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--gold);
    
    /* CRITICAL: This matches the pulse center to the parent center */
    transform: translate(-50%, -50%);
    
    /* Make sure your animation includes the translate(-50%, -50%) */
    animation: radarPulseMobile 2s infinite;
}

@keyframes radarPulseMobile {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: translate(-50%, -50%) scale(3.5); 
        opacity: 0; 
    }
}


.magazine-overlay {
        padding: 80px 20px 40px; /* Space for the fixed Close button */
        background-color: var(--bg-light-overlay); /* Subtle paper tint */
    }

    .mag-page {
        background: rgba(255, 255, 255, 0.6); 
        padding: 40px 25px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.03); 
        margin-bottom: 100px; /* Creates the "turning page" feel */
        border: 1px solid rgba(0,0,0,0.03);
    }

    .welcome-letter {
        padding: 40px;
        margin-bottom: 80px;
        background: rgba(255, 255, 255, 0.7); /* Slightly cleaner background */
    }

    /* Fix the Welcome Note spacing & layout */
.welcome-letter .letter-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    background: var(--bg-light-overlay); /* Slight paper tint to distinguish it */
    border-radius: 15px;
}

    .letter-text {
        text-align: left; /* Centers the couple's message */
        font-size: 1.1rem;
        line-height: 1.8;
        position: relative;
        font-family: 'Playfair Display', serif;
        color: #333;
        margin-bottom: 30px; /* Space between paragraphs */
    }

    /* The Signature Spacing */
.signature {
    margin-top: 60px; /* THIS creates the clear space you asked for */
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 30px;
    text-align: left;
}

.signature p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    margin-bottom: 5px;
}

.couple-names {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
}

@media (max-width: 767px) {
    .editorial-spread {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .bible-verse {
        font-size: 1.5rem; 
        line-height: 1.5;
        text-align: left;
    }

    .verse-column {
        padding-top: 24px;
        min-height: 0;
    }

    .verse-quote-mark {
        font-size: 2.4rem;
        margin-bottom: 6px;
    }

    .verse-ref {
        margin-top: 10px;
    }

    .detail-block {
        text-align: left;
        margin-bottom: 30px;
    }

    .swatch-container {
        justify-content: flex-start;
        margin: 20px 0;
    }

    .gift-registry-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .qr-placeholder {
        max-width: 160px;
        margin: 0;
    }

    .qr-block {
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .page-title {
        font-size: 1.9rem;
        margin-bottom: 40px;
        letter-spacing: 1px;
    }
    
    .faq-item summary {
        font-size: 0.8rem;
        padding: 15px 0;
    }

    .boarding-pass-card {
        flex-direction: column;
        max-width: 100%;
    }
    
    .pass-right {
        border-left: none;
        border-top: 2px dashed rgba(0,0,0,0.1);
        padding: 30px;
    }
    
    .pass-left {
        text-align: center;
    }

    .close-mag-btn {
        top: 15px;
        right: 15px;
        padding: 8px 15px;
        font-size: 0.7rem;
    }
}

/* ==========================================================================
   16. MOBILE & SMALL SCREEN RESOLUTIONS (600px and below)
   ========================================================================== */
@media (max-width: 600px) {
    .milestone {
        padding-left: 45px; /* Tighter for small screens */
    }
    
    .passport-stamp {
        width: 50px;
        height: 50px;
        top: 10px;
        right: 10px;
    }
    
    .milestone-title {
        font-size: 1.2rem;
        padding-right: 40px; /* Leave room for the stamp */
    }

    /* Flight Details Board collapse */
    .split-flap-board {
    border-radius: 20px;
    padding: clamp(1.5rem, 5vw, 3.5rem);
    box-shadow: 
        0 40px 80px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(0,0,0,1);
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 50px auto 0;
    width: 100%;
    max-width: 950px;
    background: rgba(10, 10, 10, 0.9); /* Slight transparency to see the BG image */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border: 2px solid var(--accent-border); /* Faint gold border */
    align-self: center; /* Ensures the flex-item itself is centered */
}

    .board-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    margin: 25px 0;
}
    
    /* Ensuring Row Alignment */
.board-row {
    display: flex;
    align-items: center;
    justify-content: center; /* Keeps everything grouped in the middle */
    width: 100%;
    margin-bottom: 12px;
}

    /* Identical Headers for both Segments */
.board-header-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 30px 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: var(--gold);
    text-transform: uppercase;
}

.board-header-row::before,
.board-header-row::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
}

.map-icon-link {
    font-size: 1.2rem;
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    margin-left: 15px;
}

/* The "Radar Ping" - This makes it look clickable! */
.map-icon-link::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    animation: radar-ping 2s infinite;
    pointer-events: none;
}

@keyframes radar-ping {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

.map-icon-link:hover {
    transform: scale(1.3);
}

/* Tooltip for Desktop */
.map-icon-link:hover::before {
    content: 'VIEW MAP';
    position: absolute;
    top: -25px;
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: var(--gold);
    white-space: nowrap;
}
    
    .row-label {
    width: 80px; /* Fixed width forces the flaps to start at the exact same X-coordinate */
    text-align: right;
    margin-right: 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}

    .flap {
        width: 30px;
        height: 45px;
        font-size: 1.5rem;
        line-height: 45px;
    }
    
    .flap-space {
        width: 10px;
    }

    /* Padding scale downs for tiny screens */
    .section {
        padding: 3rem 1rem;
    }
    .pass-content, .pass-form {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    /* Add padding below the names so they don't hit the countdown box */
    h1, .hero-title { 
        margin-bottom: 30px !important;
    }
    
    /* Make sure the text on the image shrinks on tiny screens */
    .gate-info {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }

    /* Shrink the countdown box slightly so it fits beautifully */
    .departure-board {
        width: 95% !important;
        padding: 15px !important;
    }

    .flap-container {
        display: flex !important;
        flex-wrap: nowrap !important; /* Force them to stay in one line */
        justify-content: center;
        width: 100%;
    }
    .gate-container-class {
        flex-direction: column; /* Stacks Gate Label -> Tiles -> Map Button */
        gap: 15px;
    }

    /* Ensure the split-flap tiles don't shrink */
    .split-flap-wrapper { /* Replace with your tile wrapper class */
        width: 100%;
        display: flex;
        justify-content: center;
        overflow-x: auto; /* Adds a tiny bit of safety for very small phones */
    }

    /* Make the Map Button/Pin centered and prominent */
    .map-btn-class { 
        margin-top: 10px;
        order: 3; /* Ensures it stays at the bottom of the stack */
    }
}

/* ==========================================================================
   ★ AT STUDIO PATCH — All new rules. Safe to append.
   ========================================================================== */

/* ------------------------------------------------------------------
   ENTOURAGE — Desktop: per-column scroll + fade hint
   Mobile: horizontal swipe carousel
   ------------------------------------------------------------------ */
.entourage-column {
    position: relative;
}

.entourage-column ul {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-border) transparent;
    padding-right: 6px;
}
.entourage-column ul::-webkit-scrollbar { width: 3px; }
.entourage-column ul::-webkit-scrollbar-thumb {
    background: var(--accent-border);
    border-radius: 2px;
}

/* Swipe hint — hidden desktop, shown mobile */
.entourage-swipe-hint {
    display: none;
    text-align: center;
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    margin-top: 18px;
    font-family: 'Montserrat', sans-serif;
}

@media (max-width: 768px) {
    /* Horizontal swipe carousel per role group */
    .entourage-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 0 20px 16px 20px;
        scrollbar-width: none;
        align-items: flex-start;
        grid-template-columns: unset !important;
    }
    .entourage-grid::-webkit-scrollbar { display: none; }

    .entourage-column {
        flex: 0 0 78vw;
        scroll-snap-align: center;
        background: rgba(255,255,255,0.88);
        border: 1px solid rgba(0,0,0,0.07);
        border-radius: 14px;
        padding: 28px 22px;
        min-height: 200px;
    }
    .entourage-column::after { display: none; }
    .entourage-column ul {
        max-height: none;
        overflow-y: visible;
    }
    .entourage-swipe-hint { display: block; }
}

/* ------------------------------------------------------------------
   LOVE STORY PAGE
   ------------------------------------------------------------------ */

   :root {
            --accent:               #C97B8A;
            --accent-light:         #EAB8C3;
            --accent-dark:          #A85A6A;
            --accent-glow:          rgba(201,123,138,0.35);
            --accent-border:        rgba(201,123,138,0.22);
            --accent-bg:            rgba(201,123,138,0.10);
            --secondary:            #8BAF8A;
            --groom-accent:         #6B8FA8;   /* steel-blue for groom */
            --groom-accent-glow:    rgba(107,143,168,0.30);
            --groom-accent-border:  rgba(107,143,168,0.25);
            --groom-accent-bg:      rgba(107,143,168,0.08);
        }
        
 /* ── Wrapper ── */
        .dual-pov-section {
            max-width: 760px;
            margin: 0 auto;
        }
 
        /* ── Section header (same look as your other editorial pages) ── */
        .dual-pov-header {
            text-align: center;
            margin-bottom: 36px;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(0,0,0,0.08);
        }
        .editorial-tag {
            display: inline-block;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.55rem;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--accent-dark);
            border: 1px solid var(--accent-border);
            padding: 4px 14px;
            border-radius: 50px;
            margin-bottom: 14px;
        }
        .dual-pov-header h2 {
            font-family: 'Playfair Display', serif;
            font-size: 1.85rem;
            color: #1e1215;
            font-weight: 400;
            line-height: 1.25;
        }
        .dual-pov-header .story-dateline {
            display: block;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.6rem;
            letter-spacing: 3px;
            color: rgba(0,0,0,0.35);
            text-transform: uppercase;
            margin-top: 10px;
        }
 
        /* ── POV Toggle Switch ── */
        .pov-switcher {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            margin-bottom: 36px;
            background: rgba(255,255,255,0.70);
            border: 1px solid rgba(0,0,0,0.10);
            border-radius: 50px;
            padding: 5px;
            backdrop-filter: blur(8px);
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        .pov-tab {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 9px 22px;
            border-radius: 50px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.62rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
            color: rgba(0,0,0,0.40);
            border: none;
            background: transparent;
            font-weight: 500;
        }
        .pov-tab .pov-icon {
            font-size: 0.85rem;
        }
        .pov-tab.active-groom {
            background: var(--groom-accent);
            color: #fff;
            box-shadow: 0 4px 18px var(--groom-accent-glow);
        }
        .pov-tab.active-bride {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 4px 18px var(--accent-glow);
        }
 
        /* ── Story panel container ── */
        .pov-panels {
            position: relative;
        }
 
        /* ── Individual panel ── */
        .pov-panel {
            display: none;
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.45s ease, transform 0.45s ease;
        }
        .pov-panel.active {
            display: block;
            animation: panelIn 0.45s cubic-bezier(0.23,1,0.32,1) forwards;
        }
        @keyframes panelIn {
            from { opacity:0; transform: translateY(14px); }
            to   { opacity:1; transform: translateY(0); }
        }
 
        /* ── Persona badge (sits above the story text) ── */
        .persona-badge {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 28px;
            padding: 14px 20px;
            border-radius: 12px;
            border-left: 3px solid;
        }
        .persona-badge.groom-badge {
            background: var(--groom-accent-bg);
            border-left-color: var(--groom-accent);
        }
        .persona-badge.bride-badge {
            background: var(--accent-bg);
            border-left-color: var(--accent);
        }
        .persona-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }
        .persona-avatar.groom-avatar {
            background: var(--groom-accent);
            box-shadow: 0 0 12px var(--groom-accent-glow);
        }
        .persona-avatar.bride-avatar {
            background: var(--accent);
            box-shadow: 0 0 12px var(--accent-glow);
        }
        .persona-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .persona-name {
            font-family: 'Playfair Display', serif;
            font-size: 1.05rem;
            color: #1e1215;
        }
        .persona-role {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.55rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(0,0,0,0.38);
        }
 
        /* ── Story body text (same as your .story-body p) ── */
        .pov-body p {
            font-family: 'Playfair Display', serif;
            font-size: 1.02rem;
            line-height: 1.95;
            color: rgba(0,0,0,0.72);
            margin-bottom: 22px;
            text-align: left;
        }
        .pov-body p:last-child { margin-bottom: 0; }
 
        /* ── Dropcap matches your .editorial-dropcap ── */
        .pov-dropcap {
            float: left;
            font-family: 'Playfair Display', serif;
            font-size: 4.2rem;
            line-height: 0.78;
            margin-right: 8px;
            margin-top: 10px;
            font-weight: 700;
        }
        .groom-panel .pov-dropcap { color: var(--groom-accent); }
        .bride-panel  .pov-dropcap { color: var(--accent); }
 
        /* ── Divider between the two perspectives ── */
        .pov-divider {
            display: flex;
            align-items: center;
            gap: 14px;
            margin: 38px 0 32px;
            opacity: 0.45;
        }
        .pov-divider::before,
        .pov-divider::after {
            content:'';
            flex: 1;
            height: 1px;
            background: rgba(0,0,0,0.15);
        }
        .pov-divider span {
            font-size: 0.8rem;
            letter-spacing: 2px;
        }
 
        /* ── Closing quote pull-quote ── */
        .pov-closing-quote {
            border-top: 1px solid rgba(0,0,0,0.07);
            margin-top: 30px;
            padding-top: 26px;
            text-align: center;
        }
        .pov-closing-quote blockquote {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 1.08rem;
            color: rgba(0,0,0,0.55);
            line-height: 1.7;
            max-width: 560px;
            margin: 0 auto 10px;
        }
        .pov-closing-quote cite {
            font-family: 'Montserrat', sans-serif;
            font-size: 0.58rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(0,0,0,0.30);
        }
 
        /* ── Preview wrapper (not part of drop-in code) ── */
        .preview-shell {
            min-height: 100vh;
            padding: 60px 20px 80px;
            background: #f7f0ee;
        }
        .preview-note {
            text-align: center;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.58rem;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: rgba(0,0,0,0.25);
            margin-bottom: 40px;
        }

.story-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.editorial-tag {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.55rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--accent-dark);
    border: 1px solid var(--accent-border);
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.story-dateline {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 3px;
    color: rgba(0,0,0,0.35);
    text-transform: uppercase;
    margin-top: 10px;
}

.story-body p {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    line-height: 1.95;
    color: rgba(0,0,0,0.72);
    margin-bottom: 22px;
    text-align: left;
}

.story-body em {
    font-style: italic;
    color: var(--accent-dark);
}

/* ------------------------------------------------------------------
   PRENUP GALLERY — Mobile swipe carousel
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .prenup-grid {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 0 20px 16px 20px;
        scrollbar-width: none;
        grid-template-columns: unset !important;
    }
    .prenup-grid::-webkit-scrollbar { display: none; }

    .prenup-grid .grid-item {
        flex: 0 0 75vw; /* Shows a 'peek' of the next photo to encourage swiping */
        scroll-snap-align: center;
        height: auto;
        margin-bottom: 0; /* masonry margin not needed in the flex carousel */
        /* Card ratio follows each photo's own orientation instead of forcing
           every photo (portrait AND landscape) into one shape. */
        aspect-ratio: 4 / 5; /* default: portrait */
        border-radius: 8px;
        overflow: hidden;
        background: var(--bg-light, #F4F1EC); /* soft fill behind photos that don't fill the card */
    }
    /* Landscape photos get a wider, shorter card so they aren't cropped tight */
    .prenup-grid .grid-item[data-orientation="landscape"] {
        flex-basis: 82vw;
        aspect-ratio: 3 / 2;
    }
    .prenup-grid .grid-item img {
        width: 100%;
        height: 100%;
        /* Show the whole photo instead of cropping it to the card —
           tapping into the lightbox shouldn't be required just to see
           the full shot. Any leftover space is filled by the card's
           background rather than cutting the image off. */
        object-fit: contain;
    }
}
/* ==========================================================================
   ★ SAIRAN & MARIEN PATCH — Swipe hints, entourage desktop fix, bg updates
   ========================================================================== */

/* ------------------------------------------------------------------
   GALLERY SWIPE HINT — mobile only
   ------------------------------------------------------------------ */
.gallery-swipe-hint {
    display: none;
    text-align: center;
    font-size: 0.55rem;
    letter-spacing: 3px;
    color: rgb(0, 0, 0);
    text-transform: uppercase;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.gallery-tap-hint {
    display: none;
    text-align: center;
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: rgba(0, 0, 0, 0.45);
    text-transform: uppercase;
    margin-top: 14px;
    font-family: 'Montserrat', sans-serif;
}

@media (max-width: 768px) {
    .gallery-swipe-hint {
        display: block;
    }

    .gallery-tap-hint {
        display: block;
    }
}

/* ------------------------------------------------------------------
   ENTOURAGE — desktop: proper 3-col grid (was broken)
   ------------------------------------------------------------------ */
.entourage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
    width: 100%;
    margin-top: 12px;
    align-items: start;
}

.entourage-column h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin: 18px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--accent-border);
    text-align: left;
}

.entourage-column h3:first-child {
    margin-top: 0;
}

.entourage-column ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.entourage-column ul li {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    color: rgba(0,0,0,0.72);
    line-height: 1.7;
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ent-role {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 600;
}

/* ------------------------------------------------------------------
   ENTOURAGE — mobile: horizontal swipe carousel (override grid)
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .entourage-grid {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 0 20px 20px;
        scrollbar-width: none;
        align-items: flex-start;
    }
    .entourage-grid::-webkit-scrollbar { display: none; }

    .entourage-column {
        flex: 0 0 80vw;
        scroll-snap-align: center;
        background: rgba(255,255,255,0.9);
        border: 1px solid rgba(0,0,0,0.07);
        border-radius: 14px;
        padding: 24px 20px;
        min-height: 200px;
        max-height: 70vh;
        overflow-y: auto;
    }
    .entourage-column::after { display: none; }

    .entourage-column ul {
        max-height: none;
        overflow-y: visible;
    }

    .entourage-swipe-hint {
        display: block !important;
        margin-bottom: 14px;
    }

    .entourage-column ul li {
        font-size: 0.82rem;
        flex-wrap: wrap;
    }
}