/* --- Cleaned: Removed fade-section and card-group-scroll for stacked scroll effect --- */
.stacking-cards-container {
    position: relative;
    /* No fixed height for stacked scroll effect */
}

.card {
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    position: sticky;
    top: 0;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

/* --- Basic Reset & Setup --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--color-background-light);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* --- Color Variables (UPDATED) --- */
:root {
    --color-primary: #ffc107; /* Vibrant Amber */
    --color-secondary: #1e3a8a; /* Deep Indigo Blue */
    --color-text-dark: #1f2937; /* Dark Slate Gray */
    --color-text-light: #fdfdfc;
    --color-background-light: #fdfdfc;
    --color-border: #eee;
    
    /* Pastel Palette for Cards - UPDATED for better contrast/feel */
    --color-card-vision: #e0f7fa; /* Light Cyan */
    --color-card-principles: #fffbe6; /* Pale Yellow (Honey) */
    --color-card-culture: #e6ffed; /* Light Mint Green */
    --color-card-benefits: #f0f9ff; /* Very Light Sky Blue */
    --color-card-connect: #ffebee; /* Light Rose Pink */
    --color-card-commitments: #eafff3; /* Pastel Mint for Commitments */

    /* UPDATED Pastel Palette for Animated Background Shapes */
    --pastel-yellow: #fdd835;
    --pastel-pink: #f48fb1;
    --pastel-purple: #9575cd;
    --pastel-teal: #4db6ac;
    --pastel-grey: #bdbdbd;

    /* NEW GRADIENT VARIABLE - Using values directly from your image */
    --dynamic-gradient: linear-gradient(90deg, #F8BD39 0%, #FF2600 100%);
    --dynamic-gradient-hover: linear-gradient(90deg, #FF2600 0%, #F8BD39 100%); /* Reversed for hover, optional */
}

/* --- Background Shapes and Animation (UPDATED) --- */
.hex-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Set to a higher z-index (e.g., 1) to appear over the body background, 
       but below the main content z-index (e.g., 10) */
    z-index: 1; 
    
    /* FIX: This line allows mouse clicks to pass through the background layer 
       and interact with the content elements (like the form) underneath. */
    pointer-events: none; 
}
.hex, .circle { position: absolute; opacity: 0; animation: floatUp linear infinite; }
.hex { width: 80px; height: 69px; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); }
.circle { width: 25px; height: 25px; border-radius: 50%; }

/* Shape Colors (UPDATED to new variables) */
.pastel-yellow{background:var(--pastel-yellow);}
.pastel-pink{background:var(--pastel-pink);}
.pastel-purple{background:var(--pastel-purple);}
.pastel-teal{background:var(--pastel-teal);}
.pastel-grey{background:var(--pastel-grey);}

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%, 90% { opacity: 0.7; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}


/* --- Modern Nav Bar --- */
.nav-elevated {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: 1000;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0 0.5rem 0;
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90vw;
    max-width: 1200px;
    background: #fff;
    border-radius: 2.5rem;
    box-shadow: 0 2px 16px 0 rgba(80, 80, 120, 0.08);
    padding: 0.5rem 2.2rem 0.5rem 1.5rem;
    gap: 2rem;
}
.nav-logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

/* NEW STYLES for the full logo image */
.nav-logo .full-logo {
    height: 2.2rem; /* Matches the old logo's height for vertical alignment */
    width: auto;
    display: block;
}

/* Original .nav-logo svg and .nav-title styles can be removed/ignored */

.nav-logo svg {
    width: 2.2rem;
    height: 2.2rem;
    display: block;
}
.nav-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    /* color: var(--color-text-light); */
    letter-spacing: -0.5px;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
    margin-left: 2.5rem;
}
.nav-links a {
    text-decoration: none;
    color: #222;
    /* color: var(--color-text-light); */
    font-weight: 500;
    font-size: 1.08rem;
    /* transition: color 0.2s; */
    transition: all 0.2s ease-out;
    padding: 0.2rem 0.5rem;
    border-bottom: 2px solid transparent;
}
.nav-links a:hover {
    /* color: #a21caf; Keeping original hover for now, can be adjusted */
    color: transparent; /* Makes text see-through */
    background: var(--dynamic-gradient); /* Applies the gradient as the background */
    -webkit-background-clip: text; /* Clips the background to the text shape */
    background-clip: text;
    transform: translateY(-3px); /* This is the "pop up" effect */
    border-image: var(--dynamic-gradient) 1; /* Applies gradient to border-bottom */
}

/* UPDATED: Connect button with the new gradient */
.nav-btn-gradient {
    display: inline-block;
    padding: 0.7rem 2.1rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1.08rem;
    color: #fff;
    background: var(--dynamic-gradient); /* Applied new gradient */
    box-shadow: 0 2px 8px 0 rgba(160, 40, 220, 0.10); /* Keep original shadow for now, can be adjusted */
    border: none;
    outline: none;
    cursor: pointer;
    margin-left: 2.5rem;
    transition: background 0.2s, box-shadow 0.2s;
    text-decoration: none;
}
.nav-btn-gradient:hover {
    background: var(--dynamic-gradient-hover); /* Applied new hover gradient */
    box-shadow: 0 4px 16px 0 rgba(255, 70, 0, 0.25); /* Adjusted shadow to match new gradient */
}

/* --- Hero Section (ADJUSTED) --- */
.content-area {
    padding-top: 120px;
}
.hero-section {
    text-align: center;
    padding: 4rem 0 5rem 0;
    /* Adjusted radial gradient to reflect new colors, creating a warmer glow */
    background: radial-gradient(circle, var(--color-background-light) 60%, var(--color-card-principles) 120%);
}
h1 { font-size: 3.5rem; font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; margin-bottom: 1.5rem; color: var(--color-text-dark);} /* Ensure h1 has a default color for non-gradient text */

/* NEW: Styles for gradient text within h1 */
.gradient-text {
    background: var(--dynamic-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Makes the text color transparent to reveal the gradient */
}


.hero-section .subtitle { font-size: 1.2rem; color: #444; max-width: 600px; margin: 0 auto; }

/* --- Stacking Cards Effect (UPDATED BACKGROUNDS) --- */
.stacking-cards-container {
    position: relative;
    /* No fixed height for stacked scroll effect */
}

.card {
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    position: sticky;
    top: 0;
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}


/* Applying UPDATED card colors */
#vision { background-color: var(--color-card-vision); }
#principles { background-color: var(--color-card-principles); }
#culture { background-color: var(--color-card-culture); }
#commitments { background-color: var(--color-card-commitments); }
#benefits { background-color: var(--color-card-benefits); }
#connect { background-color: var(--color-card-connect); }

/* --- General Content Styles (ADJUSTED) --- */
h2 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-secondary); /* Uses the new Deep Indigo Blue */
}
.card-content {
    position: relative; 
    z-index: 10;        
    width: 100%;        
}
.card-content > p { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 2.5rem auto; text-align: center; }
.card-content ul { list-style: none; padding-left: 0; margin-top: 1rem; text-align: left; max-width: 700px; margin-left: auto; margin-right: auto; }
.card-content ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; color: #444; }
/* List marker uses new primary color */
.card-content ul li::before { content: '•'; color: var(--color-primary); font-weight: bold; display: inline-block; width: 1em; margin-left: -1.5em; }

/* --- Section Grids --- */
.vision-mission-content,
.culture-grid,
.principles-grid {
    display: grid;
    gap: 2rem;
    margin-top: 2.5rem;
}

.vision-mission-content,
.culture-grid {
    grid-template-columns: 1fr 1fr;
}

.principles-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
/* ADDED: Styling for the content paragraph inside the Commitments/Remote Workplace section */
#commitments .vision-mission-content p {
    font-size: 1.15rem; /* Increased size for the remote workplace description */
    line-height: 1.8;
}

/* ADDED: Styling for the content paragraph inside the Vision section */
#vision .vision-mission-content p {
    font-size: 1.15rem; /* Increased size for the vision description */
    line-height: 1.8;
}


/* --- UNIFIED CARD STYLES --- */
.principle-card,
.vision-mission-content > div,
.culture-grid > .culture-item {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 2rem;
    /* Subtle shadow using a blue tone to tie into the secondary color */
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- UNIFIED CARD STYLES --- */
.principle-card,
.vision-mission-content > div,
.culture-grid > .culture-item {
    background: #fff;
    border: none;
    border-radius: 16px;
    padding: 2rem;
    /* Subtle shadow using a blue tone to tie into the secondary color */
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.principle-card:hover,
.vision-mission-content > div:hover,
.culture-grid > .culture-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(30, 58, 138, 0.15);
}

.principle-card h3,
.vision-mission-content h3,
.culture-grid h3 {
    color: var(--color-text-dark);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.principle-card p,
.vision-mission-content p,
.culture-grid p {
    font-size: 0.95rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

/* --- Benefits Section (ADJUSTED) --- */
.benefits-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.5rem; }
/* Benefit tags adjusted for better contrast against the new light blue background */
.benefits-list span { 
    background: #ffffff; /* Use pure white for crisp, clear tags */
    padding: 0.6rem 1.2rem; 
    border-radius: 20px; 
    font-size: 0.95rem; 
    font-weight: 500; 
    color: var(--color-text-dark); /* Use dark text for high contrast */
    border: 1px solid rgba(0, 0, 0, 0.05); 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* Added subtle lift */
}

/* --- Connect Form (ADJUSTED) --- */
.connect-form { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; margin: 2.5rem auto 0 auto; }
.connect-form input, .connect-form textarea { padding: 0.9rem 1rem; border-radius: 8px; border: 1px solid var(--color-border); font-size: 1rem; font-family: 'DM Sans', sans-serif; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; background: #fff; }
/* Focus ring uses new primary color with stronger opacity */
.connect-form input:focus, .connect-form textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.4); }

/* .submit-btn { padding: 1rem 1.5rem; border: none; border-radius: 8px; background-color: var(--color-text-dark); color: var(--color-text-light); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; } */
/* Hover button uses new primary color */
/* .submit-btn:hover { background-color: var(--color-primary); color: var(--color-text-dark); } */
.submit-btn {
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 8px;
    background: var(--dynamic-gradient); /* <--- NEW GRADIENT */
    color: var(--color-text-light);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease; /* Animate all properties */
    box-shadow: 0 4px 16px 0 rgba(255, 70, 0, 0.25); /* Added shadow */
}

.submit-btn:hover {
    background: var(--dynamic-gradient-hover); /* <--- NEW HOVER GRADIENT */
    color: var(--color-text-light); /* Keep text light */
    box-shadow: 0 6px 20px 0 rgba(255, 70, 0, 0.35); /* Stronger shadow */
    transform: translateY(-2px); /* Slight pop up */
}
/* --- Floating Label Form Styles --- */
.form-group {
    position: relative;
}

.form-group label {
    position: absolute;
    top: 0.9rem; /* Vertically centers the label */
    left: 1rem;  /* Aligns with input padding */
    font-size: 1rem;
    color: #999;
    pointer-events: none;
    transition: all 0.2s ease-out;
}

.form-group input,
.form-group textarea {
    /* The inputs already have padding, border, etc. */
    /* We just need to ensure they are 100% width */
    width: 100%;
}

/* This is the "float" animation */
/* It triggers when the input is focused OR when it's not empty */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -0.6rem; /* Moves the label up */
    left: 0.8rem; /* Moves it slightly left */
    font-size: 0.85rem; /* Makes it smaller */
    color: var(--color-secondary); /* Uses your deep indigo color */
    
    /* Adds a white background "cutout" */
    padding: 0 0.25rem;
    background: #fff;
}
/* --- Honey Bee Animation --- */
.bee-animation { position: fixed; visibility: hidden; opacity: 0; z-index: 2000; width: 40px; height: auto; pointer-events: none; transition: top 1.5s ease-in-out, left 1.5s ease-in-out, opacity 0.5s ease-in, transform 1.5s ease-in-out; }
.bee-animation.fly { visibility: hidden; opacity: 1; }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .main-nav { display: none; }
    .header-content-wrapper, .page-wrapper { padding: 0 1rem; }
    .main-header { padding: 1rem 0; }
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.8rem; }
    
    .vision-mission-content,
    .culture-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Smooth scrolling behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Adjust this if your navbar height differs */
}

/* UPDATED: Highlight active nav link with gradient */
.nav-links a.active {
  color: transparent; /* Make text transparent to show background gradient */
  font-weight: 600;
  background: var(--dynamic-gradient); /* Apply the gradient as background */
  -webkit-background-clip: text; /* Clip background to text for gradient text effect */
  background-clip: text;
  border-bottom: 2px solid; /* Maintain border-bottom */
  border-image: var(--dynamic-gradient) 1; /* Apply gradient to border-bottom */
  transition: all 0.3s ease;
}
/* --- Light Flip Clock Card Style for Principles --- */
/* --- 3D Flip Card Style for Principles --- */

/* 1. The main card container (the "scene") */
.principle-card {
    background-color: transparent;
    /* This height is important for the card to flip correctly */
    /* Adjust as needed if your text is taller */
    min-height: 280px; 
    border: none;
    perspective: 1000px; /* Creates the 3D space */
    border-radius: 16px; /* Re-apply from unified style */
    
    /* We keep the original unified shadow here */
    box-shadow: 0 8px 30px rgba(30, 58, 138, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* 3. The inner element that actually flips */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px; /* Match the parent */
    /* transition: transform 0.6s; */
    transform-style: preserve-3d;
    /* animation: autoFlip 12s infinite linear; 12s total duration */
    animation: autoFlip 15s infinite linear; /* Faster flip for better engagement */
}


/* 5. Front and Back faces: basic setup */
.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Hides the back of the card */
    backface-visibility: hidden;

    /* Re-apply styles from the previous fix */
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 16px; /* Needs to be on the faces */
    overflow: hidden; /* Clips the content */
    
    /* Use flex to style the content */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 6. Back face: pre-rotated */
.card-back {
    background: #fdfdfd; /* Slightly different background */
    transform: rotateX(180deg);
}

/* 7. Re-apply our "flip clock" h3 styles to BOTH faces */
.card-front h3,
.card-back h3 {
    color: var(--color-text-dark);
    font-size: 2.0rem; 
    font-weight: 700;
    margin: 0; 
    padding: 1.5rem 1.5rem 0 1.5rem; /* Padding only on top/sides */
    line-height: 1.2;
    text-align: left; /* Keep text left-aligned */
}

/* 8. Re-apply our "flip clock" p styles to BOTH faces */
.card-front p,
.card-back p {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0; 
    padding: 1.5rem; /* Padding on all sides */
    text-align: left; /* Keep text left-aligned */
    
    /* This re-adds the horizontal "flip" line */
    border-top: 2px solid var(--color-border);
}
/* --- Automatic Card Flip Animation --- */
@keyframes autoFlip {
  0%, 40% { /* Start and stay on the front for 40% of the time */
    transform: rotateX(0deg);
  }
  50%, 90% { /* Flip and stay on the back for 40% of the time */
    transform: rotateX(180deg);
  }
  100% { /* Flip back to the front */
    transform: rotateX(360deg);
  }
}
/* --- Staggered Animation for Principle Cards --- */
.principles-grid .principle-card:nth-child(1) .card-inner {
    animation-delay: 0s;
}
.principles-grid .principle-card:nth-child(2) .card-inner {
    animation-delay: 3s; /* <--- NEW DELAY */
}
.principles-grid .principle-card:nth-child(3) .card-inner {
    animation-delay: 6s; /* <--- NEW DELAY */
}
.principles-grid .principle-card:nth-child(4) .card-inner {
    animation-delay: 9s; /* <--- NEW DELAY */
}