@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)

bright green: #5BA727 RGB(91, 167, 39)
*/

/* 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;
  --greenNew: #3d8a4a;
  /*--ltGreen: #789632;*/
  --ltGreen: #dff1e2;
  --brightGreen: rgb(91, 167, 39);
  --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;
  
  --darkNew: rgb(10,14,17);
}
/*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;
}

.navbar .navbar-brand,
.navbar .navbar-toggler {
  position: relative;
  z-index: 3;
}

.navbar .navbar-collapse {
  z-index: 1;
}

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

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

h1 span { font-weight: 500; color: var(--greenNew); }
.hero-parallax-body h1 span, #insights 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; }

.subhead {
  font-family: var(--fontSans);
  text-transform: none;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.75rem;
  text-wrap: balance;
}

h2.subhead {font-size: 2rem;}

/*follow us*/
#twitterCard {
  width: 20%;
  border-radius: 10px;
}
.newsCard.twitter {
  border-radius: 10px;
  padding: 5px;
  line-height: 1.75rem;
}

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(--greenNew);}
.txt-ltGreen {color: var(--ltGreen);}
.txt-ltBlue {color: var(--ltBlue);}
.txt-sm {font-size: 16px;}
.txt-lg {font-size: 2rem;}
.txt-shadow {text-shadow: 1px 1px 10px #000;}

.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(--greenNew); }
.bg-blue  { background-color: var(--dkBlue); }
.bg-gray  { background: var(--grayTransparent); }
.bg-dark-new {background-color: var(--darkNew);}

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

.card.newsCard.bg-dark:hover {
  color: #fff;
  background-color: var(--greenNew)!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(--greenNew)!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(--greenNew); border: none; }
.btn.btn-primary:hover, .btn.btn-primary:active { background-color: var(--dkGreen); color: #fff;}


.btn.tag, .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(--greenNew); color: #fff; }
.btn:hover { background-color: var(--ltGreen); color: #000; }
.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.category-btn { font-weight: 300; }
.btn.category-btn:hover {background-color: var(--greenNew); color: #fff;}

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


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

.btn-dk {background-color: #000;}
.btn-dk:hover {background-color: #222;}

/* 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; }


#home #twitterCard .btn, 
#home .taggbox .tb_content_text {color: #fff;}



/****/
/**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 { 
  /*background-image: url('../../img/banner/banner-bkgd-news.jpg'); 
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed!important;
  background-size: cover!important;*/
  position: relative;
  background-color: #000;
  
}

  body#insights::before {
    content: "";
    position: fixed;
    inset: 0;

    background-image: url('../../img/banner/banner-bkgd-news.jpg');
    background-size: contain!important;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed!important;

    filter: blur(18px);
    transform: scale(1.05);

    opacity: .8;

    z-index: -1;
  }

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; }
  h1 {font-size: 2rem;}
}


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

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


/* US map */
.us-map-wrap {
  width: 100%;
}

#mapTile #us-map {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  overflow: visible;
  will-change: transform;
  transition: transform .15s linear;
}

/* Base state styling */
#mapTile #us-map .state {
  fill: #2f343c;
  stroke: rgba(255,255,255,.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform: translateY(2px);
  transform-box: fill-box;
  transform-origin: center center;
  transition:
    fill .3s ease,
    opacity .7s ease,
    transform .7s ease;
}

/* Neutral states */
#mapTile #us-map .state-neutral,
#mapTile #us-map .state:not(.state-covered):not(.state-home) {
  /*fill: #2f343c;*/
}

/* Covered states */
#mapTile #us-map .state-covered {
  fill: var(--ltBlue);
}

/* Nevada / home state */
#mapTile #us-map .state-home {
  fill: var(--greenNew);
  /*fill: var(--brightGreen);*/
}

/* Triggered when JS adds the visible class */
#mapTile #us-map.map-visible .state {
  opacity: 1;
  transform: translateY(0);
}


@media (prefers-reduced-motion: reduce) {
  #mapTile #us-map .state {
    transition: none;
    opacity: 1;
    transform: none;
  }
}





/* === 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(--greenNew);}
.logo-square:hover{ background-color: #333; }

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

/* 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,
.logo-square.has-logo:focus .hover-name,
.logo-square.has-logo:focus-within .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(--greenNew);
}
#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(--greenNew);
}

/* 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(--greenNew);
}

    #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(--greenNew); 
  /*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;
}


/****/
/*headshots on employee detail page (employee.php)*/
#employee .employee-headshot img { object-fit: cover; object-position: top center; }
#employee .employee-headshot       { overflow: hidden; }


/*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(--greenNew); 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 */
}

/****/
/* WHAT page Masonry baseline */
#projectGrid{
  --col: 220px;
  --gut: 10px;
  position: relative;
}

#projectGrid .grid-sizer{ width: var(--col); }
#projectGrid .gutter-sizer{ width: var(--gut); }

#projectGrid .grid-item{
  width: var(--col);
  margin: 0 0 var(--gut) 0; /* vertical gutter lives here */
}

/* Optional width modifiers (if you use grid-item--width2/3) */
#projectGrid .grid-item--width2{ width: calc((var(--col) * 2) + var(--gut)); }
#projectGrid .grid-item--width3{ width: calc((var(--col) * 3) + (var(--gut) * 2)); }


/* Keep logos/images from overflowing their boxes */
#projectGrid .grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 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 {
  --footer-top: #171d23;
  --footer-main: #2b333c;
  --footer-rule: #444d56;
  --footer-text: #b5bac0;
  --footer-muted: #858a90;
  --footer-white: #f8f9fa;
  --footer-green: #3f8f4b;

  background-color: var(--footer-main);
  font-family: var(--fontSans) !important;
  color: var(--footer-text) !important;
}

footer .footer-cta {
  background-color: var(--footer-top);
  border-top: 2px solid var(--footer-green);
  border-bottom: 1px solid var(--footer-rule);
}

footer .footer-cta-title {
  color: var(--footer-white);
  font-family: var(--fontSans);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

footer .footer-cta-text,
footer .footer-address,
footer .footer-address a,
footer .footer-main p {
  color: var(--footer-text) !important;
  font-family: var(--fontSans);
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1.45;
}

footer .footer-cta-btn {
  background-color: var(--footer-green);
  color: var(--footer-white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 330px);
  min-height: 58px;
  padding: .9rem 2rem;
  font-family: var(--fontSans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .28em;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;
}

footer .footer-cta-btn:hover,
footer .footer-cta-btn:focus {
  background-color: #4da65a;
  color: var(--footer-white) !important;
}

footer .footer-main {
  background-color: var(--footer-main);
}

footer .footer-heading {
  color: var(--footer-white);
  font-family: var(--fontSans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .35em;
  text-transform: uppercase;
}

/* Footer links: supports both footer-nav/nav-link and footer-links markup */
footer .footer-nav .nav-link,
footer .footer-links a,
footer .footer-links a:link,
footer .footer-links a:visited,
footer .footer-address a,
footer .footer-address a:link,
footer .footer-address a:visited,
footer .footer-legal a,
footer .footer-legal a:link,
footer .footer-legal a:visited {
  background-color: transparent !important;
  color: var(--footer-text) !important;
  display: inline-block;
  font-family: var(--fontSans);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.35;
  padding: .25rem 0;
  text-decoration: none !important;
  text-transform: none;
}

footer .footer-nav .nav-link:hover,
footer .footer-nav .nav-link:focus,
footer .footer-links a:hover,
footer .footer-links a:focus,
footer .footer-address a:hover,
footer .footer-address a:focus,
footer .footer-legal a:hover,
footer .footer-legal a:focus {
  background-color: transparent !important;
  color: var(--footer-white) !important;
  text-decoration: none !important;
}

footer .footer-social-link {
  width: 48px;
  height: 48px;
  border: 1px solid var(--footer-rule);
  color: var(--footer-white) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontSans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;
}

footer .footer-social-link .bi {
  font-size: 1.1rem;
  line-height: 1;
}

footer .footer-social-link:hover,
footer .footer-social-link:focus {
  background-color: var(--footer-green) !important;
  border-color: var(--footer-green);
  color: var(--footer-white) !important;
  text-decoration: none !important;
}

footer .footer-legal {
  border-top: 1px solid var(--footer-rule);
  color: var(--footer-muted);
  font-family: var(--fontSans);
  font-size: .95rem;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
}

footer .footer-legal a,
footer .footer-legal a:link,
footer .footer-legal a:visited {
  color: var(--footer-muted) !important;
  font-size: .95rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (max-width: 767.98px) {
  footer .footer-cta-btn {
    min-width: 100%;
  }

  footer .footer-heading {
    letter-spacing: .25em;
  }
}
/**end footer**/


/****/
/*insights*/
.follow-box {
    /*background-color: #f7f7f7; /* slightly darker than Bootstrap bg-light */
  background-color: var(--dkGray);
  color: #fff;
    /*border: 1px solid #e0e0e0;
    border-radius: .5rem;*/
}


/*end insights*/
/****/



/** ALT NAVBAR - scoped to nav.navbar-alt only **/
nav.navbar.navbar-alt,
nav.navbar.navbar-alt.bg-dark {
  min-height: 78px;
  background-color: #0a1114 !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--fontSans);
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
}

nav.navbar.navbar-alt .container,
nav.navbar.navbar-alt .container-fluid {
  min-height: 78px;
}

nav.navbar.navbar-alt .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

nav.navbar.navbar-alt .navbar-logo,
nav.navbar.navbar-alt .navbar-brand img {
  max-height: 46px;
  width: auto;
}

nav.navbar.navbar-alt .navbar-nav {
  gap: 1.25rem;
}

nav.navbar.navbar-alt .nav-item,
nav.navbar.navbar-alt .nav-item.active,
body#what nav.navbar.navbar-alt #what-nav,
body#who nav.navbar.navbar-alt #who-nav,
body#insights nav.navbar.navbar-alt #insight-nav,
body#presentations nav.navbar.navbar-alt #insight-nav,
body#employee nav.navbar.navbar-alt #who-nav,
body#careers nav.navbar.navbar-alt #who-nav,
body#contact nav.navbar.navbar-alt #contact-nav,
body.aa-contact-page nav.navbar.navbar-alt #contact-nav {
  background-color: transparent !important;
  border-bottom: 0 !important;
}

nav.navbar.navbar-alt .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78px;
  padding: 0 .25rem !important;
  color: rgba(255,255,255,.78) !important;
  font-family: var(--fontSans);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color .2s ease;
}

nav.navbar.navbar-alt .nav-link::after {
  content: "";
  position: absolute;
  left: .25rem;
  right: .25rem;
  bottom: 0;
  height: 3px;
  background-color: var(--brightGreen);
  opacity: 0;
  transform: scaleX(.35);
  transform-origin: center;
  transition: opacity .2s ease, transform .2s ease;
}

nav.navbar.navbar-alt .nav-link:hover,
nav.navbar.navbar-alt .nav-link:focus,
nav.navbar.navbar-alt .nav-item.active .nav-link,
body#what nav.navbar.navbar-alt #what-nav .nav-link,
body#who nav.navbar.navbar-alt #who-nav .nav-link,
body#insights nav.navbar.navbar-alt #insight-nav .nav-link,
body#presentations nav.navbar.navbar-alt #insight-nav .nav-link,
body#employee nav.navbar.navbar-alt #who-nav .nav-link,
body#careers nav.navbar.navbar-alt #who-nav .nav-link,
body#contact nav.navbar.navbar-alt #contact-nav .nav-link,
body.aa-contact-page nav.navbar.navbar-alt #contact-nav .nav-link {
  color: #fff !important;
  background-color: transparent !important;
}

nav.navbar.navbar-alt .nav-link:hover::after,
nav.navbar.navbar-alt .nav-link:focus::after,
nav.navbar.navbar-alt .nav-item.active .nav-link::after,
body#what nav.navbar.navbar-alt #what-nav .nav-link::after,
body#who nav.navbar.navbar-alt #who-nav .nav-link::after,
body#insights nav.navbar.navbar-alt #insight-nav .nav-link::after,
body#presentations nav.navbar.navbar-alt #insight-nav .nav-link::after,
body#employee nav.navbar.navbar-alt #who-nav .nav-link::after,
body#careers nav.navbar.navbar-alt #who-nav .nav-link::after,
body#contact nav.navbar.navbar-alt #contact-nav .nav-link::after,
body.aa-contact-page nav.navbar.navbar-alt #contact-nav .nav-link::after {
  opacity: 1;
  transform: scaleX(1);
}

nav.navbar.navbar-alt .dropdown-menu {
  margin-top: 0;
  padding: .75rem 0;
  background-color: #11191d;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 0;
}

nav.navbar.navbar-alt .dropdown-item {
  color: rgba(255,255,255,.82);
  font-family: var(--fontSans);
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none !important;
}

nav.navbar.navbar-alt .dropdown-item:hover,
nav.navbar.navbar-alt .dropdown-item:focus {
  color: #fff;
  background-color: rgba(91,167,39,.18);
}

nav.navbar.navbar-alt .navbar-toggler {
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 0;
  padding: .35rem .55rem;
}

nav.navbar.navbar-alt .navbar-toggler:focus {
  box-shadow: 0 0 0 .15rem rgba(255,255,255,.16);
}

@media (max-width: 767.98px) {
  nav.navbar.navbar-alt,
  nav.navbar.navbar-alt.bg-dark,
  nav.navbar.navbar-alt .container,
  nav.navbar.navbar-alt .container-fluid {
    min-height: 72px;
  }

  nav.navbar.navbar-alt .navbar-logo,
  nav.navbar.navbar-alt .navbar-brand img {
    max-height: 42px;
  }

  nav.navbar.navbar-alt .navbar-collapse {
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: .75rem;
    padding-top: .75rem;
    padding-bottom: 1rem;
  }

  nav.navbar.navbar-alt .navbar-nav {
    gap: 0;
    align-items: stretch !important;
  }

  nav.navbar.navbar-alt .nav-link {
    min-height: auto;
    padding: .85rem 0 !important;
  }

  nav.navbar.navbar-alt .nav-link::after {
    left: 0;
    right: auto;
    width: 2.5rem;
  }
}
/** END ALT NAVBAR **/


/* =========================================================
   CONTACT PAGE ONLY
   Scoped to body.aa-contact-page and .aa-contact-* classes.
========================================================= */
body.aa-contact-page, body#insights {
    --contact-ink: #071012;
    --contact-panel: #111a1e;
    --contact-muted: #f3f4f4;
    --contact-rule: #d9dddc;
    --contact-green: #3f8e52;
    --contact-green-dark: #2f6f3e;
    --contact-text: #1f2628;
}

body.aa-contact-page {
    background: #fff;
    color: var(--contact-text);
}

.aa-contact-shell {
   /* max-width: 1380px;*/
    max-width: 1480px;
    padding-left: clamp(1.25rem, 3vw, 3rem);
    padding-right: clamp(1.25rem, 3vw, 3rem);
}

.aa-contact-bg-light {
    background-color: #f3f4f4;
}

.aa-contact-bg-muted {
    background-color: #e9ecec;
}

.aa-contact-bg-dark {
    background: var(--contact-panel);
}

.aa-contact-kicker,
.aa-contact-label,
.aa-contact-card-title,
.aa-contact-mini-link,
.aa-contact-help,
.aa-contact-form .form-label,
.aa-contact-submit,
.aa-contact-page h1,
.aa-contact-page h2,
.aa-contact-page h3,
.aa-contact-page h4 {
    font-family: var(--fontSans);
    text-transform: uppercase;
    letter-spacing: .28em;
}

.aa-contact-hero {
    background: var(--contact-ink);
    color: #fff;
    padding-top: clamp(7rem, 13vw, 12rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.aa-contact-kicker {
    color: var(--contact-green);
    font-size: .72rem;
    font-weight: 500;
    margin-bottom: .75rem;
}

.aa-contact-hero h1, #insights h1 {
    color: #fff;
    font-size: clamp(3rem, 7vw, 6.7rem);
    font-weight: 500;
    line-height: .88;
    letter-spacing: -.025em;
    max-width: 760px;
    margin-bottom: 1.75rem;
}

.aa-contact-hero h1 span,
.aa-contact-main h2 span,
#insights h1 span {
    color: var(--contact-green);
}

.aa-contact-hero p {
    color: rgba(255, 255, 255, .82);
    max-width: 700px;
    font-size: 1.1rem;
}

.aa-contact-main {
    background: #fff;
}

.aa-contact-main h2 {
    color: var(--contact-ink);
    font-size: clamp(2rem, 4vw, 3.65rem);
    line-height: .95;
    letter-spacing: -.02em;
    margin-bottom: 2rem;
}

.aa-contact-form .form-label,
.aa-contact-label {
    color: var(--contact-ink);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: .6rem;
}

.aa-contact-form .form-control,
.aa-contact-form .form-select {
    border: 0;
    border-bottom: 2px solid #6c7371;
    border-radius: 0;
    padding: .55rem 0 .65rem;
    font-family: var(--fontSerif);
    color: var(--contact-text);
    background-color: transparent;
    box-shadow: none;
}

.aa-contact-form .form-control:focus,
.aa-contact-form .form-select:focus {
    border-color: var(--contact-green);
    box-shadow: none;
}

.aa-contact-form textarea.form-control {
    min-height: 132px;
    border: 1px solid var(--contact-rule);
    padding: 1rem;
    resize: vertical;
}

.aa-contact-submit {
    min-width: 190px;
    border-radius: 0;
    border: 0;
    background: var(--contact-green);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    padding: 1rem 1.75rem;
}

.aa-contact-submit:hover,
.aa-contact-submit:focus {
    background: var(--contact-green-dark);
    color: #fff;
}

.aa-contact-help {
    color: #78807e;
    font-size: .9rem;
    letter-spacing: .05em;
    text-transform: none;
    margin-top: .85rem;
}

.aa-contact-card {
    border: 1px solid var(--contact-rule);
    padding: 1.65rem 2rem;
    min-height: 112px;
    background: #fff;
}

.aa-contact-card-title {
    color: var(--contact-green);
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: .6rem;
}

.aa-contact-card p,
.aa-contact-card a {
    color: var(--contact-text);
    text-decoration: none;
}

.aa-contact-card a:hover,
.aa-contact-mini-link:hover {
    color: var(--contact-green);
}

.aa-contact-mini-link {
    display: inline-block;
    color: var(--contact-green) !important;
    font-size: .9rem;
    font-weight: 500;
    margin-top: .65rem;
    text-decoration: none;
}

.aa-contact-map {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}

.aa-contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.15) contrast(1.05);
}

.aa-contact-map::after {
    content: 'Map placeholder';
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    color: rgba(255, 255, 255, .55);
    font-family: var(--fontSans);
    font-size: 1rem;
    letter-spacing: .25em;
    text-transform: uppercase;
}

.aa-contact-promo-card {
    background: #fff;
    padding: clamp(2rem, 4vw, 3.25rem);
    height: 100%;
}

.aa-contact-promo h3 {
    color: var(--contact-ink);
    font-size: clamp(1.45rem, 2vw, 2.1rem);
    line-height: 1;
    letter-spacing: -.01em;
}

.aa-contact-promo p {
    max-width: 620px;
    margin-bottom: .85rem;
}

.aa-contact-cta {
    border-top: 4px solid var(--contact-green);
    color: #fff;
}

.aa-contact-cta h2 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    letter-spacing: -.01em;
    margin-bottom: .35rem;
}

.aa-contact-cta p {
    color: rgba(255, 255, 255, .74);
}

.aa-contact-cta-button {
    background: var(--contact-green);
    color: #fff;
    display: inline-block;
    font-family: var(--fontSans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .28em;
    min-width: 260px;
    padding: 1rem 1.75rem;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.aa-contact-cta-button:hover,
.aa-contact-cta-button:focus {
    background: var(--contact-green-dark);
    color: #fff;
}

.aa-contact-status {
    display: none;
    border-radius: 0;
    margin-top: 1rem;
}

@media (max-width: 767.98px) {
    .aa-contact-card {
        padding: 1.25rem;
    }
}


/****/
/**start @media sections**/
@media (max-width: 575.98px) {
  #heroCarousel .headline {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  .hero-logo-box img {
    max-width: 80%;
  } 
  
}



@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;
}

/* =========================================================
   WHAT PAGE ONLY – simplified project tiles
   Used by what/index.php simplified Bootstrap grid.
   ========================================================= */
body#what #projectGridSimple .what-project-card {
  background-color: var(--dkGray);
}

body#what #projectGridSimple .what-project-tile {
  position: relative;
  width: 100%;
  min-height: 100px;
  overflow: hidden;
  background-color: var(--dkGray);
}

body#what #projectGridSimple .what-project-tile-lg {
  height: clamp(110px, 12vw, 180px);
}

body#what #projectGridSimple .what-project-tile-sm {
  height: clamp(90px, 9vw, 140px);
}

body#what #projectGridSimple .what-project-default,
body#what #projectGridSimple .what-project-hover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  transition: opacity .25s ease, background-color .25s ease;
}

body#what #projectGridSimple .what-project-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 72%;
  max-height: 68%;
  object-fit: contain;
}

body#what #projectGridSimple .what-project-fallback {
  max-width: 90%;
  color: #fff;
  font-family: var(--fontSans);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}

body#what #projectGridSimple .what-project-hover {
  background-color: var(--greenNew);
  color: #fff;
  opacity: 0;
  z-index: 2;
}

body#what #projectGridSimple .what-project-card:hover .what-project-hover,
body#what #projectGridSimple .what-project-card:focus-within .what-project-hover {
  opacity: 1;
}

body#what #projectGridSimple .what-project-card:hover .what-project-default,
body#what #projectGridSimple .what-project-card:focus-within .what-project-default {
  opacity: 0;
}

body#what #projectGridSimple .what-project-client {
  color: #fff;
  font-family: var(--fontSans);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}

body#what #projectGridSimple .what-project-title {
  color: #fff;
  font-family: var(--fontSans);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

body#what #projectGridSimple .what-project-link {
  color: #fff;
  font-family: var(--fontSans);
  font-size: .85rem;
  font-weight: 300;
  text-decoration: underline;
  text-transform: uppercase;
}

body#what #projectGridSimple .what-project-link:hover,
body#what #projectGridSimple .what-project-link:focus {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 576px) {
  body#what #projectGridSimple .what-project-tile-lg,
  body#what #projectGridSimple .what-project-tile-sm {
    height: 120px;
  }
}

/* WHAT PAGE ONLY – deliverable pills inside project tile hover state */
body#what #projectGridSimple .what-project-deliverables {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  max-width: 90%;
}

body#what #projectGridSimple .what-project-pill {
  display: inline-block;
  padding: .15rem .45rem;
  border-radius: 999px;
  background-color: rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--fontSans);
  font-size: .68rem;
  font-weight: 300;
  line-height: 1.1;
  text-transform: uppercase;
}