@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500&family=Playfair+Display:ital,wght@0,400;0,500;1,500&display=swap');

/*
FONTS
font-family: 'Oswald', sans-serif;
font-family: 'Playfair Display', serif;

COLORS
BLUE    #042940  RGB(4,41,64)
GREEN   #3E5D0C  RGB(62,93,12)
GRAY    #878787  RGB(135,135,135)
*/

/* Filmstrip hero variables */
:root {
  --peek: 12%;          /* left/right peeks */
  --center: 76%;        /* active width = 100% - (peek*2) => 76% */
  --hero-h: 32rem;      /* hero height */
  --slide-dur: 0.6s;      /* animation duration */
}

html {
  --blue: #282d41;
  --dkBlue: #141e28;
  --ltBlue: #5fa0d2;
  --green: #3c5a19;
  --ltGreen: #789632;
  --dark: rgb(33, 37, 41);
  --dkGray: #231f20;
  --gray: #878787;
  --grayTransparent: RGBA(135,135,135,.25);
  --greenTransparent: RGBA(60,90,25, .5);
  --greenTransparent-dk: RGBA(60,90,25, .8);
  --dkGreen: #214326;
  --fontSans: 'Oswald', sans-serif;
  --fontSerif: 'Playfair Display', serif;
}
/*color: var(--blue);*/

/* Navbar logo adjustments */
.navbar .navbar-logo {
  height: 100%;       /* Match the navbar height */
  max-height: 40px;   /* Constrain logo so it doesn’t push navbar taller */
  width: auto;        /* Maintain aspect ratio */
  display: block;
}

.navbar ul {
  font-family: var(--fontSans);
  font-size: 18px;
  font-weight: 300;
}

/****/
/**FONT STYLES**/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fontSans);
  text-transform: uppercase;
  color: var(--green);
}

h1 {
  font-size: 5rem;
  font-weight: 300;
  color: var(--dkGray);
}

h1 span { font-weight: 500; color: var(--green); }
.hero-parallax-body h1 span { color: #fff; }

h2 {
  font-weight: 500;
  font-size: 3rem;
}

h2.h2-lg, .h2-lg { font-size: 3.3rem }

h3 {
    font-size: 2.25rem;  
}

h4 {font-size: 2rem;}

p, ul {
  font-family: var(--fontSerif);
  font-size: 1.4rem;
}

#what main h3 {
  font-size: 3rem;
  font-weight: 300;
  color: var(--dkGray);
}

.newsCard h3, .presentation-card h3 { font-size: 2rem; }
.newsCard h3 a:visited { color: #fff; }

body, .txt-body { font-family: var(--fontSerif); }
.txt-body { font-weight: 400; }

.txt-caps { text-transform: uppercase; }
.txt-bd { font-weight: 500!important; }
.txt-lt { font-weight: 300!important; }
.txt-ko { color: #fff; }
.txt-k  { color: #000; }
.txt-sans { font-family: var(--fontSans); }
.txt-normal { text-transform: none; }
.txt-green {color: var(--green);}
.txt-ltGreen {color: var(--ltGreen);}
.txt-ltBlue {color: var(--ltBlue);}
.txt-sm {font-size: 16px;}
.txt-lg {font-size: 2rem;}

.quote {
  font-family: var(--fontSans);
  font-size: 2.5rem;
  text-transform: uppercase;
}
.quote { text-shadow: 0px 0px 8px #000; }

.label {
  color: var(--gray);
  font-weight: 300;
  line-height: 1.4rem;
}

.newsCard a:link { text-decoration:none; color: #fff; }
.newsCard a:hover { text-decoration: none; }
.newsCard a.btn:link { font-weight: 300; }

.form-control { font-weight: 300; }

/****/
/**backgrounds**/
.bg-dark, .boxDark { background-color: var(--dkGray); }
.bg-green { background-color: var(--green); }
.bg-blue  { background-color: var(--dkBlue); }
.bg-gray  { background: var(--grayTransparent); }

.newsCard.bg-blue { background-color: var(--blue); }

.card.newsCard.bg-dark:hover {
  color: #fff;
  background-color: var(--green)!important;
  transition: background-color 0.3s ease;
}
.card.newsCard.bg-blue:hover {
  color: #fff;
  background-color: var(--ltBlue)!important;
}

/****/
/**navbar**/
nav.navbar.bg-dark {
  background-color: var(--blue)!important;
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
}

nav .nav-item.active,
#what #what-nav,
#who #who-nav,
#insights #insight-nav,
#presentations #insight-nav,
#employee #who-nav,
#careers #who-nav {
  background-color: #231f20!important;
  border-bottom: 8px solid var(--green)!important;
}

nav .nav-item { border-bottom: 8px solid var(--blue)!important; }
nav .nav-item:hover {
  background-color: var(--grayTransparent)!important;
  border-bottom: 8px solid var(--ltBlue)!important;
}

.dropdown-item,
.dropdown-item .nav-item { font-weight: 300; }

/****/
/**buttons**/
.btn {
  font-family: var(--fontSans);
  font-weight: 300;
  font-size: 1.2rem;
  text-transform: uppercase;
  border: none!important;
}

.btn-primary, .btn-secondary { border: none!important; }
.btn.btn-primary { background-color: var(--green); border: none; }
.btn.btn-primary:active { background-color: var(--dkGreen); }

.btn.tag {
  background-color: var(--dkGray);
  border-radius: 30px;
  font-family: var(--fontSans);
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 1rem;
}

.btn-filters { background-color: var(--grayTransparent); color: var(--dkGray); }
.btn-filters.active { background-color: var(--green); color: #fff; }
.btn:hover { background-color: var(--ltGreen); }
.hover-content .btn:hover {background-color: var(--dkGray);}

.btn-blue { background-color: var(--blue); border: none; color: #fff; }
.btn-blue:hover { background-color: var(--ltBlue); }

.btn-dkGreen, .btn-ltGreen:hover { background-color: var(--dkGreen); color: #fff; }
.btn-dkGreen:hover, .btn-ltGreen { background-color: var(--ltGreen); color: #fff; }

.btn.category-btn { font-weight: 300; }
.btn.category-btn:hover {color: #fff;}

.btn-yellow { background-color: #d6d58e !important; font-weight: 300; }
.btn-yellow:hover { background-color: #b8b894 !important; }

/* Override Bootstrap's active state for filter buttons */
.btn-outline-primary.dropdown-toggle.active {
  background-color: #28a745;
  color: #fff;
}
.btn-outline-primary.dropdown-toggle.active:hover { background-color: #218838; }

/* Define inactive state */
.btn-outline-primary.dropdown-toggle.inactive {
  background-color: #ccc;
  color: #333;
}
.btn-outline-primary.dropdown-toggle.inactive:hover { background-color: #bbb; }

/* Preserve outline */
.btn-outline-primary.dropdown-toggle { border-color: #007bff; }
.inactive, .active { transition: background-color 0.3s ease; }

/****/
/**parallax**/
body.hero-parallax-body {
  background-image: url('../../img/banner/banner-bkgd.jpg');
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* Fallback for no JS */
  position: relative; /* avoid conflicts */
}
body.hero-parallax-body.js-enabled { background-attachment: scroll; }

body.hero-parallax-body #section1 .text-center h1 {
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
body.hero-parallax-body #section1 .boxWhite { background-color: rgba(255, 255, 255, 0.9); }

/* Override background image */
body#who.hero-parallax-body, body#employee.hero-parallax-body {
  background-image: url('../../img/banner/banner-bkgd.jpg');
}
body#insights.hero-parallax-body { background-image: url('../../img/banner/banner-bkgd-news.jpg'); }
body#what.hero-parallax-body     { background-image: url('../../img/banner/banner-bkgd-what.jpg'); }

/****/
/**BANNER IMAGE*/
#what .bannerImage,
#who .bannerImage,
#info .bannerImage {
  background-image: url(../img/banner/banner-what.jpg);
  background-position: 50% 110%;
  background-repeat: no-repeat;
}
#info .bannerImage { background-position: 50% 250%; }

/****/
/* home page */

/* ===== Filmstrip hero (Bootstrap-friendly, custom positioning) ===== */
#heroCarousel, #heroCarousel .carousel-item { height: var(--hero-h); }

/* Viewport that reveals the filmstrip (peeks) */
#heroCarousel {
  position: relative;
  padding: 0 var(--peek);
  overflow: hidden;
  background: #000;
}

#heroCarousel .carousel-inner {
  position: relative;
  height: 100%;
  overflow: visible;          /* allow peeking content to show */
}

/* Do NOT let Bootstrap hide non-active items */
#heroCarousel .carousel-item {
  position: absolute;
  inset: 0;
  width: 100%;                /* equals the center window */
  transition: transform var(--slide-dur) ease, opacity var(--slide-dur) ease;
  will-change: transform;
  opacity: .6;                /* neighbors faded */
  transform: translateX(0%);  /* JS positions */
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#heroCarousel .carousel-item.is-active { opacity: 1; z-index: 2; transform: translateX(0%); }

#heroCarousel .slide-bg {
    position: absolute;
    inset: 0;
    background: center/cover no-repeat; /* covers all slides */
    filter: blur(3px);
    transform: scale(1.08);  /* avoids blurry edges */
    z-index: 0;
}


    #heroCarousel .slide-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.5); /* overlay with transparency */
    }

#heroCarousel .carousel-item.intro .slide-bg {
  background-image: url("../../img/banner/banner-aa.jpg");
  /*background: linear-gradient(135deg,#111827,#1f2937);*/
  background-color: var(--dkGray);
  background-size:cover; 
  background-position:center;
  filter: blur(1px);
}


#heroCarousel .headline {
  color: #fff;
  font-family: var(--fontSans);

  text-transform: none;
  font-weight: 300;
  font-size: 2.25rem;
  line-height: 2.75rem;
  text-shadow: 1px 1px 10px #000;
  text-wrap: balance;
}

#heroCarousel .headline span {font-weight: 300;}

/* Fixed-height brand area so slides don't jump */
.hero-logo-box{

  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;   /* or whatever makes sense visually */
}

/* Image logos inside the box */
.hero-logo-box img{

  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* Text fallback when no logo */
.hero-logo-fallback{
  font-family: var(--fontSans);  /* same family as .projName/.quote */
  font-weight:500;
  text-transform:uppercase;
  color:#fff;                    /* same as .txt-ko */
  text-shadow: 1px 1px 8px #000; /* mirrors .quote shadow */
  line-height:1.1;
  margin:0;
  font-size: clamp(1.5rem, 10vw, 4.0rem);
}



/* Hover layer visible only when slide is active */
#heroCarousel .hover-content {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center; text-align: center;
  background: var(--greenTransparent-dk);
  backdrop-filter: blur(3px);
  padding: 1rem;
}


/* Ensure hover content is accessible and styled */
.hover-content p {
    /*font-size: 1.1rem;*/
    line-height: 2rem;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Improve readability on images */
  width: 90%;
}

#heroCarousel .carousel-item.is-active:hover .hover-content { display: flex; }

/* Keep it scoped to hero, only show when the slide is active + hovered */
#heroCarousel .hover-content {
  position: absolute; inset: 0;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: var(--greenTransparent-dk); /* keep your darker green */
  backdrop-filter: blur(3px);
  padding: 1rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#heroCarousel .carousel-item.is-active:hover .hover-content {
  display: flex;
  opacity: 1;
}

/* Controls above content */
#heroCarousel .carousel-control-prev, #heroCarousel .carousel-control-next { z-index: 5; width: 5%; }
#heroCarousel .carousel-control-prev-icon, #heroCarousel .carousel-control-next-icon { width: 1rem; height: 1rem; }

/*disable cursor on hover of service lines*/
#heroCarousel .hover-content .btn.btn-sm {cursor: default;}
#heroCarousel .hover-content .btn.btn-sm:hover {color: #fff;}/*temporary disabling of tags on heroCarousel until they become hyperlinks*/

/* Hide slides when they are being reset far off-screen */
#heroCarousel .carousel-item.offscreen-reset {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important; /* no animation during reset */
}


/* --- Hero filmstrip: Intro state + Reveal animation --- */

/* Intro: no hover overlay on the first slide */
.carousel-item.intro .hover-content {
  display: none !important;
}

/* Keep intro above other slides at start */
.carousel-item.intro {
  z-index: 3;
}

/* While we're holding on the intro, dim/mute the other slides */
#heroCarousel.intro-hold .carousel-item:not(.intro) {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--slide-dur) ease, transform var(--slide-dur) ease;
}

/* On reveal, fade/slide the other slides into view */
#heroCarousel.intro-reveal .carousel-item:not(.intro) {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* After reveal, we can safely drop the intro's stacking prominence */
.carousel-item.intro.intro-done {
  z-index: 1;
}

#heroCarousel.intro-hold .carousel-item:not(.intro) .slide-bg { filter: blur(2px); transition: filter 420ms ease; }

#heroCarousel.intro-reveal .carousel-item:not(.intro) .slide-bg { filter: blur(0); }




/*test animations*/
/*parallax*/
/* Start with non-intro slides a touch smaller and dim */
#heroCarousel.fx-parallax.intro-hold .carousel-item:not(.intro) .slide-bg {
  transform: scale(0.96);
  opacity: 0;
  transition: transform var(--slide-dur) cubic-bezier(.2,.8,.2,1), opacity var(--slide-dur) ease;
}
#heroCarousel.fx-parallax.intro-reveal .carousel-item:not(.intro) .slide-bg {
  transform: scale(1);
  opacity: 1;
}

/* Intro slide-bg zooms back slightly during reveal */
#heroCarousel.fx-parallax .carousel-item.intro .slide-bg {
  transform: scale(1.02);
  transition: transform var(--slide-dur) cubic-bezier(.2,.8,.2,1);
}
#heroCarousel.fx-parallax.intro-reveal .carousel-item.intro .slide-bg {
  transform: scale(1.00);
}

/* Optional: intro content soften */
#heroCarousel.fx-parallax .carousel-item.intro .intro-content {
  transition: opacity 500ms ease, transform 500ms ease;
}
#heroCarousel.fx-parallax.intro-reveal .carousel-item.intro .intro-content {
  opacity: .85;
  transform: translateY(-4px);
}


/* During reveal phase: animate / fade-out (match slide-in speed) */
#heroCarousel.intro-reveal .carousel-item.intro:not(.is-active) {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--slide-dur) ease, transform var(--slide-dur) ease;
}

/* After it has exited: ensure it stays hidden */
#heroCarousel.intro-exited .carousel-item.intro {
  display: none !important;
  opacity: 0 !important;
  transform: none !important;
}


.carousel-item.intro.exiting {
  animation: introExit 1s ease forwards;
}

@keyframes introExit {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}


/* Mobile hero tweaks */
@media (max-width: 768px) {
  :root { --peek: 8%; --center: 84%; }
  #heroCarousel .hover-content { display: none !important; }
}


/* Cards */
/*#home #mapTile { max-height: 400px; }*/
#home #mapTile img { max-width: 80%; max-height: 100%; height: auto; }

.card { border: none; border-radius: 0px; }
.card img { max-width: 80%; height: auto; }

/* === Client Logos: single source of truth (CLEANUP: merged & deduped) === */
.logo-square{
  background-color: #000;
  /* padding: 10px;  <-- REMOVE padding from the square */
  aspect-ratio: 1 / 1;
  transition: background-color 0.3s ease;
  display: flex;                 /* center contents */
  align-items: center;
  justify-content: center;
  box-sizing: border-box;        /* safe sizing */
  overflow: hidden;              /* prevent content from stretching the square */
}
.logo-square.bg-fallback {background-color: var(--green);}
.logo-square:hover{ background-color: #333; }

/* Category background helpers (kept) */
.logo-square.bg-public   { background-color: var(--green); }
.logo-square.bg-private  { background-color: var(--green); }
.logo-square.bg-nonprofit{ background-color: var(--green); }

/* Inner wrapper fills the tile — prevents “tall” logos from stretching the tile */
/* Inner wrapper fills the square and holds padding */
.logo-wrap{
  width: 100%;
  height: 100%;
  padding: 10px;                 /* moved from .logo-square */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Logos/SVGs scale down within the wrapper */
.logo-wrap img,
.logo-wrap svg{
  display: block;
  max-width: 95%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* --- Hover name overlay for logo tiles --- */
.logo-square.has-logo{
  position: relative; /* containing block for overlay */
}

.logo-square.has-logo .hover-name{
  position: absolute;
  inset: 0;
  display: flex;
  background: RGBA(51,51,51,.8);
  /*background: rgba(25,25,25,.75);   /* transparent black */
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 3;
  /* optional: allow clicks through the overlay if needed */
  /* pointer-events: none; */
}

.logo-square.has-logo:hover .hover-name{
  opacity: 1;
  visibility: visible;
}

.logo-square.has-logo .hover-name .logo-fallback{
  max-width: 90%;
  word-break: break-word;
  line-height: 1.15;
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  text-transform: uppercase;
}

.logo-square.has-logo:hover .logo-wrap img{ filter: brightness(.85); filter: blur(1px) }


/****/
/*who we are*/

/* === Leadership-only: reset link look and ensure consistent headshots === */
#leadership .employee-card { text-decoration: none; color: inherit; }
#leadership .employee-card:link,
#leadership .employee-card:visited,
#leadership .employee-card:hover,
#leadership .employee-card:active { text-decoration: none; color: inherit; }

#leadership .employee-info h3,
#leadership .employee-info p { text-decoration: none; }

/* If Bootstrap Ratio utilities are missing, this fallback kicks in */
#leadership .ratio { position: relative; width: 100%; }
#leadership .ratio::before { content: ""; display: block; padding-top: 133.333%; } /* 3:4 */
#leadership .ratio > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: top center;
}

/* === Management-only: link reset and ratio fallback === */
#management .employee-card { text-decoration: none; color: inherit; }
#management .employee-card:link,
#management .employee-card:visited,
#management .employee-card:hover,
#management .employee-card:active { text-decoration: none; color: inherit; }

#management .employee-info h3,
#management .employee-info p { text-decoration: none; }

/* If Bootstrap Ratio utilities are missing, this fallback ensures equal heights */
#management .ratio { position: relative; width: 100%; }
#management .ratio::before { content: ""; display: block; padding-top: 125%; } /* 4:5 */
#management .ratio > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: top center;
}

/* === Analysis-only: link reset and ratio fallback === */
#analysis .employee-card { text-decoration: none; color: inherit; }
#analysis .employee-card:link,
#analysis .employee-card:visited,
#analysis .employee-card:hover,
#analysis .employee-card:active { text-decoration: none; color: inherit; }

#analysis .employee-info h3,
#analysis .employee-info p { text-decoration: none; }

/* If Bootstrap Ratio utilities are missing, this ensures equal heights */
#analysis .ratio { position: relative; width: 100%; }
#analysis .ratio::before { content: ""; display: block; padding-top: 125%; } /* 4:5 */
#analysis .ratio > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: top center;
}

/*start hover effects*/
/* =========================================
   Employee cards: safe, minimal hover pack
   (Leadership, Management, Analysis)
   ========================================= */
#leadership .employee-card,
#management .employee-card,
#analysis .employee-card{
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}

/* 1) Subtle lift + soft shadow (no layout shift) */
#leadership .employee-card:hover,
#leadership .employee-card:focus-visible,
#management .employee-card:hover,
#management .employee-card:focus-visible,
#analysis .employee-card:hover,
#analysis .employee-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  text-decoration: none;
}

/* 2) Gentle image zoom-in */
#leadership .employee-headshot > img,
#management .employee-headshot > img,
#analysis   .employee-headshot > img{
  transition: transform .35s ease;
  will-change: transform;
}

#leadership .employee-card:hover .employee-headshot > img,
#leadership .employee-card:focus-visible .employee-headshot > img,
#management .employee-card:hover .employee-headshot > img,
#management .employee-card:focus-visible .employee-headshot > img,
#analysis   .employee-card:hover .employee-headshot > img,
#analysis   .employee-card:focus-visible .employee-headshot > img{
  transform: scale(1.04); /* small, tasteful */
}

/* 3) Soft tint overlay on photo (very subtle) */
#leadership .employee-headshot::after,
#management .employee-headshot::after,
#analysis   .employee-headshot::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08); /* tweak to taste */
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none; /* keeps the link fully clickable */
}

#leadership .employee-card:hover .employee-headshot::after,
#leadership .employee-card:focus-visible .employee-headshot::after,
#management .employee-card:hover .employee-headshot::after,
#management .employee-card:focus-visible .employee-headshot::after,
#analysis   .employee-card:hover .employee-headshot::after,
#analysis   .employee-card:focus-visible .employee-headshot::after{
  opacity: 1;
}

/* 4) (Optional) Slight heading emphasis on hover
   Comment out if you prefer not to shift color.
   Uses higher specificity to beat .txt-ko (white text) when needed. */
#leadership .employee-card:hover .employee-info h3,
#leadership .employee-card:focus-visible .employee-info h3{
  color: var(--green);
}
#management .employee-card:hover .employee-info h3,
#management .employee-card:focus-visible .employee-info h3{
  color: var(--ltGreen);
}
#analysis .employee-card:hover .employee-info h3,
#analysis .employee-card:focus-visible .employee-info h3{
  color: var(--green);
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #leadership .employee-card,
  #management .employee-card,
  #analysis .employee-card{
    transition: none;
  }
  #leadership .employee-card:hover,
  #leadership .employee-card:focus-visible,
  #management .employee-card:hover,
  #management .employee-card:focus-visible,
  #analysis .employee-card:hover,
  #analysis .employee-card:focus-visible{
    transform: none;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15); /* keep a subtle focus cue */
  }
  #leadership .employee-headshot > img,
  #management .employee-headshot > img,
  #analysis   .employee-headshot > img{
    transition: none;
  }
}


.employee-card:hover .employee-info {
  margin: 5px 0px;
  padding: 0px 15px 3px 15px;
  transform: scale(1.04); /* small, tasteful */
}

#leadership .employee-card:hover .employee-info,
#analysis .employee-card:hover .employee-info {
  background-color: #fff;
}

#management .employee-card:hover .employee-info {
  background-color: var(--green);
}

    #management .employee-card:hover .employee-info h3,
    #management .employee-card:hover .employee-info p {
    color: #fff;
    }

/*end hover effects*/



/* Kill link underlines inside employee cards */
.employee-card,
.employee-card:link,
.employee-card:visited,
.employee-card:hover,
.employee-card:active {
  text-decoration: none !important;
  color: inherit; /* keep text using your h3/p colors */
}


/* Ensure link styles don't override employee-info content */
.employee-card .employee-info h3,
.employee-card .employee-info p {
   /*text-decoration: none !important;*/
  font-family: var(--fontSans);
}

.employee-card .employee-info h3 {
  font-weight: 500;
  color: var(--green); 
  /*text-decoration: none !important;*/
}

.employee-card .employee-info p {
  font-weight: 300;
  line-height: 1.6rem;
  color: var(--dkGray);
   /*text-decoration: none !important;*/
}

#management .employee-card .employee-info p {
  color: #fff;
}

/*end who we are section*/
/****/


/* News cards */
.newsCard { background-color: var(--dark); border-radius: 0px; }
.newsCard:hover, .slideContainer .boxDark:hover { background-color: rgba(33, 37, 41, .9); }
.newsCard.twitter { background-color: var(--green); color: #fff; }
.newsCard.twitter:hover { background-color: var(--greenDark); }

/****/
/* what we do */
#serviceBtns .btn {
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.5rem;
  border-radius: 0px;
}


.hoverContainer {
  background-color: var(--greenTransparent);
  color: #fff;
  z-index: 10;
  display: none; /* hidden by default */
}
#clientGrid .grid-item .hoverContainer { background-color: var(--greenTransparent-dk); }
.hoverContainer.display { display: block; }

/****/
/*masonry for clientGrid (kept; harmless if not used)*/
#clientGrid .grid-sizer { width: 200px; }
#clientGrid {
  max-width: 800px;       /* Default 4 tiles */
  margin: 0 auto;
  width: 100%;
  --col: 200px;           /* tile width */
  --gut: 10px;            /* gutter (match Masonry) */
}
@media (min-width: 992px)  { #clientGrid { max-width: 1000px; } } /* 5 tiles */
@media (min-width: 1200px) { #clientGrid { max-width: 1200px; } } /* 6 tiles */

#clientGrid .grid-item { margin-bottom: 4px; }

/* Widths */
#clientGrid .grid-item--width1 { width: 200px; }
#clientGrid .grid-item--width2 { width: 400px; }
#clientGrid .grid-item--width3 { width: 600px; }

/* Heights */
#clientGrid .grid-item--height1 { height: 200px; }
#clientGrid .grid-item--height2 { height: 410px; }

/* Temporary medium sizing */
#clientGrid .grid-item--height1.mediumBox { height: 200px; }

/* ≤768px: simplify */
@media (max-width: 768px) {
  #clientGrid .grid-sizer, #clientGrid .grid-item { width: 50%; }
  #clientGrid .grid-item--width1,
  #clientGrid .grid-item--width2,
  #clientGrid .grid-item--width3 { width: 50%; }
  #clientGrid .grid-item--height1,
  #clientGrid .grid-item--height2 { height: 200px; }
  #clientGrid .img { display: none; }
  #clientGrid .hoverContainer { display: none !important; }
  #clientGrid .contents { padding: 1rem; }
  #clientGrid img.logo {
    max-height: 80%;
    width: auto;
    object-fit: contain;
  }
}

/* 769–991px tuning */
@media (min-width: 769px) and (max-width: 991px) {
  #clientGrid {
    max-width: calc(3 * var(--col) + 2 * var(--gut));
    margin: 0 auto;
  }
  #clientGrid .grid-sizer        { width: var(--col); }
  #clientGrid .grid-item         { width: var(--col); }
  #clientGrid .grid-item--width1 { width: var(--col); }
  #clientGrid .grid-item--width2 { width: calc(2 * var(--col) + var(--gut)); }
  #clientGrid .grid-item--width3 { width: calc(3 * var(--col) + 2 * var(--gut)); }
  #clientGrid .grid-item--height1 { height: var(--col); }
  #clientGrid .grid-item--height2 { height: calc(2 * var(--col) + var(--gut)); }
}

/* ClientGrid visual helpers */
#ourCompanies #boxContainer { height: 25rem; }
#ourCompanies .tile.boxDark:hover { background-color: var(--greenDark); }
#ourCompanies .boxDark.active { background-color: var(--green); }

#clientGrid .boxDark.lgBox .img {
  background-image: url(../img/allegiant_night.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .5;
  z-index: 1;
}

#clientGrid .contents {
  z-index: 5; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; box-sizing: border-box; padding: 1rem;
}

#clientGrid .boxDark.lgBox .contents {
  z-index: 100; position: relative; text-shadow: 1px 1px 2px #000;
}

#clientGrid .boxDark.lgBox .logo {
  margin-top: 7rem;
  max-height: 10rem;
  max-width: 60%;
  width: auto; height: auto;
}

#clientGrid img.logo {
  max-height: 80%;
  width: auto;
  object-fit: contain;
  margin: 0 auto; /* fallback centering */
}

#clientGrid .boxDark.smBox .logo { max-height: 90%; max-width: 90%; height: auto; width: auto; }
.smBox .logo.horizontal { margin-top: 5rem; }

#clientGrid .label.txt-ko { color: #fff; }
#clientGrid .hoverContainer { z-index: 200; }

#clientGrid div.img { z-index: 1; }
#clientGrid div.contents { z-index: 10; }
#clientGrid div.hoverContainer { z-index: 20; }

/* Limit initial view to 18 tiles; reveal when .show-all is present */
#clientGrid:not(.show-all) .logo-col:nth-child(n+37){
  display: none !important;
}

@media (max-width: 767px) {
  #clientGrid:not(.show-all) .logo-col:nth-child(n+21){
    display: none !important;
    }
}

#clientGrid .hover-name {
  font-size: clamp(0.75rem, 1vw, 0.9rem);
}


/* Filter badge */
.filter-badge{
  --size: clamp(72px, 18vw, 100px);
  width: var(--size);
  height: var(--size);
  background-color: var(--dkBlue);
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}

.filter-badge .filter-icon{
  width: 70%;
  height: 70%;
  object-fit: contain;
  display: block;
}


/****/
/*temp eco impact page*/
#economic-impacts .ecoCard ul > li {
  background-color: var(--grayTransparent)!important;
}
#economic-impacts .ecoCard a:link,
#economic-impacts .ecoCard a {
  text-decoration: none!important;
}

/****/
/*temp portals page*/
.card-logo {
  max-width: 80%;
  max-height: 100%;
  object-fit: contain;
}

/****/
/**start footer**/
footer {
  background-color: var(--blue);
  font-family: var(--fontSans)!important;
  color: #fff!important;
  text-decoration: none!important;
}

footer a, footer a:link, footer p, footer label, footer .form-label {
  font-family: var(--fontSans);
  text-decoration: none!important;
  color: #fff;
}

body footer p { font-weight: 300; font-family: var(--fontSans); color: #fff;}

footer .nav-link {
  font-family: var(--fontSans);
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
}

footer .txt-sm { text-transform: uppercase; }
footer p a { color: #fff; text-decoration: none; }

footer .nav-level1 > li > a:hover,
footer .nav-level2 > li > a:hover,
footer p a:hover {
  background-color: var(--green);
  color: #fff;
}

.contactInput,
.form-control.contactInput{
  border: none!important;
  border-radius: none!important;
}
/**end footer**/

/****/
/**start @media sections**/
@media (min-width: 1400px) {
  .col-xxl-10th {
    flex: 0 0 auto;
    width: 10%;   /* 100 / 10 = 10% per logo */
  }
}

@media (min-width: 1400px) {
  .col-xxl-9th {
    flex: 0 0 auto;
    width: 11.111%; /* 100 / 9 = 11.111% */
  }
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
  /*.employee-card--leadership .employee-headshot { height: 375px; }
  .employee-card--management .employee-headshot { height: 300px; }
  .employee-card--analysis   .employee-headshot { height: 250px; }*/
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .carousel-item { width: 90%; }
  .carousel-item.active { left: 5%; }
  .carousel-item-prev, .carousel-item-prev-active {
    left: 0; transform: translateX(-88.9%); opacity: 0.5;
  }
  .carousel-item-next, .carousel-item-next-active {
    left: 10%; transform: translateX(88.9%); opacity: 0.5;
  }
  .carousel-item.start, .carousel-item.end {
    left: 5% !important; transform: translateX(0) !important;
  }
  .carousel-item .hover-content { display: none !important; }

  /*.employee-card--leadership .employee-headshot { height: 300px; }
  .employee-card--management .employee-headshot { height: 250px; }
  .employee-card--analysis   .employee-headshot { height: 200px; }*/
  .employee-info h3 { font-size: 1.25rem; }
  .employee-info p  { font-size: 0.875rem; }
}

@media (max-width: 576px) {
  /*.employee-card--leadership .employee-headshot { height: 250px; }
  .employee-card--management .employee-headshot { height: 200px; }
  .employee-card--analysis   .employee-headshot { height: 150px; }*/
  .employee-info h3 { font-size: 1rem; }
  .employee-info p  { font-size: 0.75rem; }
}

/* Optional image behavior for the simple card markup */
.card-img-top {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}