/* Global Reset */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/CormorantGaramond-Bold.ttf') format('truetype');
}

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

body,
html {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "Calibri", "Segoe UI", sans-serif;
  background-color: #fff;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

body {
  height: 600vh; /* Increased to allow scrolling to footer */
}

.main-container {
    position: fixed; /* Fix to viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw; /* Initial size */
    height: 22.5vw; /* 16/9 of 40vw */
    border-radius: 24px;
    overflow: hidden;
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.95); /* Stronger shadow */
    z-index: 10;
}

/* Video Background */
#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw; /* Video acts as if covering the whole page */
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    transform: translate(-50%, -50%) scale(1.1); /* Center and zoom to hide watermark */
    /* Animation removed for JS control */
}

.content-overlay {
    position: relative;
    z-index: 1; /* Ensure text is above video */
    width: 100%;
    height: 100%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text lines */
}

h1 {
  color: #5D3F7E; /* Purple */
  font-family: 'Cormorant Garamond', serif; /* Holistic font */
  font-size: clamp(1.5rem, 3.5vw, 3.5rem); /* Increased slightly for the new font */
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 12px;
  margin-top: 24px;
}

.sub-heading {
  color: #5D3F7E; /* Purple */
  font-family: 'Cormorant Garamond', serif; /* Holistic font */
  font-size: clamp(1.8rem, 4vw, 4rem); /* Increased size significantly */
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 24px;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  opacity: 0; 
  position: absolute; 
}

.scroll-indicator {
  color: #ffffff; /* White font */
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 10px; /* space between text and chevron */
  position: absolute; /* Absolute positioning */
  bottom: 60px;
  left: 60px;
  top: auto;
  margin: 0;
  
  /* Removed background styles */
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: opacity 0.3s ease;
}

.scroll-indicator svg {
  stroke: #ffb800; /* Keep the yellow accent */
  stroke-width: 3px; /* Make it thicker */
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(3px);
  }
  60% {
    transform: translateY(2px);
  }
}

.sunflower-icon {
  position: absolute; /* Absolute positioning */
  top: 60px;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  bottom: auto;
  margin: 0;
  width: 140px; /* Bigger logo */
  height: auto;
  z-index: 100; /* Ensure it stays on top of glass menu */
}

/* Responsiveness */
/* Responsiveness */
@media (max-width: 768px) {
  .content-overlay {
      padding: 30px; /* Reduced from 60px */
  }

  .floating-menu {
    top: 10px;
    height: 70px;
    width: 95%;
    min-width: 0; /* Override desktop min-width */
    padding: 0 15px;
  }
  
  .menu-logo-placeholder {
      width: 50px; /* Smaller on mobile */
      height: 50px;
  }
}

@media (max-width: 480px) {
    /* Hide some links or use hamburger? User didn't specify. 
       Let's keep it fitting by shrinking text more or hiding.
    */
  .nav-links {
    gap: 8px;
  }
  .nav-links a {
      font-size: 0.7rem;
  }
}

/* Site Header Structure */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px; /* Tall enough for the big logo */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
  z-index: 10000; /* Above fullscreen menu */
  pointer-events: none; /* Let clicks pass through the empty areas */
}

.menu-btn,
.header-cta {
  pointer-events: auto; 
  background: #9d81ba; /* Matches logo purple but softer/pastel */
  color: #ffffff; /* White font */
  padding: 10px 24px;
  border-radius: 50px;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  z-index: 10000; /* Stay above fullscreen menu */
  position: relative;
  
  display: flex;
  align-items: center;
  gap: 8px;
  
  opacity: 0; 
  /* transform: translateY(-10px); Removed per request */
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.header-cta {
    padding: 4px 24px 4px 6px; /* Reduced vertical padding to keep size, small left padding */
}

.menu-btn i {
    font-size: 1.2rem;
}

.menu-btn:hover,
.header-cta:hover {
  background: #9a84c9; /* Slightly darker on hover */
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transform: translateY(-2px);
  color: #ffffff;
}

.cta-profile-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* Specific overrides if JS controls simple opacity */
.site-header.visible .menu-btn,
.site-header.visible .header-cta {
    opacity: 1;
    transform: translateY(0);
}

.header-logo-target {
    width: 100px; 
    height: 100px;
    /* Invisible, just takes up space to balance the flexbox if needed? 
       Actually, since we justify-between, the logo will just sit in the middle absolute position anyway.
       But keeping a placeholder helps visual balance if we used space-between.
       However, the logo is absolute. So we rely on space-between pushing items to edges.
       The center is empty.
    */
    visibility: hidden;
}

/* Ensure Logo is on top */
/* Ensure Logo is on top */
.sunflower-icon {
    position: fixed; /* Fixed to viewport */
    top: 50%; /* Start Centered */
    left: 50%;
    transform: translate(-50%, -50%); /* Centered */
    width: 140px;
    height: auto;
    z-index: 20000; /* Highest priority */
    pointer-events: none; /* Let clicks pass through logo */
    transform-origin: center center;
}

/* Fullscreen Menu Overlay */
.fullscreen-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh; /* Reduced height as requested */
  background: rgba(255, 255, 255, 0.95); /* More whitish */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  z-index: 9999; /* Highest - covers everything when open */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 100px; /* Space for header to clear */
  
  transform: translateY(-100%); /* Start hidden above */
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); /* Smoother Ease In & Out */
  /* box-shadow: 0 10px 40px rgba(0,0,0,0.1); Removed per request */
  pointer-events: auto; /* Always auto layout, just hidden by position */
}

.fullscreen-menu.open {
  transform: translateY(0);
}

.fullscreen-menu.open .menu-columns {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; /* Wait for background slide */
}

.menu-columns {
  display: flex;
  gap: 10vw;
  width: 80%;
  max-width: 900px;
  justify-content: center;
  align-items: flex-start;
  
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.menu-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.menu-column h3 {
  font-family: 'Segoe UI', sans-serif;
  font-size: 1rem; /* Matched to menu btn size */
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #5D3F7E; /* Dark Purple */
  margin-bottom: 5px;
}

.menu-column a {
  font-family: "Times New Roman", Times, serif; 
  font-size: 1.4rem;
  color: #ffb800; /* Sunflower Yellow */
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}

.menu-column a:hover {
  color: #9d81ba; /* Match button/logo purple */
  transform: translateX(5px);
}

@media (max-width: 768px) {
  .menu-columns {
    flex-direction: column;
    gap: 50px;
    align-items: center;
    text-align: center;
  }
  
  .menu-column {
    align-items: center;
  }
}

/* Scroll Content Area Removed */

.main-container.faded {
    box-shadow: none; /* Remove shadow when faded */
    background: transparent;
}

/* About Section */
.about-section {
  position: fixed;
  top: 100vh; /* Starts below the viewport */
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  max-width: 85vw; /* Narrower as requested */
  text-align: center;
  z-index: 100; /* Above video */
  /* color: #D8BFD8; Removed global color transition for letter-by-letter */
  transition: opacity 0.5s ease;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 15vh; /* Added space between video and text */
  pointer-events: none; /* Pass through to video initially if needed */
}

/* Enable pointer events for interactive elements */
.about-section a, .about-section button {
    pointer-events: auto;
}

/* Target ONLY direct children paragraphs of about-section, protecting the footer */
.about-section > p {
  font-family: 'Cormorant Garamond', serif; /* Same as title */
  font-size: clamp(2rem, 4vw, 4rem); /* Increased size */
  line-height: 1.2;
  margin: 0 auto; /* Center with auto margins */
  max-width: 70%; /* Wider to reach the picture */
  color: #D8BFD8; /* Default light purple */
  font-weight: 600; /* Match title weight? */
}

/* Character Spans */
.about-char {
    color: #D8BFD8;
    transition: color 0.1s ease;
}

.about-char.revealed {
    color: #5D3F7E; /* Dark Purple */
}

.cta-btn {
  background: transparent;
  color: #ffb800; /* Sunflower Yellow */
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: bold;
  font-size: clamp(1.5rem, 3vw, 3rem); /* Matches text size */
  margin-top: 8px;
  box-shadow: none;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif; /* Match text font style */
}

.cta-btn:hover {
  background: transparent;
  color: #e0a300;
  transform: translateY(-2px);
}

.profile-pic {
    position: relative;
    display: block; /* Ensure block-level for margin auto */
    width: 200px;
    height: auto;
    aspect-ratio: 1 / 1.5;
    object-fit: cover;
    margin: 30px auto; /* Center horizontally and add equal vertical spacing */
    border-radius: 20px;
    opacity: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    align-self: center; /* Explicit flex item centering */
}

.contact-info {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  margin-top: 8px;
  opacity: 0.9;
}

.contact-info span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.contact-info i {
  font-size: 1.2rem;
}

/* Offers Section */
.offers-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    color: #5D3F7E;
    text-align: center;
    margin-top: 120px; /* Much more space from above */
    margin-bottom: 40px;
    font-weight: 600;
}

.offers-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Responsive */
    gap: 8vw; /* Relative gap (approx 100-150px) */
    width: 100%;
    margin-top: 300px; /* Push down significantly */
    padding-bottom: 100px; /* Reduced since footer follows */
    pointer-events: auto; /* Enable hover - parent has pointer-events: none */
}

/* Scattered Layout for Desktop (3 per row, 2 rows) */
@media (min-width: 1025px) {
    /* Vertical scatter handled by JS baseOffsets */
    /* Horizontal Scatter - Reduced to prevent overlap */
    .offer-card:nth-child(1) { margin-left: 60px; }
    .offer-card:nth-child(2) { margin-left: -50px; } 
    .offer-card:nth-child(3) { margin-left: 40px; } 
    
    .offer-card:nth-child(4) { margin-left: -60px; } 
    .offer-card:nth-child(5) { margin-left: 50px; } 
    .offer-card:nth-child(6) { margin-left: -40px; }
}

.offer-card {
    position: relative;
    width: 11vw; /* 2/3 of previous 16vw */
    height: auto; 
    /* border-radius removed */
    /* overflow removed - allows content to flow */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    /* background removed */
    pointer-events: auto; /* Enable hover interactions */
}
/* Removed .offer-card.visible */

.card-image-wrapper {
    position: relative;
    width: 100%; 
    aspect-ratio: 1 / 1; /* Make it square */
    height: auto; 
    overflow: hidden;
    border-radius: 8px; /* Radius applies only to image now */
}
.card-image-wrapper img,
.card-image-wrapper video {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.7s ease;
}
.offer-card:hover .card-image-wrapper img,
.offer-card:hover .card-image-wrapper video { transform: scale(1.1); }

/* Gradient/Blur Overlay - Removed per request */
.card-image-wrapper::after {
    display: none; /* Hidden */
}

.card-content {
    position: relative;
    width: 100%; 
    height: auto; /* Adapts to content */
    /* background removed */
    z-index: 3;
    display: flex;
    flex-direction: column; /* Stack title and description vertically */
    align-items: flex-start; /* Left aligned */
    padding: 10px 0 0 0; /* Top padding small, others 0 */
    box-sizing: border-box;
    gap: 4px;
}

.card-content h3 {
    font-family: 'Cormorant Garamond', serif; /* Matches About Section */
    font-size: 1.2rem; /* Reduced size for smaller cards */
    color: #5D3F7E; /* Purple */
    text-align: left; /* Left aligned */
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: none;
    max-width: 100%;
}

/* Card Description - Hidden by default, appears on hover */
.offer-card .card-desc,
.offers-section .offer-card .card-desc,
.offers-section .offer-card .card-content .card-desc {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 1.2rem !important; /* Same size as title */
    color: #000000 !important; /* Black - forced */
    font-weight: 400 !important; /* Normal weight */
    text-align: left !important; /* Left aligned */
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 100%; /* Position below the card-content */
    left: 0;
    white-space: normal; /* Allow text to wrap */
    overflow: hidden;
    width: 100%; /* Match card width */
    max-height: 0; /* Start hidden */
    transition: opacity 0.2s ease, max-height 0.5s ease; /* Reveal animation */
}

.offer-card:hover .card-desc,
.offers-section .offer-card:hover .card-desc {
    opacity: 1;
    max-height: 100px; /* Reveal text */
    color: #000000 !important; /* Enforce black Text */
}

/* .more-btn styles removed */

/* Fix Menu Z-Index */
.main-header, header, nav, #main-nav {
    z-index: 2000 !important;
}

/* Scattered Layout for Desktop (3 per row, 2 rows) */
@media (min-width: 1025px) {
    /* Vertical scatter handled by JS baseOffsets */
    /* Horizontal Scatter - Reduced to safe zones */
    .offer-card:nth-child(1) { margin-left: 40px; }
    .offer-card:nth-child(2) { margin-left: -30px; } 
    .offer-card:nth-child(3) { margin-left: 30px; } 
    
    .offer-card:nth-child(4) { margin-left: -50px; } 
    .offer-card:nth-child(5) { margin-left: 40px; } 
    .offer-card:nth-child(6) { margin-left: -30px; }
}

@media (max-width: 600px) {
  .offer-card {
    width: 100%; /* 1 per row */
    height: auto; /* Adjust height for mobile */
  }
}

/* --- Focus Mode (Blur Effect) --- */

/* All cards are SHARP by default (no filter here) */

/* When a card IS hovered (JS adds .has-card-hover), blur cards that are NOT being hovered */
.offers-section.has-card-hover .offer-card:not(:hover) {
    filter: blur(4px) grayscale(0.3);
    opacity: 0.6;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

/* The specifically hovered card stays sharp and pops out */
.offers-section.has-card-hover .offer-card:hover {
    filter: none !important;
    opacity: 1 !important;
    z-index: 50;
    cursor: pointer;
    transform: scale(1.08);
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

/* =====================================================
   FOOTER STYLES (NEW CLEAN DESIGN)
===================================================== */
.site-footer {
    position: relative;
    width: 100%;
    margin-top: 150px;
    border-radius: 24px 24px 0 0; /* Rounded top only usually looks better for footer at bottom, but user wanted rounded card? Let's do full rounded 24px and marginBottom if needed, or just standard rounded top? User said 20px border radius earlier. Let's stick to 24px all around but attached to bottom? No, footer is usually "the end". Let's do 24px all around to match main container style. */
    border-radius: 24px;
    overflow: hidden;
    z-index: 5;
    background: #1a1a1a; /* Fallback */
    color: #ffffff;
    font-family: 'Cormorant Garamond', serif;
}

/* Reset Box Sizing & Typography for Footer */
.site-footer * {
    box-sizing: border-box;
    letter-spacing: 0 !important;
    text-align: left;
}

/* Background Video */
.footer-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Overlay */
.footer-overlay {
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.5); /* Readable tint */
    padding: 80px 5vw 40px; /* Top, Horizontal, Bottom */
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Main Container (3 Columns) */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-col {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Column 1: Brand */
.brand-col h3 {
    font-size: 2.5rem;
    color: #ffffff;
    margin: 0;
    font-weight: 600;
    line-height: 1;
}

.tagline {
    font-size: 1.1rem;
    color: #d49a00;
    margin: 0;
    font-style: italic;
}

/* Column Headers */
.footer-col h3 {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 10px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* White line */
    padding-bottom: 10px;
    display: inline-block;
    width: fit-content;
}

/* Contact List */
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-list li {
    display: flex;
    align-items: center; /* Vertically center icon and text */
    gap: 15px;
    font-size: 1.15rem;
    color: #ffffff;
}

/* Icons */
.contact-list i, 
.contact-list svg {
    color: #d49a00 !important;
    font-size: 1.3rem;
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

/* Link List (Legal) */
.link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.link-list a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    display: inline-block;
}

.link-list a:hover {
    color: #d49a00;
    transform: translateX(5px); /* Small interaction */
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 30px;
    text-align: center;
}

/* Ultra-specific override to kill the purple inheritance */
.about-section .site-footer .footer-bottom p,
.site-footer .footer-bottom p {
    font-size: 0.9rem;
    color: #ffffff !important; /* Pure white forced */
    opacity: 1 !important;
    margin: 0;
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .footer-container {
        flex-direction: column;
        gap: 50px;
    }

    .footer-col {
        align-items: center;
        text-align: center;
    }

    .footer-col h3 {
        width: auto; /* Center border line */
    }

    .contact-list li {
        justify-content: center;
    }

    .footer-overlay {
        padding: 60px 20px 30px;
    }
}

/* =====================================================
   LEGAL PAGES STYLES
===================================================== */
.legal-page {
    background-color: #f9f9f9; /* Light background for readability */
    height: auto !important; /* Allow normal scrolling */
    overflow-y: auto !important;
}

.legal-container {
    max-width: 900px;
    margin: 150px auto 100px; /* Space for fixed header */
    padding: 60px;
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    border-radius: 24px;
}

.legal-container h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    color: #5D3F7E;
    margin-top: 0;
    margin-bottom: 40px;
    text-align: left;
}

.legal-container h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: #5D3F7E;
    margin-top: 40px;
    margin-bottom: 20px;
}

.legal-container p, 
.legal-container li {
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.legal-container ul {
    margin-left: 20px;
    margin-bottom: 20px;
}

.legal-container a {
    color: #d49a00;
    text-decoration: underline;
}

.legal-container a:hover {
    color: #5D3F7E;
}

/* Footer override for legal pages to sit nicely at bottom */
.legal-page .site-footer {
    margin-top: 0;
    border-radius: 0;
    background: #5D3F7E;
}

.legal-page .footer-overlay {
    background: transparent;
}

/* =====================================================
   COOKIE BANNER STYLES
===================================================== */
.cookie-banner {
    position: fixed;
    bottom: 20px; /* Floating 20px from bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%);
    width: 90%; /* Responsive width */
    max-width: 1000px; /* Narrower than full screen */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.1); /* Full border */
    border-radius: 24px; /* Rounded corners */
    padding: 20px;
    z-index: 2147483647; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); /* Stronger shadow for floating */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cookie-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    gap: 20px;
}

.cookie-content p {
    margin: 0;
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 0.95rem;
    color: #333333;
    flex: 1;
    min-width: 300px;
}

.cookie-content a {
    color: #5D3F7E;
    text-decoration: underline;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    padding: 8px 20px;
    border-radius: 50px;
    border: none;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.cookie-btn.accept {
    background-color: #5D3F7E;
    color: #ffffff;
}

.cookie-btn.accept:hover {
    background-color: #4a3266;
    transform: translateY(-1px);
}

.cookie-btn.decline {
    background-color: transparent;
    border: 1px solid #999;
    color: #666;
}

.cookie-btn.decline:hover {
    background-color: #f0f0f0;
    color: #333;
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }
    .cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   CONTACT PAGE STYLES
===================================================== */
.contact-container {
    max-width: 800px;
    margin: 150px auto 100px;
    padding: 60px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center everything including pic */
    gap: 30px;
}

.contact-profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f9f9f9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-group label {
    font-size: 0.95rem;
    color: #5D3F7E;
    font-weight: 600;
    margin-left: 5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border-radius: 25px; /* Smoother appearance */
    border: 1px solid #ddd;
    background: #fdfdfd;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    resize: vertical;
}

.form-group select {
    width: 100%;
    padding: 15px 40px 15px 25px; /* Extra padding on right for arrow, more left padding for roundness */
    border-radius: 25px; /* Smoother appearance */
    border: 1px solid #ddd;
    background: #fdfdfd;
    font-family: inherit;
    font-size: 1rem;
    transition: all 0.3s ease;
    
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D3F7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    cursor: pointer;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #9d81ba;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(157, 129, 186, 0.1);
}

.submit-btn {
    margin-top: 10px;
    background: #5D3F7E;
    color: #fff;
    padding: 10px 24px; /* Matches header-cta 10px 24px */
    border: none;
    border-radius: 50px;
    font-size: 1rem; /* Matches header-cta 1rem */
    font-weight: 600; /* Matches header-cta 600 */
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center; /* Center button */
    min-width: auto; /* Remove large min-width */
    
    display: flex;
    align-items: center;
    gap: 8px; /* Icon gap */
}

.submit-btn:hover {
    background: #4a3266;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(93, 63, 126, 0.3);
}

/* =====================================================
   CUSTOM SELECT DROPDOWN (ROUNDED)
===================================================== */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-wrapper select {
    display: none; /* Hide native select */
}

.custom-select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 25px;
    font-size: 1rem;
    color: #333;
    background: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-select-trigger:after {
    content: '';
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D3F7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

.custom-select.open .custom-select-trigger:after {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    border: 1px solid #eee;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: #fff;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
    max-height: 300px; /* Scrollable if too long */
    overflow-y: auto;
}

/* ... existing code ... */

/* Menu Spacer for News */
.menu-spacer {
    margin-top: 20px !important;
    display: block;
}

.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.custom-option {
    position: relative;
    display: block;
    padding: 12px 25px;
    font-size: 0.95rem;
    font-weight: 400;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
}

.custom-option:hover {
    background-color: #f5f0fa; /* Light purple hover */
    color: #5D3F7E;
}

/* =====================================================
   NEWS PAGE STYLES
===================================================== */
.news-container {
    max-width: 1000px; /* Slightly narrower max width for readability */
    margin: 150px auto 100px;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-container h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    color: #5D3F7E;
    margin-bottom: 20px;
    text-align: center;
}

.news-intro {
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 1.2rem;
    color: #666;
    text-align: center;
    max-width: 700px;
    margin-bottom: 60px;
    line-height: 1.6;
}

.news-grid {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 50px;
    width: 100%;
}

.news-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: stretch;
    min-height: 300px;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(93, 63, 126, 0.15);
}

.news-image {
    flex: 0 0 45%; /* 45% width for image */
    position: relative;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-image img {
    transform: scale(1.05);
}

.news-content {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.news-date {
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 0.9rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    font-weight: 600;
}

.news-content h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem; /* Larger title */
    color: #5D3F7E;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.news-content p {
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 30px;
    flex-grow: 0; 
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-weight: 600;
    color: #d49a00;
    text-decoration: none;
    transition: gap 0.3s ease;
    width: fit-content;
}

.read-more:hover {
    gap: 12px;
    color: #b58300;
}

@media (max-width: 900px) {
    .news-card {
        flex-direction: column; /* Stack on mobile/tablet */
    }
    .news-image {
        height: 250px;
    }
    .news-content {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .news-container {
        padding: 0 20px;
        margin-top: 120px;
    }
    
    .news-container h1 {
        font-size: 2.5rem;
    }
}

/* =====================================================
   REIKI PAGE STYLES
===================================================== */
.content-container {
    max-width: 1200px;
    margin: 150px auto 100px;
    padding: 0 20px;
}

.page-intro {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 100px;
}

.page-intro h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    color: #5D3F7E;
    margin-bottom: 10px;
    line-height: 1;
}

.sub-intro {
    font-family: "Calibri", "Segoe UI", sans-serif;
    font-size: 1.5rem;
    color: #5D3F7E;
    font-weight: 300;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.intro-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #555;
}

/* Content Sections */
.content-section {
    display: flex;
    align-items: flex-start; /* Aligns content to top */
    gap: 60px;
    margin-bottom: 120px;
}

.content-section.alt-bg {
    flex-direction: row-reverse; /* Swap image/text */
}

.section-image {
    flex: 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    height: 600px; /* Fixed height for consistency */
}

.section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-text {
    flex: 1;
}

.section-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #5D3F7E;
    margin-top: 0; /* Ensure flush top alignment */
    margin-bottom: 20px;
}

.section-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #444;
    margin-bottom: 30px;
}

/* Pricing List */
.pricing-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
    background: #fdfdfd;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #eee;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 10px;
}

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

.price-title {
    font-weight: 700;
    color: #5D3F7E;
    font-size: 1.1rem;
}

.price-details {
    font-size: 0.95rem;
    color: #777;
    flex: 1;
    margin-left: 15px;
}

.price-cost {
    font-weight: 700;
    color: #d49a00;
    font-size: 1.1rem;
}

/* Aligned List for Text-Heavy Items (e.g. Abschiedsrituale) */
.aligned-list .price-item {
    align-items: flex-start; /* Align text to top */
}

.aligned-list .price-title {
    flex: 0 0 180px; /* Fixed width for alignment */
    margin-right: 20px;
}

.aligned-list .price-details {
    margin-left: 0; /* Reset margin since we use flex basis on title */
}

@media (max-width: 600px) {
    .aligned-list .price-item {
        flex-direction: column;
    }
    .aligned-list .price-title {
        flex: auto;
        margin-right: 0;
        margin-bottom: 5px;
    }
}

/* Course List */
.course-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.course-item {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border-left: 5px solid #d49a00;
}

.course-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    color: #333;
}

.course-meta {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.95rem;
    color: #555;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
}

.course-price {
    color: #5D3F7E;
    font-weight: 700;
    margin-top: 5px;
    display: block;
}

.course-item.compact {
    padding: 15px 25px;
}

/* Philosophy Section */
.wide-text {
    flex-direction: column;
    text-align: left; /* Align left to match other sections structure */
    max-width: 100%; /* Full width */
    margin: 0 auto 100px;
}

.wide-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #5D3F7E;
    text-align: center;
    align-self: center;
    margin-bottom: 40px;
}

.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
    margin-bottom: 60px;
    text-align: left;
}

.info-box {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #eee;
}

.info-box h3 {
    color: #5D3F7E;
    margin-top: 0;
}

.philosophy-box {
    background: #f4f0f8; /* Very light purple */
    padding: 60px;
    border-radius: 30px;
    position: relative;
}

.philosophy-box h3 {
    color: #5D3F7E; /* Dark Purple */
    margin-top: 0;
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    margin-bottom: 20px;
}

.philosophy-box blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    color: #5D3F7E;
    border: none;
    margin: 0 0 30px 0;
    padding: 0;
}

.philosophy-box cite {
    display: block;
    font-size: 1rem;
    margin-top: 10px;
    font-family: "Calibri", sans-serif;
    color: #888;
    font-style: normal;
}

.cta-button {
    display: inline-block;
    padding: 15px 40px;
    background: #d49a00;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: #b58300;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 154, 0, 0.3);
}

.text-link {
    color: #5D3F7E;
    font-weight: 600;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .content-section, 
    .content-section.alt-bg {
        flex-direction: column;
        gap: 40px;
    }
    
    .section-image {
        width: 100%;
        height: 300px;
    }
    
    .grid-2-col {
        grid-template-columns: 1fr;
    }
    
    .pricing-list .price-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .price-details {
        margin-left: 0;
    }
    
    .page-intro h1 {
        font-size: 3rem;
    }
}

/* =====================================================
   ABOUT ME SECTION (Kontakt) - Restored
===================================================== */
.about-me-section {
    max-width: 900px;
    margin: 80px auto 120px;
    padding: 0 20px;
}

.about-me-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5rem;
    color: #5D3F7E;
    text-align: center;
    margin-bottom: 20px;
}

.about-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 60px;
}

.bio-card {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 60px;
}

.bio-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    color: #5D3F7E;
    margin-bottom: 20px;
}

.bio-image {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.bio-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

/* Timeline Style List */
.bio-timeline {
    list-style: none;
    padding-left: 20px;
    border-left: 3px solid #f0f0f0;
    margin: 30px 0;
}

.bio-timeline li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.bio-timeline li::before {
    content: '';
    position: absolute;
    left: -26px; /* 20px padding + 3px border + some offset */
    top: 6px;
    width: 12px;
    height: 12px;
    background: #d49a00;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px #d49a00;
}

/* Values Grid */
.values-section {
    text-align: center;
    margin-top: 80px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
    text-align: left;
}

.value-card {
    background: #fdfdfd;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #eee;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: #d49a00;
}

.value-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: #d49a00; /* Gold */
    margin-bottom: 10px;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.path-clarity {
    font-weight: 700;
    color: #5D3F7E;
    display: block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.value-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .about-me-section {
        padding: 0 15px;
    }
    .bio-card {
        padding: 25px;
    }
}


/* News Section Styles */

.news-container {

    padding: 120px 5vw 60px; /* Top padding clears fixed header */

    max-width: 1400px;

    margin: 0 auto;

}



.news-intro {

    font-size: 1.2rem;

    color: #666;

    margin-bottom: 40px;

    max-width: 800px;

}



.news-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 40px;

}



.news-card {

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border: 1px solid rgba(0,0,0,0.05);

    display: flex;

    flex-direction: column;

}



.news-card:hover {

    transform: translateY(-5px);

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

}



.news-image {

    width: 100%;

    height: 240px;

    overflow: hidden;

    position: relative;

}



.news-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}



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

    transform: scale(1.05);

}



.news-content {

    padding: 24px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.news-date {

    font-size: 0.9rem;

    color: #9d81ba; /* Brand purple */

    font-weight: 600;

    margin-bottom: 8px;

    display: block;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.news-content h3 {

    font-family: 'Cormorant Garamond', serif;

    font-size: 1.8rem;

    color: #333;

    margin: 0 0 12px 0;

    line-height: 1.2;

}



.news-content p {

    font-size: 1rem;

    color: #555;

    line-height: 1.6;

    margin-bottom: 12px;

}



/* Specific styling for list-like info in paragraphs */

.news-content p strong {

    color: #333;

    display: block;

    margin-bottom: 4px;

}



@media (max-width: 768px) {

    .news-grid {

        grid-template-columns: 1fr; /* Full width on mobile */

    }

    

    .news-image {

        height: 200px;

    }

}


/* Video Loader */
#video-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    z-index: 5;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.loader-progress {
    width: 0%;
    height: 100%;
    background: #FFB800;
    border-radius: 2px;
    transition: width 0.2s linear;
}

#video-loader.loader-hidden {
    opacity: 0;
}