/* ==========================================================================
   1. GLOBAL VARIABLES & SHARED BASE STYLES
   ========================================================================== */
body {
    margin: 0;
    padding: 4vh 5vw; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-family: 'Georgia', serif;
    position: relative;
}

/* --- Beans Page Theme Variables & Full Screen Background --- */
.beans-theme {
    background-color: #F4F4F4;
    --theme-color: #00008B;
    --border-color: #A4B0F5;
    --bg-image: url('beans.png');
    --image-filter: invert(10%) sepia(90%) saturate(6500%) hue-rotate(240deg) brightness(50%);
}

.beans-theme::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('beans_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -2; 
}

/* --- Flow Page Theme Variables & Full Screen Background --- */
.flow-theme {
    background-color: #F4F5F4;
    --theme-color: #1E4620;
    --border-color: #B8E2C2;
    --bg-image: url('flow.png');
    --image-filter: invert(21%) sepia(21%) saturate(1450%) hue-rotate(74deg) brightness(93%) contrast(92%);
}

.flow-theme::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('flow_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -2; 
}

/* --- Glow Page Theme Variables & Full Screen Background --- */
.glow-theme {
    background-color: #FDF1F2;
    --theme-color: #6B1D2F;
    --border-color: #F3BCC8;
    --bg-image: url('glow.png');
    --image-filter: invert(15%) sepia(48%) saturate(3000%) hue-rotate(330deg) brightness(85%) contrast(95%);
}

.glow-theme::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background-image: url('glow_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.5; 
    z-index: -2; 
}

/* --- About Us Page Theme Variables --- */
.about-theme {
    background-color: #F7F5FA;
    --theme-color: #32244F;
    --border-color: #C3B5E3;
}

/* --- Contact Page Theme Variables (Pastel Sand) --- */
.contact-theme {
    background-color: #F4EBD9; 
    --theme-color: #8B7355; 
    --border-color: #D2B48C; 
    --bg-image: url('contact.png');
    --image-filter: invert(45%) sepia(30%) saturate(1500%) hue-rotate(330deg) brightness(90%) contrast(85%);
}

/* ==========================================================================
   2. CARD LAYOUT MODULE
   ========================================================================== */
.card-container {
    width: 100%;
    flex: 1; 
    background-color: #FFFFFF;
    border: 2px solid var(--border-color);
    border-radius: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    padding: 30px 15px; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    box-sizing: border-box;
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
    animation: fadeIn 0.6s ease-out forwards;
}

/* --- DYNAMIC INTERIOR BACKDROP LAYERING GATES --- */

.beans-theme .card-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('beans_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.10; 
    z-index: -2; 
}

.flow-theme .card-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('flow_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.10; 
    z-index: -2; 
}

.glow-theme .card-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('glow_bg.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0.10; 
    z-index: -2; 
}

/* --- WATERMARK ICON STAMP LAYER (50% opacity, crisp color) --- */

.beans-theme .card-container::after,
.flow-theme .card-container::after,
.glow-theme .card-container::after,
.contact-theme .card-container::after {
    content: "";
    position: absolute;
    top: 10%; right: 10%; bottom: 10%; left: 10%;
    background-image: var(--bg-image);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 35%;
    opacity: 0.5; 
    z-index: -1; 
    filter: var(--image-filter);
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative; 
    z-index: 2; 
    width: 100%; 
}

.title-text {
    color: var(--theme-color);
    margin-top: 0;
    margin-bottom: 20px; 
    text-align: center;
}

.flow-theme .philosophy-text,
.glow-theme .philosophy-text,
.about-theme .philosophy-text,
.contact-theme .philosophy-text {
    color: var(--theme-color); 
}

.philosophy-text {
    color: #00008B;
    line-height: 1.6;
    font-family: 'Georgia', serif; 
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    max-width: 90%;
    margin: 0 auto; 
}

@media (min-width: 768px) {
    .philosophy-text {
        font-size: 1.725rem;
    }
}

.contact-button {
    margin-top: 30px;
    padding: 12px 30px;
    background-color: var(--theme-color);
    color: #FFFFFF;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Georgia', serif;
    font-weight: bold;
}

/* ==========================================================================
   3. NAVIGATION & ANIMATIONS
   ========================================================================== */
.nav-placeholder {
    padding-top: 2vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10; 
    pointer-events: auto;
}

.pagination-nav { 
    display: flex; 
    gap: 16px;          
    background-color: #FFFFFF; 
    padding: 10px 20px; 
    border-radius: 30px; 
    border: none;       
    outline: none;     
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.dot { 
    width: 12px; 
    height: 12px; 
    background-color: #CCCCCC; 
    border-radius: 50%; 
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active { 
    background-color: var(--theme-color); 
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   4. RESPONSIVE TEXT & DEVICE DISPLAY GATES
   ========================================================================== */
.mobile-text { display: block; }
.desktop-text { display: none !important; }

@media (min-width: 768px) {
    .desktop-text { display: block !important; }
    .mobile-text { display: none !important; }
    .card-container { padding: 50px 30px; }
}

/* ==========================================================================
   5. ABOUT PAGE ASSET ALIGNMENT OVERRIDES
   ========================================================================== */
.card-container.logical-growth {
    flex: 1;
    height: auto;
}

.content-wrapper.height-lock {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 65vh;
    justify-content: space-between;
}

.about-theme .card-container::before {
    display: none;
}

.asset-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-top: auto;
    padding-top: 20px;
    width: 100%;
}

.couple-asset {
    max-width: 120px;
    height: auto;
    object-fit: contain;
}

.beans-asset {
    max-width: 65px;
    height: auto;
    object-fit: contain;
    margin-bottom: 2px; 
}