/* ===================================================================
   1. FONTS & VARIABLES
   =================================================================== */
   @font-face {
    font-family: 'DarlineScript';
    src: url('/static/Fonts/WOFF/DarlineScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'DarlineScript';
    src: url('/static/Fonts/WOFF/DarlineScript-Regular.woff') format('woff'); 
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Inria Serif';
    src: url('/static/Fonts/WOFF/Inria Serif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
      font-family: 'Inria Serif';
      src: url('/static/Fonts/WOFF/Inria Serif-Bold.woff') format('woff');
      font-weight: bold;
      font-style: normal;
      font-display: swap;
  }
  
  :root {
      --font-serif: 'Inria Serif', serif;
      --font-script: 'DarlineScript', cursive; 
      --color-dusty-blue: #9aacc4;
      --color-deep-blue: #6587ab;
      --color-charcoal: #333333;
      --color-cream: #fcfcfc; 
      --color-border: #e5e5e5;
  }
  
  /* ===================================================================
     2. GLOBAL & UTILITY
     =================================================================== */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  
  body {
    font-family: var(--font-serif);
    color: var(--color-charcoal);
    /* FIX 1: Changed background to Cream. 
       Text is much easier to read on light paper than dark blue. */
    background-color: var(--color-cream);
    line-height: 1.6;
  }
  
  /* FIX 2: Added this missing container class to center your content */
  .essentials-grid {
      max-width: 800px; /* Limits width so it doesn't stretch to edges */
      margin: 60px auto 100px; /* Adds space above and below the FAQs */
      padding: 0 20px; /* Prevents text from touching mobile screen edges */
      min-height: 75vh; /* Ensures page has substance even if FAQs are closed */
  }
  
  /* ===================================================================
     3. NAVIGATION
     =================================================================== */
  /* (Kept mostly the same, just ensured background matches logic) */
  
  #navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 90px;
    padding: 0 1.5rem;
    background-color: var(--color-dusty-blue);
    transition: background-color 0.8s ease, transform 0.8s ease, padding-top 0.8s ease;
  }
  
  #navbar.scrolled {
    background-color: var(--color-dusty-blue);
  }
  
  #navbar.hide-on-scroll-down {
    transform: translateY(-100%);
  }
  
  .navbar .logo {
    max-height: 70px;
    width: auto;
  }
  
  /* --- MOBILE MENU --- */
  .nav-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--color-dusty-blue);
  }
  
  .nav-menu.is-active {
    display: flex;
  }
  
  .nav-links {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 2.5rem;
  }
  
  .navbar .nav-link {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
  }
  
  .navbar .nav-link:hover,
  .navbar .nav-link.active {
    color: #f0f0f0;
    text-underline-offset: 5px;
  }
  
  .mobile-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1002;
    width: 30px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }
  
  .hamburger-line {
    width: 30px;
    height: 3px;
    background-color: white;
    border-radius: 10px;
  }
  
  /* DESKTOP NAV BREAKPOINT */
  @media (min-width: 900px) {
    #navbar {
      justify-content: space-around;
      padding: 0;
      padding-top: 50px;
      background-color: transparent; 
    }
  
    /* Since body is cream, we need the nav to be visible before scroll.
       We force the background to be Blue on the FAQ page specifically 
       so white text pops, OR we rely on .scrolled. 
       Let's set a default background for desktop for readability on light pages. */
    #navbar {
      background-color: var(--color-dusty-blue); 
      padding-top: 0; /* Reset the luxury floating padding for this specific page style */
    }
  
    .mobile-nav-toggle { display: none; }
    
    .nav-menu {
      position: static;
      display: flex;
      width: auto;
      height: auto;
      flex-direction: row;
      background-color: transparent;
      padding-top: 0;
      z-index: auto;
      transition: none;
    }
  
    .nav-links {
      flex-direction: row;
      gap: 60px;
    }
  
    .navbar .nav-link {
      font-size: 0.9rem;
    }
  }
  
  /* DROPDOWNS */
  .nav-item-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  
  .dropdown-trigger { cursor: default; padding-bottom: 0; }
  
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f5f5f5;
    min-width: 240px;
    padding: 15px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border-top: 3px solid var(--color-deep-blue);
    border-radius: 0 0 4px 4px;
    z-index: 1100;
  }
  
  .dropdown-item {
    display: block;
    padding: 12px 25px;
    text-align: center;
    text-decoration: none;
    font-style: italic;
    font-family: var(--font-serif);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color: var(--color-charcoal);
    transition: all 0.2s ease;
  }
  
  .dropdown-item:hover {
    background-color: #f7f9fb;
    color: var(--color-deep-blue);
  }
  
  @media (min-width: 900px) {
    .nav-item-dropdown:hover .dropdown-menu {
        display: block;
        animation: fadeUp 0.3s ease;
    }
    @keyframes fadeUp {
        from { opacity: 0; transform: translate(-50%, 10px); }
        to { opacity: 1; transform: translate(-50%, 0); }
    }
  }
  
  @media (max-width: 899px) {
    .nav-item-dropdown { flex-direction: column; height: auto; }
    .dropdown-trigger { margin-bottom: 1.5rem; }
    .dropdown-menu {
        position: static;
        display: flex;
        flex-direction: column;
        transform: none;
        background-color: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        gap: 1.5rem;
    }
    .dropdown-item {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.1rem;
        padding: 0;
    }
  }
  
  /* =========================================
     FAQ ACCORDION STYLES (FIXED)
     ========================================= */
  
  .essentials-accordion .accordion-item {
    border-bottom: 1px solid #dcdcdc; /* FIX: Visible grey border */
  }
  
  .essentials-accordion .accordion-item:last-child {
    border-bottom: none;
  }
  
  .accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
  }
  
  .accordion-trigger .topic-col h3 {
      font-family: var(--font-serif);
      font-size: 1.5rem;
      color: var(--color-charcoal); /* FIX: Ensure headers are dark */
      font-weight: normal;
      margin: 0;
  }
  
  /* Accordion Icon (+ / -) */
  .accordion-icon {
    margin-left: auto;
    width: 26px;
    height: 26px;
    position: relative;
    opacity: 0.9;
  }
  
  .accordion-icon::before,
  .accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    /* FIX 3: Changed icon color to Blue so it shows on light background */
    background: var(--color-deep-blue); 
    transform-origin: center;
    border-radius: 2px;
  }
  
  .accordion-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
  .accordion-icon::after { transform: translate(-50%, -50%) rotate(-45deg); }
  
  .accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
  }
  .accordion-trigger[aria-expanded="false"] .accordion-icon {
    transform: rotate(0deg);
    transition: transform 0.25s ease;
  }
  
  /* Panel area */
  .accordion-panel {
    padding: 0 0 2rem 0;
  }
  
  /* Q/A styling */
  .qa {
    padding: 0.75rem 0;
  }
  
  .qa + .qa {
    /* FIX 4: Changed separator line to be visible on light background */
    border-top: 1px solid #eeeeee; 
    padding-top: 1.25rem;
    margin-top: 1.25rem;
  }
  
  .qa .q {
    margin: 0 0 0.4rem 0;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--color-charcoal);
  }
  
  .qa .a {
    margin: 0;
    /* FIX 5: Changed text from White to Charcoal */
    color: #555555; 
  }
  
  /* Desktop Split Layout */
  @media (min-width: 900px) {
    .accordion-trigger {
      flex-direction: row;
      align-items: baseline;
    }
  
    .accordion-trigger .topic-col {
      width: 50%;
      padding-right: 2rem;
    }
  
    /* This indents the answers to the right side */
    .accordion-panel .info-col {
      width: 70%;
      margin-left: 30%;
    }
  
    .accordion-icon { margin-left: 0; }
  }
  
  /* =========================================
     LUXURY FOOTER
     ========================================= */
  .luxury-footer {
    width: 100%;
    background-color: var(--color-dusty-blue); 
    color: #ffffff;
    padding: 100px 20px 60px; 
    text-align: center;
    position: relative;
    /* FIX: Added margin top to ensure separation from content */
    margin-top: auto; 
  }
  
  .footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  
  .footer-logo-container {
    width: 100%;
    max-width: 250px;
    margin: 0 auto 20px;
  }
  
  .footer-logo {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
  }
  
  .footer-link {
    font-family: var(--font-serif);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.15rem;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    opacity: 0.9;
  }
  
  .footer-link:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 5px;
  }
  
  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    opacity: 0.7;
  }
  
  .footer-bottom p {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    letter-spacing: 0.05rem;
    margin: 0;
  }
  
  .privacy-link-light {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    transition: opacity 0.3s;
  }
  
  @media (max-width: 768px) {
    .luxury-footer { padding: 60px 20px 40px; }
    .footer-nav { flex-direction: column; gap: 1.5rem; border: none; }
  }
  
  /* =========================================
   PRIVACY MODAL
   ========================================= */

/* FIX: Added !important to force this rule to win */
.modal-hidden { 
    display: none !important; 
}

.modal {
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.6);
}

.modal-content {
  position: relative;
  background: #fff;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 3rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  z-index: 2001;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: var(--color-charcoal);
}

.privacy-content {
  max-width: 800px; 
  text-align: left;
}

.privacy-title {
  font-size: 2rem;
  color: var(--color-dusty-blue);
  text-align: center;
  margin-bottom: 1.5rem;
  font-weight: normal;
  font-family: var(--font-script);
}

.privacy-body h4 {
  font-family: var(--font-serif);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  color: var(--color-charcoal);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.privacy-body p {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 1rem;
}

/* =========================================
   FIXED ACCORDION ICONS
   ========================================= */

/* Accordion Icon Container */
.accordion-icon {
    margin-left: auto;
    width: 26px;
    height: 26px;
    position: relative;
    opacity: 0.6; /* Made it slightly lighter so it's subtle */
    transition: transform 0.3s ease; /* Smooth spin animation */
  }
  
  .accordion-icon::before,
  .accordion-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: var(--color-deep-blue);
    transform-origin: center;
    border-radius: 2px;
    transition: transform 0.3s ease; /* Smooth morph animation */
  }
  
  /* Make it a PLUS (+) by default */
  .accordion-icon::before { 
      transform: translate(-50%, -50%) rotate(0deg); /* Horizontal Line */
  }
  .accordion-icon::after { 
      transform: translate(-50%, -50%) rotate(90deg); /* Vertical Line */
  }
  
  /* When Open: Turn the PLUS into an X (or Minus) */
  .accordion-trigger[aria-expanded="true"] .accordion-icon {
    transform: rotate(135deg); /* Rotates the whole icon to look like an X */
  }
  /* Optional: If you prefer it to turn into a Minus sign instead of an X, 
     change the 135deg above to 180deg */

     /* 2. THE STATIONERY CARD (Adds depth and "luxury" feel) */
.essentials-grid {
    max-width: 800px; 
    margin: 40px auto 80px; /* Centers the card with space around it */
    width: 90%; /* Mobile responsiveness */
}

/* 3. NEW TITLE STYLES */
.page-header {
    text-align: center;
    padding-top: 60px;
    padding-bottom: 20px;
}

.script-title {
    font-family: var(--font-script);
    font-size: 4rem; /* Nice and big */
    color: var(--color-deep-blue);
    margin: 0;
    line-height: 1.2;
}

.intro-text {
    font-family: var(--font-serif);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    color: #889eb5; /* Muted blue */
    margin-top: 10px;
}

/* Mobile Adjustments for the Card */
@media (max-width: 768px) {
    .script-title { font-size: 3rem; }
    
    .essentials-grid {
        width: 100%;
        margin: 0;
        padding: 40px 20px;
        box-shadow: none; /* On mobile, we flatten it out again to save space */
        border-radius: 0;
    }
}

/* ===================================================================
   FLORENCE MOCKUP STYLES (Add to bottom of CSS)
   =================================================================== */

/* 1. Page Wrapper & Header */
.faq-page-wrapper {
    background-color: #fdfbf9; /* Warm off-white, slightly different from cream */
    padding-bottom: 80px;
}

.faq-header {
    text-align: center;
    padding: 100px 20px 60px;
    background-image: url("{{ url_for('static', filename='Content/YourFloralImage.jpg') }}"); /* Optional: Add faint floral top if desired */
    background-size: cover;
    background-position: center top;
}

.faq-header .tiny-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 1rem;
}

.faq-header .main-title {
    font-family: 'DarlineScript', cursive;
    font-size: 4rem;
    color: var(--color-charcoal);
    font-weight: normal;
}

/* 2. Zig-Zag Section Layout */
.faq-section {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .faq-section {
        flex-direction: row;
        justify-content: space-between;
        gap: 80px; /* Space between text and image */
        padding: 80px 40px;
    }

    /* This class flips the order (Image Left, Text Right) */
    .reverse-layout {
        flex-direction: row-reverse;
    }
}

/* 3. Columns */
.faq-text-col, .faq-image-col {
    width: 100%;
}

@media (min-width: 900px) {
    .faq-text-col { width: 45%; }
    .faq-image-col { width: 45%; }
}

/* 4. Image Styling */
.vertical-img {
    width: 100%;             /* 1. Force full width of the column */
    height: 600px;           /* 2. FORCE the height (The Frame) */
    object-fit: cover;       /* 3. Crop the image to fit (The Scissors) */
    object-position: center; /* 4. Center the crop */
    display: block;          /* Removes tiny gap at bottom of images */
    border-radius: 2px;
}

/* 5. Typography */
.serif-heading {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.3;
    color: #333;
    margin-bottom: 1.5rem;
}

.body-text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
}

.script-category {
    font-family: 'DarlineScript', cursive;
    font-size: 2.5rem;
    color: #999;
    margin: 0 0 0.5rem 0;
}

.category-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #333;
    margin-bottom: 2rem;
}

/* 6. Minimal Accordion (The Florence Look) */
.clean-accordion {
    border-top: 1px solid #e0e0e0; /* Top line to start the list */
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0; /* Separator lines */
}

.accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Pushes arrow to right */
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s;
}

.accordion-trigger span {
    font-family: var(--font-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    font-weight: bold;
}

.accordion-trigger i {
    font-size: 0.8rem;
    color: #999;
    transition: transform 0.3s ease;
}

/* Active State */
.accordion-trigger.active span {
    color: var(--color-deep-blue);
}

.accordion-trigger.active i {
    transform: rotate(180deg);
    color: var(--color-deep-blue);
}

/* Panel Animation */
.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.accordion-panel p {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    padding-bottom: 20px; /* Space inside the answer */
    padding-right: 20px;
}

/* 7. Collage Style (Top Section) */
.collage-col {
    position: relative;
    padding: 20px;
}

.collage-main {
    width: 90%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}

.collage-accent {
    position: absolute;
    top: 50%;
    right: 0;
    width: 60%;
    height: 60%;
    background-color: #f0f0f0; /* Light grey box behind */
    z-index: 1;
    transform: translateY(-20%);
}

/* ===================================================================
   FLORENCE LAYOUT STYLES
   =================================================================== */

/* 1. Page Wrapper */
.faq-page-wrapper {
    background-color: #fdfbf9; /* Warm off-white paper tone */
    padding-bottom: 80px;
}

/* 2. Header */
.faq-header {
    text-align: center;
    padding: 100px 20px 60px;
}

.faq-header .tiny-label {
    display: block;
    font-family: var(--font-serif);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #888;
    margin-bottom: 1rem;
}

.faq-header .main-title {
    font-family: 'DarlineScript', cursive;
    font-size: 4rem;
    color: var(--color-charcoal);
    font-weight: normal;
}

/* 3. Zig-Zag Grid Layout */
.faq-section {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
    gap: 40px;
    align-items: center;
}

@media (min-width: 900px) {
    .faq-section {
        flex-direction: row;
        justify-content: space-between;
        gap: 80px; /* Space between text and image */
        padding: 80px 40px;
    }

    /* Flips the order for alternating rows */
    .reverse-layout {
        flex-direction: row-reverse;
    }

    .faq-text-col { width: 45%; }
    .faq-image-col { width: 45%; }
}

/* 4. Images */
.vertical-img {
    width: 100%;             /* 1. Force full width of the column */
    height: 600px;           /* 2. FORCE the height (The Frame) */
    object-fit: cover;       /* 3. Crop the image to fit (The Scissors) */
    object-position: center; /* 4. Center the crop */
    display: block;          /* Removes tiny gap at bottom of images */
    border-radius: 2px;
}

/* Collage (Intro Section) */
.collage-col { position: relative; padding: 20px; }
.collage-main {
    width: 90%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
}
.collage-accent {
    position: absolute;
    top: 50%;
    right: 0;
    width: 60%;
    height: 60%;
    background-color: #e5e5e5;
    z-index: 1;
    transform: translateY(-20%);
}

/* 5. Typography */
.serif-heading {
    font-family: var(--font-serif);
    font-size: 2rem;
    line-height: 1.3;
    color: #333;
    margin-bottom: 1.5rem;
}

.body-text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 1.8;
    color: #666;
}

.script-category {
    display: block;
    font-family: 'DarlineScript', cursive;
    font-size: 2.5rem;
    color: #999; /* Light grey script */
    margin-bottom: 0.5rem;
}

.category-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #333;
    margin-bottom: 2rem;
}

/* ===================================================================
   6. CLEAN ACCORDION (INVISIBLE WHEN CLOSED)
   =================================================================== */

.clean-accordion {
    border-top: 1px solid #e0e0e0;
}

.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.3s;
}

.accordion-trigger span {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    font-weight: bold;
}

.accordion-trigger i {
    font-size: 0.8rem;
    color: #999;
    transition: transform 0.3s ease;
}

/* Active State */
.accordion-trigger.active span { color: var(--color-deep-blue); }
.accordion-trigger.active i {
    transform: rotate(180deg);
    color: var(--color-deep-blue);
}

/* PANEL ANIMATION (THE FIX) */
.accordion-panel {
    /* 1. Start completely hidden */
    max-height: 0;
    opacity: 0; 
    overflow: hidden;
    
    /* 2. Remove padding from container to prevent "ghost" space */
    padding: 0; 
    
    /* 3. Smooth fade + slide */
    transition: max-height 0.5s ease, opacity 0.5s ease;
}

/* Open State */
.accordion-panel.open {
    opacity: 1;
}

/* Answer Text */
.accordion-panel p {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    /* Add padding here instead so it collapses correctly */
    padding: 10px 0 20px 0;
    margin: 0;
}

.vertical-img {
    width: 90%;             /* 1. Force full width of the column */
    height: 600px;           /* 2. FORCE the height (The Frame) */
    object-fit: cover;       /* 3. Crop the image to fit (The Scissors) */
    object-position: center; /* 4. Center the crop */
    display: block;          /* Removes tiny gap at bottom of images */
    border-radius: 2px;
}

.collage-main {
    width: 90%;             /* 1. Force full width of the column */
    height: 600px;           /* 2. FORCE the height (The Frame) */
    object-fit: cover;       /* 3. Crop the image to fit (The Scissors) */
    object-position: center; /* 4. Center the crop */
    display: block;          /* Removes tiny gap at bottom of images */
    border-radius: 2px;
}