/* --------------------------------------------------- */
/* 1. Global Style Guide (CSS Variables) - NEW PALETTE
/* --------------------------------------------------- */
:root {
  /* New PARC Color Palette */
  --parc-navy: #27459F;
  --parc-orange: #FC9311;
  --parc-lemon-green: #ADF802;
  --parc-light-green: #BABFA5;

  /* Abstracted Variables (for easy use) */
  --parc-dark-bg: var(--parc-navy);
  --parc-light-bg: #f5f5f1; /* A very light version of the light green for body */
  --parc-primary-accent: var(--parc-orange);
  --parc-secondary-accent: var(--parc-lemon-green);
  
  --parc-dark-text: #222222;
  --parc-light-text: #f1f1f1;
  --parc-grey-text: #666666;

  /* Fonts (keeping the ones you chose) */
  --font-serif: 'Zilla Slab', serif;
  --font-sans: 'Zilla Slab', serif;
}

/* --- Navbar & Logo Sizing Control --- */

.navbar {
  /* Give the navbar a fixed, predictable height */
  height: 80px; 
  padding-top: 0;
  padding-bottom: 0;
  transition: all 0.3s ease; /* Smooth transitions for future effects */
}

.navbar-brand {
  /* This is the <a> tag wrapping the logo */
  padding: 0; /* Remove default padding */
  display: flex; /* Use Flexbox for easy alignment */
  align-items: center; /* PERFECTLY centers the logo vertically */
  height: 100%; /* Make the link as tall as the navbar */
}

.parc-logo {
  /* This is the <img> itself */
  /* Set a MAX height. It should be smaller than the navbar height for padding. */
  max-height: 50px; 
  width: auto; /* This ensures the logo maintains its aspect ratio */
}

/* --- Definitive Fix for Navbar Overlap Issue --- */

/* This targets your main navigation bar */
.navbar {
  /* This allows the z-index property to work */
  position: relative; 
  
  /* This is the key: Give it a high stacking order. 1030 is a standard
     Bootstrap value that ensures it's above almost everything else. */
  z-index: 1030;
  
  /* Make sure it has a solid background to prevent content from showing through */
  background-color: #ffffff; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Add a subtle shadow for separation */
}

/* --------------------------------------------------- */
/* 2. Base & Typography Reset
/* --------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--parc-dark-text);
  background-color: var(--parc-light-bg);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--parc-dark-text);
}

.navbar {
  background-color: transparent !important; /* Make navbar transparent */
  transition: background-color 0.3s ease-in-out;
}

.navbar-brand {
    font-family: var(--font-sans);
    font-weight: 700 !important;
    font-size: 1.5rem;
}

/* --- Hero Section with Slider (Restored Text & Button Styles) --- */

.hero {
  position: relative;
  color: white;
  text-align: center;
  height: 100vh;
  overflow: hidden;
}

/* Carousel and Sizing (No changes here, but included for completeness) */
.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hero-slider-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Overlay */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(52, 76, 115, 0.7);
  z-index: 2;
}

/* The Content Layer on top */
.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem; /* Add some padding for smaller screens */
}

/* --- FIX: Typography Sizing and Clarity --- */
.hero-content .hero-title {
  font-family: var(--font-serif); /* Restore the elegant serif font */
  font-size: 4.5rem; /* Restore the large, impactful size */
  font-weight: 700;
  color: var(--parc-light-text);
  margin-bottom: 1rem;
}

.hero-content .lead {
  font-size: 1.25rem;
  color: var(--parc-light-text);
  opacity: 0.9;
  margin-bottom: 2.5rem;
  max-width: 600px; /* Prevent subtitle from being too wide */
}

/* --- FIX: Restoring Button Backgrounds and Styles --- */
.hero-content .btn-parc-primary {
  background-color: var(--parc-primary-accent); /* Orange */
  border-color: var(--parc-primary-accent);
  color: white;
}
.hero-content .btn-parc-primary:hover {
  background-color: var(--parc-secondary-accent); /* Lemon Green */
  border-color: var(--parc-secondary-accent);
  color: white;
}

.hero-content .btn-parc-secondary {
  background-color: transparent;
  border: 2px solid var(--parc-light-text);
  color: var(--parc-light-text);
}
.hero-content .btn-parc-secondary:hover {
  background-color: var(--parc-light-text);
  color: var(--parc-dark-text);
}

/* --- Impact Hub Section --- */

.impact-section {
  padding: 5rem 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.impact-heading {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 700;
  color: var(--parc-navy);
  line-height: 1.3;
}

.impact-text {
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--parc-dark-text);
  opacity: 0.8;
  margin-top: 1.5rem;
}

.stat-block {
  background-color: var(--parc-light-bg);
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  border: 1px solid #e0e0e0;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(52, 76, 115, 0.15);
}

.stat-icon {
  max-height: 50px;
  margin-bottom: 1rem;
}

.stat-number {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--parc-primary-accent); /* Orange for the numbers */
  line-height: 1.2;
}

.stat-label {
  font-size: 1rem;
  color: var(--parc-navy);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* --- Grid Card Styles for Expertise & Stories --- */

.service-card, .case-study-card {
  height: 100%; 
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card {
  padding: 2rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-color: var(--parc-primary-accent);
}

/* --- Professional "Split Card" Design for Featured Stories (CORRECTED) --- */

.case-study-card {
  /* Main card container */
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  background-color: white; /* A fallback background */
  
  /* Use Flexbox to stack the image and content vertically */
  display: flex;
  flex-direction: column; 
  
  /* Animation */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.case-study-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(52, 76, 115, 0.2);
}

/* --- The Top (Image) Container --- */
.card-image-top {
  height: 200px; /* Give the image a consistent height */
  flex-shrink: 0; /* Prevents the image area from shrinking */
  
  /* Apply the background image using our variables */
  background-image: var(--card-bg-image);
  background-size: cover;
  background-position: var(--card-bg-position);
  
  transition: transform 0.4s ease; /* Smooth zoom animation */
}

/* The zoom effect on hover */
.case-study-card:hover .card-image-top {
  transform: scale(1.1);
}

/* --- Definitive Styling for Alternating Card Colors --- */

/* 1. This is the BASE style for ALL card bodies */
.case-study-card .card-body {
  background-color: var(--parc-navy); /* Default to navy blue */
  padding: 1.5rem;
  flex-grow: 1; 
  display: flex;
  flex-direction: column;
}

/* 2. These are the DEFAULT text colors for the navy cards */
.case-study-card .card-body h5,
.case-study-card .card-body p {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 3. This is the OVERRIDE for the EVEN cards (2nd, 4th, etc.) */
.story-item:nth-child(even) .case-study-card .card-body {
  background-color: var(--parc-lemon-green); /* Switch to orange background */
}

/* 4. This is the TEXT COLOR OVERRIDE for the EVEN cards */
.story-item:nth-child(even) .case-study-card .card-body h5,
.story-item:nth-child(even) .case-study-card .card-body p {
  color: var(--parc-dark-text); /* Switch to dark text */
  text-shadow: none; /* Remove the shadow */
}

/* Text Styling */
.case-study-card .card-body h5 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
}

.case-study-card .card-body p {
  color: #ffffff;
  font-size: 0.95rem;
  flex-grow: 1;
}
/* --------------------------------------------------- */
/* 6. Insights & Publications Section
/* --------------------------------------------------- */
#insights {
  background-color: var(--parc-dark-bg); /* Navy */
  /* Bonus: Let's add the rounded corners from the original design */
  border-radius: 20px;
  margin-left: 1rem; /* Give it a little space from the edges */
  margin-right: 1rem;
}

/* --------------------------------------------------- */
/* 7. Hover & Animation Polish
/* --------------------------------------------------- */
/* Target the columns within the Insights section */
#insights .col-md-4 {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  border-radius: 8px; /* Add a subtle radius for the hover effect */
  padding: 1.5rem 1rem;
}

#insights .col-md-4:hover {
  transform: translateY(-8px); /* Lift the card up */
  background-color: rgba(255, 255, 255, 0.05); /* Add a very subtle glow */
}

/* --------------------------------------------------- */
/* 8. Site Footer
/* --------------------------------------------------- */
.site-footer {
  background-color: #ffffff;
  padding: 4rem 0 2rem 0;
  border-top: 1px solid #e0e0e0;
  font-size: 0.95rem;
}

.footer-heading {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--parc-dark-text);
  margin-bottom: 1.5rem;
}

.footer-text {
  color: var(--parc-grey-text);
  line-height: 1.8;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a, .site-footer address a {
  text-decoration: none;
  color: var(--parc-grey-text);
  transition: color 0.3s ease;
}

.footer-links a:hover, .site-footer address a:hover {
  color: var(--parc-primary-accent); /* Orange on hover */
}

.social-icons a {
  display: inline-block;
  color: var(--parc-grey-text);
  margin-right: 1rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: var(--parc-dark-text);
  transform: translateY(-2px);
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid #e0e0e0;
  padding-top: 2rem;
  margin-top: 2rem;
  color: var(--parc-grey-text);
  font-size: 0.9rem;
}

/* Makes card links look clean */
a.card-link {
  text-decoration: none;
  color: inherit;
}

/* Style for the dynamic insight cards */
.insight-card {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  height: 100%;
}

.insight-card:hover {
  transform: translateY(-8px);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Ensure stat items don't have underlines */
.stat-item.card-link {
  text-decoration: none;
}

/* CSS for fade-in scroll animation */
.fade-in-element {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- About Us Section --- */

.about-section {
  padding: 5rem 0; /* Generous padding to give it space */
  background-color: var(--parc-light-bg); /* The soft page background */
}

.about-section h2 {
  font-size: 2.5rem; /* A strong, clear heading */
}

.about-section p {
  font-size: 1.15rem; /* Slightly larger font for readability */
  line-height: 1.8;   /* Ample space between lines of text */
  color: var(--parc-dark-text);
  opacity: 0.85; /* A slightly softer text color is easier on the eyes */
  margin-bottom: 1.5rem; /* Space between paragraphs */
  text-align: justify;
}

/* --- Our Partners Section --- */

.partners-section {
  padding: 5rem 0;
  /* A clean white background helps the logos stand out clearly */
  background-color: #ffffff; 
  /* Adds a crisp line separating it from the section above */
  border-top: 1px solid #e0e0e0;
}

.partners-section h2 {
  font-size: 2.5rem;
}

/* --- Testimonials Section --- */

.testimonials-section {
  padding: 5rem 0;
  background-color: var(--parc-light-bg);
  position: relative;
}

.testimonial-card {
  padding: 2rem;
  border-radius: 15px; /* Curvy edges */
  height: 100%;
  
  /* The "Glassmorphism" Effect */
  background: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  backdrop-filter: blur(10px); /* The blur effect */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(52, 76, 115, 0.1);
  
  display: flex;
  flex-direction: column;
}

.testimonial-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.testimonial-image {
  width: 60px;
  height: 60px;
  border-radius: 50%; /* Circular image */
  object-fit: cover;
  margin-right: 1rem;
  border: 2px solid var(--parc-primary-accent);
}

.testimonial-author .author-name {
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0;
  color: var(--parc-navy);
}

.testimonial-author .author-title {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

.testimonial-quote {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.7;
  font-style: italic;
  color: var(--parc-dark-text);
  margin-top: auto; /* Pushes the quote down to align footers */
}

.detail-summary {
  padding: 2rem 0;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 3rem;
}

.detail-summary .lead {
  font-size: 1.25rem;
  max-width: 800px;
  text-align: center;
  margin: auto;
  color: var(--parc-dark-text);
  opacity: 0.9;
}

.capabilities-title {
  font-family: var(--font-serif);
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  color: var(--parc-navy);
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.capability-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.capability-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(52, 76, 115, 0.1);
}

.capability-icon {
  font-size: 1.2rem;
  color: var(--parc-secondary-accent); /* Lemon Green checkmark */
  font-weight: bold;
}

.service-card {
  /* Positioning and Layout */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  
  /* --- THE FIX IS HERE --- */
  /* We layer our static gradient on top of the dynamic image from the variable */
  background-image: linear-gradient(rgba(0, 0, 128, 0.7), rgba(64, 64, 200, 0.5)), var(--service-card-bg-image);
  
  /* Background Image Control */
  background-size: cover;
  background-position: var(--card-bg-position);
  border-radius: 12px;
  overflow: hidden;
  
  /* Effects and Transitions */
  transition: transform 0.3s ease;

  /* Hint to the browser to prepare this element for a transform animation */
  will-change: transform;
}

/* --- Definitive Fix for Alternating Service Card Overlays --- */

/* This rule targets ONLY the even-numbered service cards and overrides their background */
.story-item:nth-child(even) .service-card {
  /* We re-declare the background-image with the lemon-green color */
  background-image: linear-gradient(rgba(173, 248, 2, 0.6), rgba(182, 248, 29, 0.9)), var(--service-card-bg-image);
}

/* This rule targets the text ONLY inside the even-numbered (lemon green) service cards */
.story-item:nth-child(even) .service-card h5,
.story-item:nth-child(even) .service-card p {
  color: var(--parc-dark-text); /* Switch to dark navy text */
  text-shadow: none; /* Remove the white shadow, as it's not needed */
}

/* --- FIX: Text Color and Readability for Service Cards --- */

.service-card h5, 
.service-card p {
  /* This is the primary fix: Change the text color to white */
  color: var(--parc-light-text); 
  
  /* This is the professional touch: Add a subtle shadow to lift the text
     off the background image, ensuring it's readable on any picture. */
  text-shadow: none; 
}

/* Optional: Let's make the title a bit bolder and bigger */
.service-card h5 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

/* Optional: Make the summary paragraph slightly transparent */
.service-card p {
  opacity: 0.9;
}

/* --- "Show More" Functionality for Stories --- */

.story-item {
  /* This is the key to the smooth animation */
  transition: all 0.6s ease-in-out;
}

.hidden-story,
.hidden-insight {
  /* Collapse the element completely */
  max-height: 0;
  opacity: 0;
  transform: translateY(-20px);
  
  /* These are crucial to prevent any content from "leaking" out while hidden */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  overflow: hidden;
}

/* --- Professional Blog/Story Content Styles --- */

.story-body {
  /* This creates a comfortable and readable line width */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Unified Typography for ALL paragraphs in the story */
.story-body p {
  font-family: var(--font-serif); /* Use the same font throughout */
  font-size: 1.15rem; /* Consistent font size */
  line-height: 1.8;
  text-align: justify; /* Keep the justified text you liked */
  margin-bottom: 1.5rem;
}
.story-body .lead {
  font-weight: 500; /* Make the lead paragraph slightly bolder */
  font-size: 1.25rem; /* A bit larger for emphasis */
}

/* Unified Heading Style */
.story-body h4 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--parc-light-text);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--parc-primary-accent); /* Orange underline */
}

/* Two-Column Block for Image and Text */
.story-media-block {
  margin: 3rem 0;
}
.story-media-block h4 {
  margin-top: 0; /* Remove extra top margin for headings inside this block */
}

/* Consistent Image Styling */
.story-image-full,
.story-image-inline {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.story-image-full {
  margin: 2rem 0; /* Space for the full-width image */
}

/* --- Service/Story Deep Dive Page Header --- */

.detail-header {
  padding: 5rem 0;
  color: var(--parc-light-text);

  .detail-header h1 {
  color: #ffffff;
  text-shadow: 0px 3px 6px rgba(254, 254, 254, 0.3);
}

/* This simple, direct rule targets ONLY the title on the insights page. */
.insight-header
.insight-header h1 {
  color: var(--parc-light-text);
  text-shadow: 0px 3px 6px rgba(254, 254, 254, 0.3);
}

  /* --- THIS IS THE FIX --- */
  
  /* 1. This is the default background color. It will be used for all 
     "Our Expertise" pages that don't have a background image. */
  background-color: var(--parc-navy);

  /* 2. This is the layered background for "Featured Stories".
     The gradient is static. The variable is provided by the HTML.
     If the variable is not set, the browser simply ignores this line
     and uses the solid background-color above. */
  background-image: linear-gradient(rgba(0,0,128, 0.8), rgba(28,28,132, 0.9)), var(--detail-header-bg-image);
  
  /* 3. These properties are now correctly in the CSS file.
     They will only take effect if a background-image is present. */
  background-size: cover;
  background-position: center;
}

/* --- Styles for Story Page Components (Snapshot, Speakers, Gallery) --- */

/* --- Interactive Speaker Card Styles --- */

.key-speakers {
  margin-top: 4rem;
}

.key-speakers h3 {
  font-family: var(--font-serif);
  color: var(--parc-navy);
  margin-bottom: 2.5rem; /* More space for the cards */
}

.speaker-card {
  width: 100%; /* Ensure card fills the column */
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  
  /* The Thick Lemon Green Border (as a left highlight) */
  border-left: 5px solid var(--parc-lemon-green);
  
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease-in-out;
  will-change: transform, box-shadow; /* Performance optimization */
}

.speaker-card:hover {
  transform: translateY(-8px); /* Lifts the card up */
  box-shadow: 0 15px 30px rgba(52, 76, 115, 0.15); /* Adds a stronger navy shadow */
  border-left-color: var(--parc-primary-accent); /* Changes border to Orange on hover */
}

/* Typography inside the card */
.speaker-name {
  display: block;
  font-size: 1.2rem;
  color: var(--parc-dark-text);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.speaker-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--parc-navy);
  opacity: 0.8;
}

/* Media Gallery Section */
.media-gallery {
  margin-top: 4rem;
}

.media-gallery h3 {
  font-family: var(--font-serif);
  color: var(--parc-navy);
  margin-bottom: 2rem;
}

.video-embed iframe {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Styles for Blockquotes in Stories --- */

.story-body blockquote {
  border-left: 4px solid var(--parc-lemon-green);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--parc-dark-text);
  opacity: 0.85;
}

.story-body cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  color: var(--parc-navy);
}

/* --- Publication/Insight Page Specific Styles --- */

.related-links {
  margin-top: 4rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 3rem;
}

.related-links h4 {
  font-family: var(--font-serif);
  color: var(--parc-navy);
  margin-bottom: 2rem;
  text-align: center;
}

/* --- Styles for Fact Sheet / Metrics Grids --- */

.fact-sheet-container {
  margin: 3rem 0;
}

.survey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.survey-card {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.survey-value {
  display: block;
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--parc-primary-accent); /* Orange for the numbers */
  line-height: 1.2;
}

.survey-metric {
  display: block;
  font-size: 0.9rem;
  color: var(--parc-dark-text);
  margin-top: 0.5rem;
}

.risk-list {
  list-style-type: '✓ '; /* Use a checkmark for list items */
  padding-left: 1.5rem;
  margin-top: 1.5rem;
}

.risk-list li {
  padding-left: 0.5rem;
  margin-bottom: 0.75rem;
}

/* --- Styles for the Dedicated Insight/Publication Detail Page --- */

/* Body of the blog post */
.story-body {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.story-body p {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.8;
  text-align: justify;
  margin-bottom: 1.5rem;
}

.story-body h4 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--parc-navy);
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--parc-primary-accent);
}

.story-image-full {
  width: 100%;
  border-radius: 12px;
  margin: 2rem 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* --- Professional Styling for External Link Lists --- */

/* This is the container for the links */
.external-links-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column; /* This is the key: stack the links vertically */
  gap: 0.75rem;          /* This creates consistent space between each link */

  /* For a cleaner look, let's center the block of links */
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* This styles each individual link into a button */
.external-links-list a {
  display: block; /* Make it a block to fill the container */
  text-decoration: none;
  font-weight: 600;
  color: var(--parc-navy);
  padding: 1rem 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
}

/* This adds a professional hover effect */
.external-links-list a:hover {
  background-color: var(--parc-light-bg);
  color: var(--parc-primary-accent); /* Orange on hover */
  border-color: var(--parc-primary-accent);
  transform: translateY(-3px); /* Add a subtle "lift" effect */
  box-shadow: 0 8px 15px rgba(52, 76, 115, 0.1);
}

/* --- Styling for Lists within Story Body --- */

.story-body ul {
  list-style-type: none; /* Remove default bullets */
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.story-body ul li {
  padding-left: 1rem;
  margin-bottom: 0.75rem;
  position: relative;
}

/* Create a custom, branded bullet point */
.story-body ul li::before {
  content: '•';
  position: absolute;
  left: -1rem;
  color: var(--parc-lemon-green);
  font-weight: bold;
}

/* --- Styling for Report Cover Captions --- */

.report-caption {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--parc-grey-text);
  margin-top: 0.75rem;
}

/* --- Styles for Photo Gallery Grid in Publications (CORRECTED for Alignment) --- */

.photo-gallery-grid {
  margin-top: 3rem;
}

/* This is the main card container */
.gallery-item {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  height: 100%;
  border: 1px solid #e0e0e0;
  
  /* Use Flexbox to ensure perfect internal alignment */
  display: flex;
  flex-direction: column;
}

/* This is the core of the fix */
.gallery-image {
  width: 100%;
  /* CRUCIAL: Give all images a fixed, consistent height */
  height: 250px; 
  display: block;
  
  /* CRUCIAL: Make the image fill the space without distortion */
  object-fit: cover; 
  object-position: center center; /* You can change this to 'top center' if needed */
  
  transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

/* This styles the caption and ensures it's always at the bottom */
.gallery-caption {
  padding: 1rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--parc-grey-text);
  margin-bottom: 0;
  
  /* This tells the caption to take up any available space, pushing it to the bottom */
  flex-grow: 1; 
  display: flex;
  align-items: center; /* Vertically center the text if there's extra space */
}

/* --- Fix for Vertical Images in Gallery --- */

/* This new rule targets ONLY the images inside our special vertical container */
.gallery-item-vertical .gallery-image {
  /* This overrides the default 'center center' and focuses on the bottom */
  object-position: center bottom;
}

/* =================================================================== */
/* == DEFINITIVE OVERHAUL for "Our Work" Page Accordion == */
/* =================================================================== */

.work-accordion .accordion-item {
  border: none;
  border-radius: 15px !important;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  border-top: 5px solid;
  transition: all 0.3s ease;
}

.work-accordion .accordion-item:nth-child(odd) { border-color: var(--parc-orange); }
.work-accordion .accordion-item:nth-child(even) { border-color: var(--parc-light-green); }

.work-accordion .accordion-header .accordion-button {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--parc-dark-text);
  background-color: #ffffff;
  box-shadow: none !important;
  padding: 1.5rem;
}
.work-accordion .accordion-button:not(.collapsed) {
  background-color: var(--parc-light-bg);
  color: var(--parc-navy);
}

/* --- THIS IS THE KEY CSS FOR THE ANIMATION --- */
.work-accordion .accordion-collapse {
  /* This removes Bootstrap's default snapping animation */
  transition: none; 
}
.work-accordion .accordion-body { 
  padding: 2rem; 
  /* Hides the content by default until JS animates it */
  overflow: hidden; 
}

/* Styling for content inside the accordion */
.award-highlight { display: flex; align-items: center; gap: 1.5rem; background-color: var(--parc-light-bg); padding: 1rem; border-radius: 12px; }
.award-highlight img { max-width: 150px; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.award-highlight p { margin: 0; font-size: 1rem; }
.work-videos-grid h6, .related-links h4 { font-family: var(--font-sans); font-weight: 700; color: var(--parc-navy); margin-bottom: 1rem; padding-top: 1.5rem; border-top: 1px solid #e0e0e0; }
.video-card { height: 100%; }
.video-caption { font-size: 0.9rem; font-weight: 500; text-align: center; color: var(--parc-grey-text); margin-top: 0.75rem; }

/* --- Interactive Hover Effects for "Our Work" Page --- */

/* Target the images specifically on this page */
.work-section .img-fluid {
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* A smooth, professional transition */
  will-change: transform, box-shadow; /* Performance optimization */
}

/* This is the hover state */
.work-section .img-fluid:hover {
  transform: scale(1.05); /* Subtly enlarges the image */
  box-shadow: 0 20px 40px -10px rgba(52, 76, 115, 0.3); /* Adds a stronger, lifted shadow */
}

/* --- Styling for Subpage Hero Sections --- */

/* This class is added to the hero on the 'Our Work' page */
.hero-subpage .hero-overlay {
  /* This creates the "very dim" effect by making the overlay 85% opaque */
  background-color: rgba(52, 76, 115, 0.85);
}

/* Ensure the subpage hero has enough height */
.hero-subpage {
  min-height: 50vh; /* A shorter hero for subpages */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Styles for SVG Section Dividers --- */

.section-divider {
    position: relative;
    top: -1px; /* Prevents tiny gaps */
    line-height: 0;
}
.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px; /* Adjust height of the wave */
}
/* This colors the wave to match the light background */
.section-divider .shape-fill {
    fill: var(--parc-light-bg);
}

/* This is for dividers after a light section, pointing down to a white section */
.section-divider.flipped {
    background-color: var(--parc-light-bg);
}
.section-divider.flipped svg {
    transform: rotate(180deg);
}
.section-divider.flipped .shape-fill {
    fill: #ffffff; /* Make the wave white */
}

/* --- Styles for the "About Us" Page Background --- */

.about-page-wrapper {
  /* Set the background image */
  background-image: url('../images/about_us.JPG');
  
  /* Make the image cover the entire screen */
  background-size: cover;
  background-position: center center;
  
  /* This creates the cool parallax scrolling effect */
  background-attachment: fixed; 
  
  /* Ensure the container takes up at least the full screen height */
  min-height: 100vh;
  
  /* Use Flexbox to center the content card vertically on the page */
  display: flex;
  align-items: center;
}

/* This is the "Frosted Glass" card */
.about-content-card {
  /* The semi-transparent background. We use our light color for a clean look. */
  background: rgba(245, 245, 241, 0.9); /* 90% opaque light background */
  
  /* This is the magic blur effect */
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  backdrop-filter: blur(10px);
  
  /* Visual polish */
  padding: 3rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(52, 76, 115, 0.2);
}

/* --- FIX: Text Readability on the new background --- */
.about-content-card h1 {
  color: var(--parc-navy); /* Dark navy for the title */
}

.about-content-card p {
  color: var(--parc-dark-text); /* Dark text for the paragraphs */
  opacity: 0.9; /* Slightly softer for better readability */
}

/* --- Definitive Professional Mobile Navigation Menu --- */

@media (max-width: 991.98px) {

  /* This styles the container that drops down */
  .navbar-collapse {
    /* THIS IS THE KEY FIX: Give it a background color */
    background-color: #ffffff; 
    
    /* Visual Polish */
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;

    z-index: 1031; /* Ensure it appears above other content */
  }

  /* This styles the list of links inside the dropdown */
  .navbar-collapse .navbar-nav {
    padding: 0.5rem 0; /* Add some padding top and bottom */
    text-align: center;
  }

  /* This styles each individual link */
  .navbar-collapse .navbar-nav .nav-item .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    color: var(--parc-dark-text); /* Ensure text is dark */
    transition: all 0.2s ease-in-out;
  }

  /* Add a hover/active effect for better feedback */
  .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--parc-light-bg);
    color: var(--parc-primary-accent); /* Orange on hover */
  }

  /* Remove the line from the very last link */
  .navbar-collapse .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }
}

/* --- Definitive Styles for Immersive Service Detail Page --- */

/* 1. The Main Page Wrapper (for services) */
.service-page-wrapper {
  position: relative;
  background-image: linear-gradient(rgba(52, 76, 115, 0.8), rgba(52, 76, 115, 0.8)), var(--service-bg-image);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

/* 2. The Service Header (now transparent) */
.service-header {
  background: transparent !important; /* Override other header styles */
  padding: 6rem 0;
  color: var(--parc-primary-accent); /* Orange */
}

/* 3. The Title Text (Readability Fix) */
.service-header h1 {
  color: var(--parc-light-text);
  text-shadow: 0px 3px 6px rgba(255, 255, 255, 0.3); /* Ensure text is always readable */
}

/* 4. The "Frosted Glass" Content Card */
.service-content-card {
  background: rgba(245, 245, 241, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 3rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(52, 76, 115, 0.2);
}

/* 5. The Back Button */
.service-page-wrapper .btn-outline-light {
    border-color: #ffffff;
    color: #ffffff;
}
.service-page-wrapper .btn-outline-light:hover {
    background-color: #ffffff;
    color: var(--parc-dark-text);
}

/* --- Definitive Styles for Featured Story Page --- */

/* 1. The New Immersive Header */
.featured-story-header {
  min-height: 100vh; /* Make the header taller */
  display: flex;
  align-items: center;
  justify-content: center;
}
.featured-story-header h1 {
  color: var(--parc-light-text);
  text-shadow: 0px 3px 6px rgba(255, 255, 255, 0.3); /* Ensure text is always readable */
}

/* --- Definitive Styles for the Project Snapshot Grid --- */

/* This is the main grid container */
.project-snapshot-bar {
  /* This is the core of the fix: We are now using CSS Grid */
  display: grid;
  
  /* On large screens, create four perfectly equal columns */
  grid-template-columns: repeat(4, 1fr); 
  
  gap: 1.5rem; /* The space between the grid items */
  padding: 2rem 0;
  margin: 3rem 0;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}


/* Typography inside the item */
.snapshot-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--parc-navy);
  margin-bottom: 0.5rem;
  
  /* FIX: Align text to the left for a cleaner, more professional look */
  text-align: left; 
}

.snapshot-value {
  display: block;
  font-size: 1.1rem;
  color: var(--parc-dark-text);
  font-weight: 500;
  
  /* FIX: Align text to the left */
  text-align: left;
}

/* --- Make it Responsive for Mobile --- */
/* On screens smaller than 992px (tablets) */
@media (max-width: 991.98px) {
  .project-snapshot-bar {
    /* Switch to a two-column grid */
    grid-template-columns: repeat(2, 1fr);
  }
}

/* On screens smaller than 576px (phones) */
@media (max-width: 575.98px) {
  .project-snapshot-bar {
    /* Switch to a single-column layout */
    grid-template-columns: repeat(1, 1fr);
  }
}

/* --- Styles for "Explore Our Work" Page --- */

/* 1. FIX: Responsive Spacing for Sections on Mobile */
@media (max-width: 767.98px) {
  .work-section {
    /* On mobile, reduce the vertical padding to a more reasonable size */
    padding: 3rem 0;
  }
}

/* 2. NEW: Styling for the Link Lists */
.work-links-list {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}
.work-links-list h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--parc-navy);
  margin-bottom: 1rem;
}
.work-links-list a {
  display: block; /* Stack the links vertically */
  margin-bottom: 0.5rem;
  text-decoration: none;
  font-weight: 500;
  color: var(--parc-dark-text);
  transition: color 0.3s ease;
}
.work-links-list a:hover {
  color: var(--parc-primary-accent);
}

/* --- (Keep your existing styles for .award-highlight, etc.) --- */

/* FIX: Responsive Spacing for Sections on Mobile */
@media (max-width: 767.98px) {
  .work-section {
    padding: 3rem 0;
  }
}

/* --- Styles for Video Grid in Our Work Page --- */

.work-videos-grid h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--parc-navy);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.video-card {
  height: 100%;
}

.video-caption {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  color: var(--parc-grey-text);
  margin-top: 0.75rem;
}

/* --- Style for the Secondary Image in "Our Work" --- */

.work-secondary-image {
  margin-top: 2rem; /* Add some space above the image */
  border: 4px solid white; /* Adds a clean border */
}