/* Variables: Store colors here to reuse them easily throughout the file */
:root {
    --primary: #4b8a9b; /* Light blueish green #88c9d0; */
	--p2: #88c9d0;
    --2ndary: #244D57;  /* Dark Teal */
    --accent: #e67e22;  /* Professional Orange */
    --text: #333;       /* Main text color */
}

/* Global Page Behavior */
html {
    scroll-behavior: smooth; /* Smooth gliding when clicking links */
    scroll-padding-top: 100px; /* Prevents sticky headers from covering content */
}

/* Base Body Styles */
body { 
    font-family: 'Poppins', sans-serif; 
    margin: 0;             /* Removes default browser spacing */
    color: var(--text);   /* Uses the variable defined in :root */
    line-height: 1.6;      /* Increases vertical space between lines for readability */

    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Makes the body take up the full screen height */
}

/* Use Poppins for all titles to make them "pop" */
h1, h2, h3, h4, .section-title, .subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 700; /* Makes Poppins look its best */
    letter-spacing: -0.5px; /* Poppins looks great with tight spacing in headers */
}

/* Layout Wrapper: Centers content and prevents it from getting too wide */
.container { 
    max-width: 1100px; 
    margin: auto; 
    padding: 0 20px; 
}

/* 1. Freeze the navigation at the top */
.sticky-nav {
    position: sticky;
    top: 0;
    background-color: #ffffff; /* Prevents hero from showing through the nav */
    z-index: 1000;             /* Ensures it stays above the hero and grid */
    /* width: 100%; */
    flex-shrink: 0; /* Prevents the nav from squishing */
}

/* Center the logo and add top spacing */
.logo-container {
    display: flex;            /* Enables Flexbox layout */
    justify-content: center;   /* Centers the logo horizontally */
    align-items: center;       /* Centers the logo vertically (if container has height) */
    padding-top: 20px;         /* Adjust this number to add more or less space from the top */
    padding-bottom: 10px;      /* Optional: adds space between logo and the divider below */
}

/* Adjust the size of the logo image */
.nav-logo { 
    height: 60px;            /* Change this value to make it smaller (e.g., 30px) or larger */
    width: auto;             /* Keeps the image proportions so it doesn't look squished */
    transition: opacity 0.3s ease; 
}

.nav-logo:hover { 
    opacity: 0.8; 
}





/* 1. Center the links in the nav container */
.nav-links {
    display: flex;
    justify-content: center; /* Centers links horizontally */
    gap: 10px;               /* Adds space between each link */
    padding-bottom: 15px;    /* Space between links and the divider line */
	align-items: center;    /* Keeps links and button vertically aligned */
}

/* 2. Style the links to look like normal text */
.nav-links a {
    text-decoration: none;     /* Removes the underline */
    color: var(--text);        /* Uses your #333 dark grey color */
    margin: 0 15px;            /* Increased horizontal air between links */
    letter-spacing: 1px;       /* Subtle space between letters for clarity */
    text-transform: uppercase; /* Optional: adds a formal, airy feel */
    font-weight: 600;          /* Normal text weight */
    font-size: 0.85rem;
    transition: color 0.3s ease; /* Smooth color change on hover */

    
    padding: 7px 10px ;     /* Adds a clickable "cushion" around the text */
}

/* 3. Add a hover effect so users know they are clickable */
.nav-links a:hover {
     /* opacity: 0.8;     Changes to light color */
    color: var(--primary);
}

.btn-cta { 
	background: var(--accent); 
	color: #fff !important; 
	padding: 12px 12px;
	margin: 0 0 0 20px !important;
	min-width: auto;   /* This forces the button to stay wide even with short words */
	text-align: center; /* This ensures "Contact" stays centered in that wide box */
	
   	border-radius: 5px; 
	text-decoration: none; 
	display: inline-block; 
	border: none;
	/* Ensures the button text doesn't wrap to a new line */
        white-space: nowrap;
	/* Ensure the vertical alignment matches other links */
    align-self: center; 
    transition: opacity 0.3s ease;
	
}

/* 2. Hover effect: Change opacity */
.btn-cta:hover {
    opacity: 0.8;
    color: #fff !important; /* Keeps text white on hover instead of turning primary color */
}

/* Line Divider: Touches both sides of webpage */
.nav-divider {
    width: 100%;
    height: 2px;
    background-color: #eee;
    margin: 0px 0 10px 0;
}


/* Hero */
/* Update your Hero section */
.hero { 
    background: var(--primary); 
    color: #fff; 
    text-align: center; 
    
    /* This is the magic part */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Centers the text vertically */
    align-items: center;     /* Centers the text horizontally */

	flex-grow: 1;            /* Forces hero to fill every pixel left on the screen */
    min-height: auto; /* Fallback for older browsers */
    
    padding: 60px 10px;
    
    /* min-height: 100vh;       /* Forces it to take up the full screen height */
    box-sizing: border-box;
    
}


.hero h1 { 
	font-size: 2.8rem; 
	margin-bottom: 15px; 
	margin: 0 auto; 
}

.hero p { 
	font-size: 1.2rem; 
	opacity: 0.9; 
	max-width: 800px; 
	margin: auto; 
}


/* Grid & Cards */
.section-title { text-align: center; 
		margin: 40px 0 20px; 
		font-size: 2.5rem; 
}

.subtitle { text-align: center; 
	margin-bottom: 40px; 
	color: #666; 
}



.grid { 
    display: flex;             /* Changed from grid to flex */
    flex-direction: row;      /* Forces items into a line */
    flex-wrap: wrap;           /* Allows items to move to a new row */
    justify-content: center;   /* Centers the items in the bottom row */
    gap: 30px; 
    max-width: 1100px;         /* Keeps it aligned with your container */
    margin: 0 auto;            /* Centers the entire grid container */
    width: 100%
}

.card { 
    background: #fff; 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    text-align: center; 
    transition: 0.3s;
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    box-sizing: border-box;

    /* --- THE FIX: Forces 3 in a row --- */
    /* 33.3% minus the gaps */
    flex: 0 1 calc(33.333% - 20px); 
    min-width: 280px; /* Ensures they stack on small mobile screens */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card h3 { 
    color: var(--accent); 
    margin-bottom: 15px; 
}

/* Full-width light grey background for the Process Section */
.process-bg-wrapper {
    background-color: #f9f9f9; /* Matches your leadership team background */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 40px 0 80px; /* Adds breathing room at top and bottom */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}




/* --- UPDATED: Fixed width for 3-per-row logic --- */
.member { 
    cursor: pointer; 
    /* This calculation accounts for the 30px gaps to fit exactly 3 items */
    flex: 0 1 calc(32% - 10px); 
    min-width: 250px;          /* Prevents them from getting too skinny */
    
   /*
	 /* Keep your existing styles below */
    background: #ffffff;  
    padding: 30px;  
    border-radius: 12px;  
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);  
    text-align: center;  
    transition: 0.3s;
    display: flex;  
    flex-direction: column;  
    justify-content: space-between;
    box-sizing: border-box;
	margin-bottom: 20px;
}

/* --- NEW: Tighten Name and Title Spacing --- */
.member h4 {
    margin-top: 0;
    margin-bottom: 2px; /* Moves the name very close to the title */
}

.member p {
    margin: 0;         /* Removes the big gaps between lines */
    line-height: 1.1;  /* Keeps the professional titles compact */
min-height: 1.1em;
}

/* Optional: If you want the Expertise line to be slightly lower than the 'Founding Partner' line */
.member p + p {
    margin-top: 10px; 
    font-size: 0.95rem;
    opacity: 0.7;
	min-height: 2.3em;
}

/* Apply Times New Roman to the first line of the title */
.member p:first-of-type {
    font-family: 'Inter', sans-serif;
    font-style: italic; /* Optional: Makes it look more like a formal signature/title */ 
    font-size: 0.85rem;
    font-weight: 500;
    /*color: var(--2ndary); Keeps it within your teal brand color */
    margin-bottom: 2px;
}



.member:hover { 
    background-color: #f9f9f9; 
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card h3 { 
	color: var(--accent); 
	margin-bottom: 15px; 
}


/* whowhatour Section Spacing */
#whowhatour { 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    /* Reduced margin from 150px to 60px to sit closer to the smaller hero */
    margin-top: 60px; 
    padding-bottom: 80px; 
}

/* Target only the grid inside the Who/What/Our section */
#whowhatour .grid {
    display: flex;
    justify-content: center;
    gap: 80px;        /* Large gap only for the squares */
    max-width: 1100px; 
    margin: 60px auto 0 auto; /* 40px top margin separates it from the hero text */
	width: 100%;
}



/* --- UPDATED: Fixed width for 3-per-row logic --- */
.wwo { 
    cursor: pointer; 
	transition: transform 0.2s ease, background-color 0.2s ease;
    /* This calculation accounts for the 30px gaps to fit exactly 3 items */
    flex: 0 1 200px; 
    height: 170px;          /* Prevents them from getting too skinny */
    
   /* THE SQUARE FIX */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers text vertically */
    align-items: center;     /* Centers text horizontally */
    
    /* Colors & Styling */
    background: #ffffff; 
    color: #ffffff;
    padding: 20px; 
    border-radius: 20px; /* Changed from 12px to 0 for a sharp "square" look */
    box-shadow: 10px 10px rgba(0,0,0,0.4); 
    text-align: center; 
    box-sizing: border-box;
	
}


/* --- NEW: Tighten Name and Title Spacing --- */
/* Target the text inside the home page squares */
.wwo h4 {
    font-size: 1.2rem;       /* Increase this (e.g., 1.8rem) for even bigger text */
    text-transform: uppercase; /* Optional: Makes it look more like a formal button */
    letter-spacing: 1px;     /* Adds "air" between letters for clarity */
    margin: 0;               /* Removes default browser spacing */
    color: var(--2ndary);          /* Ensures it stays white against the primary color */
    line-height: 1.2;
    text-align: center;
}

.wwo p {
    margin: 0;         /* Removes the big gaps between lines */
    line-height: 1.1;  /* Keeps the professional titles compact */
	min-height: 1.1em;
}

/* Optional: If you want the Expertise line to be slightly lower than the 'Founding Partner' line */
.wwo p + p {
    margin-top: 10px; 
    font-size: 0.95rem;
    opacity: 0.7;
	min-height: 2.3em;
	color: var(--2ndary);
}

/* Apply Times New Roman to the first line of the title */
.wwo p:first-of-type {
    font-family: 'Inter', sans-serif;
    font-style: italic; /* Optional: Makes it look more like a formal signature/title */ 
    font-size: 0.85rem;
    font-weight: 500;
    /*color: var(--2ndary); Keeps it within your teal brand color */
    margin-bottom: 2px;
}



.wwo:hover { 
    background-color: var(--2ndary); 
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.wwo:hover h4, 
.wwo:hover p {
    color: #ffffff !important;
}

 
/* Specifically targeting the "MEET OUR TEAM" heading */
.leadership-section .subtitle {
    font-size: 2.5rem;   /* Increase this number to make it bigger, decrease for smaller */
    font-weight: 700;    /* Optional: Makes the font bolder */
    margin-top: 5px;    /* Adds some breathing room above the title */
    margin-bottom: 5px; /* Space between this title and the "100+ years" subtitle */
	color: var(--2ndary)
}

/* Optional: If you want to change the "100+ Years" caption size too */
.subtitle-caption {
    font-size: 1.1rem;   
    font-style: italic;
    color: var(--primary);
    text-align: center;

}
/* Team Section Spacing */
#team { flex-grow: 1; 
    display: flex;
    flex-direction: column;
    margin: 0; /* Ensures no white space above or below */
}
/* 3. THE TEAM PAGE (The clean, standard cards) */
#team .grid {
    gap: 30px;            /* Tighter space for professional headshots */
    margin-top: 40px;
    max-width: 1100px;
}


/* Full-width light grey background */
.team-bg-wrapper {
   	background-color: #f9f9f9;
    width: 100%; /* Changed from 100vw to 100% since it's no longer nested */
    padding: 60px 0; /* Adjust this number to control top/bottom internal air */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    
    /* This ensures it touches the footer and nav exactly */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
	margin: 0;
}


/* --- REVISED TRANSPARENT MODAL --- */
/* Shared Modal Overlay */
.modal {
    display: none; 
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50); /* Darkened background */
    backdrop-filter: blur(40px); /* Blur effect for site background */
}

/* --- B3 MODAL (Home Page) --- */
#b3Modal .modal-content {
    background-color: rgba(255, 255, 255, 0); /* Transparent white box */
    backdrop-filter: blur(1px); /* Frosted glass effect for the box itself */
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Thin border to define edges */
    margin: 10% auto;
    padding: 40px;
    border-radius: 12px;
    width: 80%;
    max-width: 600px;
    position: relative;
    color: #ffffff; /* Text color changed to white for readability on dark bkg */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

#b3Name {
    text-align: center;
    width: 100%;
    color: #ffffff;      /* Forces the font color to white */
    margin-bottom: 10px;
    font-size: 2rem;     /* Optional: makes the header stand out more */
}

#b3description {
    text-align: center;
}

/* --- BIO MODAL (Team Page) --- */
#bioModal .modal-content {
    background-color: #151922; /* Transparent white box rgba(255, 255, 255, 0.15); */
    backdrop-filter: blur(15px); /* Frosted glass effect for the box itself */
    
    border: 1px solid rgba(255, 255, 255, 0.2); /* Thin border to define edges */
    margin: 10% auto;
    padding: 40px;
    border-radius: 12px;
    width: 80%;
    max-width: 600px;
    position: relative;
    color: #ffffff; /* Text color changed to white for readability on dark bkg */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

#bioName {
    color: var(--primary);               /* Brand color for names */
    font-size: 1.8rem;
    margin-bottom: 0;
}

#bioTitle {
    font-style: italic;
    opacity: 0.8;
    margin-top: 5px;
}
.modal-content hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 20px 0; }




.close-btn {
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    color: #ffffff;
    transition: 0.2s;
}

.close-btn:hover { color: var(--accent); }

/* Contact Form */
#contact { 
    margin-bottom: 0; /* Remove the gap */
    flex-grow: 1;     /* Tells the section to grow to the footer */
    display: flex;
    flex-direction: column;
}

/* 1. Ensure the container inside the wrapper stays wide */
.contact-bg-wrapper .container {
    width: 100%;
    max-width: 1100px; /* Matches your other sections */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the title and form */
}

.contact-form-container { 
    width: 100%;       /* Forces it to take up the available container space */
    max-width: 1000px;  /* Keeps it at a professional, readable width */
    margin: 10px auto; /* Centers it horizontally */
    background: #fff; 
    padding: 30px;     /* Increased padding for a more premium feel */
    border-radius: 5px; 
    box-shadow: 0 30px 30px rgba(0,0,0,0.05); 
    box-sizing: border-box; /* Vital: prevents padding from adding to the width */
}

.contact-bg-wrapper {
    background-color: #f9f9f9;
    width: 100%;       /* Changed from 100vw */
    padding: 20px 0;   
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    
    /* ADD THESE FOR THE FOOTER TOUCH */
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;      /* This is the magic that fills the gap */
    margin: 0;
}

/* 3. Ensure the Submit button doesn't look tiny on mobile 
*/
.contact-form-container button.btn-cta {
    width: 100%;       /* Default to full width on small screens */
    max-width: 250px;  /* But cap it so it's not giant on desktop */
    margin: 20px auto 0; /* Centers the button under the textarea */
    display: block;    /* Required for auto-margins to work */
    cursor: pointer;
}

.form-group { 
	display: flex; 
	gap: 15px; 
	margin-bottom: 15px; 
	width: 100%;
}

input, textarea { 
	width: 100%; 
	padding: 12px; 
	border: 1px solid #ddd; 
	border-radius: 5px; 
	font-family: inherit; 
	margin-bottom: 10px; 

	box-sizing: border-box;
	/* --- ADD THESE TWO LINES --- */
    font-weight: 400;      /* Makes the text bold */
    color: black;  /* Optional: Using your teal color makes bold text look sharper */

}
/* Specific adjustment for the Contact Title */
#contact .section-title {
    font-family: 'Inter', sans-serif; /* Forces it to match the rest of the site */
    font-size: 2.5rem;               /* Reduced from 2.5rem to look more balanced */
    font-weight: 700;
    /* letter-spacing: 1px; */
    /* text-transform: uppercase; */
    margin-bottom: 10px;             /* Space between title and the white form box */
    color: var(--2ndary);            /* Uses your Dark Teal for a professional look */
}

/* Target the submit button specifically */
.contact-form-container button.btn-cta {
    font-size: 1.1rem;       /* Makes the text larger */
    font-weight: 700;        /* Makes the text bold (Poppins looks great at 700) */
    text-transform: uppercase; /* Keeps it professional and consistent with nav */
    letter-spacing: 0.5px;     /* Adds a bit of "air" between the letters */
    padding: 10px 15px;      /* Increases the button height for a better click area */
    transition: transform 0.2s ease; /* Smooth "pop" effect on hover */
}

/* Centering the footer content */
footer {
    background-color: var(--2ndary); /* Dark grey/charcoal */
    color: #ffffff;            /* Makes the text white so it's readable */
    text-align: center;
    padding: 20px 0;
    width: 100%;

    margin-top: auto; /* Pushes the footer to the very bottom */
	flex-shrink: 0; /* Keeps the footer from collapsing */
}



@media (max-width: 600px) {
    .hero h1 {
        font-size: 2rem; /* Shrinks the headline slightly on phones */
    }
}