@charset "utf-8";
/* CSS Document */

:root {
  --color-midnight: #002B49;
  --color-clementine: #F1A053;
  --color-lightblue: #90BFE6;
  --color-sunglow: #FFCC33;
  --color-turquoise: #5CE0D8;
  --color-midblue: #3778C2;
  --color-orange: #FB8122;
  --color-palegray: #BFBFBF;
  --color-iron: #414042;
  --color-white: #FFFFFF;
--color-black: #000000;
--color-neutral: #F5F7FA;
--color-lightturq: #bdf2ef;
}


/* === Global Styles === */
body {
	
  background-color: var(--color-white);
  color: var(--color-midnight);
  font-family: 'Open Sans', sans-serif;
	padding-top: var(--nav-h);
}
.home-bg {

  background: linear-gradient(to right, #3778C2 0%, #90BFE6 85%, #A5CCE7 100%);
}
.coach-bg {

  background: linear-gradient(to right, #052c49 0%, #3778C2 45%, #5ce0d8 85%, #bdf2ef 100%);
}
.leader-bg {

  background: linear-gradient(to right, #f1a053 0%, #fb8122 45%, #fb8122 80%, #ffcc33 100%);
}
.hr-bg {
	
	background: linear-gradient(to right, #052c49 0%, #3778C2 65%, #052c49 100%);
}

/* === Navbar === */
.navbar {
  background-color: var(--color-midnight);
	font-weight: 600;
}
/* highlight the current page link */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--color-lightblue);
}

.navbar-brand img {
  height: 70px;
}

.navbar .nav-link,
.navbar .navbar-brand {
  color: var(--color-white);
}

.navbar-nav .nav-item {
  margin-right: 2rem; /* or 2rem for more space */
}

/* === Navbar link hover color (light blue) === */

.navbar .nav-link:hover {
  color: var(--color-lightblue);
}

.navbar-nav .nav-item:last-child {
  margin-right: 0;
}

/* === Navbar button: light blue with white hover === */
.navbar .btn-lightblue {
  background-color: var(--color-lightblue);
  color: var(--color-white);
  border: none;
  font-weight: 600;  /* semi-bold (use 700 for bold) */
}

.navbar .btn-lightblue:hover {
  background-color: var(--color-white);
  color: var(--color-midnight);
}
.navbar .btn-dk {
  background-color: var(--color-midnight);
  color: var(--color-white);
  border: 2px solid var(--color-white);
  font-weight: 600;
  box-shadow: 0 0 4px #EBFCFF,
              0 0 8px #00ffef,
              0 0 12px #446fe9;
  transition: all 0.3s ease;
}

.navbar .btn-dk:hover {
  background-color: var(--color-white);
  color: var(--color-midnight);
  border: 2px solid var(--color-midblue);
  box-shadow: 0 0 6px #EBFCFF,
              0 0 12px #00ffef,
              0 0 20px #EBFCFF;
}
/* Dropdown menu background */
.dropdown-menu {
  background-color: var(--color-white);
}

/* Dropdown items text color */
.dropdown-menu .dropdown-item {
  color: var(--color-midnight);
}

/* Dropdown item hover background & text color */
.dropdown-menu .dropdown-item:hover {
  background-color: var(--color-lightblue);
  color: var(--color-midnight);
  font-weight: 600;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item[aria-current="page"]{
  background-color: var(--color-lightblue);
  color: var(--color-midnight);
  font-weight: 600;
}
.hero-section .dropdown-menu { z-index: 1100; }
/* === Headings (use white) === */
/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--color-white); font-weight: bold; }
.highlight { color: var(--color-lightblue); }

/* Accent text */
.text-lightblue { color: var(--color-lightblue); }
.text-midblue { color: var(--color-midblue); }
.text-midnight { color: var(--color-midnight); }
.text-turquoise { color: var(--color-turquoise); }
.text-sunglow { color: var(--color-sunglow); }
.text-clementine { color: var(--color-clementine); }
.text-orange { color: var(--color-orange); }
.text-lightturq { color: var(--color-lightturq); }

/* Section backgrounds */
.bg-lightblue { background-color: var(--color-lightblue); color: var(--color-white); }
.bg-turquoise { background-color: var(--color-turquoise); color: var(--color-white); }
.bg-midblue { background-color: var(--color-midblue); color: var(--color-white); }
.bg-sunglow { background-color: var(--color-sunglow); color: var(--color-white); }
.bg-clementine { background-color: var(--color-clementine); color: var(--color-white); }
.bg-midnight { background-color: var(--color-midnight); color: var(--color-white); }
.bg-palegray { background-color: var(--color-palegray); color: var(--color-midnight); }
.bg-white { background-color: var(--color-white); color: var(--color-midnight); }
.bg-neutral {background-color: var(--color-neutral); color: var(--color-midnight); }

.bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: white; /* Optional: ensures text is readable */
  overflow: hidden;
}

.bg-image::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Adjust opacity and color */
  z-index: 1;
}

.bg-image > * {
  position: relative;
  z-index: 2;
}
.bg-imageblu {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; width: 100%;
	z-index: 1;
	opacity: 65%;
  overflow: hidden;
}
/* Radial blue scrim (distinct from hero's linear) */
.bg-imageblu--radial::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      1000px 520px at 22% 48%,
      rgba(0, 98, 168, .42) 0%,
      rgba(0, 98, 168, .24) 42%,
      rgba(0, 98, 168, .12) 60%,
      rgba(0, 98, 168, 0) 75%
    );
  pointer-events: none;
  z-index: 0; /* behind your card */
}
/* Full-bleed background image */
.bg-cover {
	position: relative;
  min-height: 520px;
  background-size: cover;
  background-position: center;
}

/* Generic linear scrim (like your hero, if needed elsewhere) */
.scrim--linear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,16,28,.35) 0%,
    rgba(0,16,28,0) 55%,
    rgba(0,16,28,.45) 100%
  );
  pointer-events: none;
}

/* NEW: Team Leaders blue radial scrim (distinct from hero) */
.scrim--radial-team::before {
  content: "";
  position: absolute;
  inset: 0;
  /* ellipse centered slightly left so it sits behind the card */
  background:
    radial-gradient(
      1000px 520px at 25% 45%,
      rgba(var(--team-blue-rgb, 0,98,168), .42) 0%,
      rgba(var(--team-blue-rgb, 0,98,168), .24) 40%,
      rgba(var(--team-blue-rgb, 0,98,168), .12) 58%,
      rgba(var(--team-blue-rgb, 0,98,168), 0) 72%
    );
}

/* Nicer shadow for floating cards */
.shadow-xl { box-shadow: 0 20px 50px rgba(9, 30, 66, .18); }

.bg-top-center {
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
	
}


/* Buttons */
.btn { border-radius: 30px; padding: 0.6rem 1.5rem; font-weight: 600; z-index:5; text-decoration: none !important; }
.btn:hover { font-weight: 400;}
.btn-white { background-color: var(--color-white); color: var(--color-midnight); border: none; }
.btn-white:hover { background-color: var(--color-midnight); color: var(--color-lightblue); opacity: 0.8; }
.btn-midblue { background-color: var(--color-midblue); color: var(--color-white); border: none; }
.btn-midblue:hover { background-color: var(--color-midblue); color: var(--color-white); border: none; }
.btn-lightblue { background-color: var(--color-lightblue); color: var(--color-midnight); border: none; }
.btn-lightblue:hover { color: var(--color-white); opacity: 0.8; }
.btn-turquoise { background-color: var(--color-turquoise); color: var(--color-midnight); border: none; }
.btn-turquoise:hover { background-color: var(--color-lightturq); color: var(--color-midnight); opacity: 0.8; }
.btn-sunglow { background-color: var(--color-sunglow); color: var(--color-midnight); border: none; }
.btn-sunglow:hover { color: var(--color-white); opacity: 0.8; }
.btn-clementine { background-color: var(--color-clementine); color: var(--color-white); border: none; }
.btn-clementine:hover { opacity: 0.8; }
.btn-orange { background-color: var(--color-orange); color: var(--color-white); border: none; }
.btn-orange:hover { opacity: 0.8; }
.btn-midnight { background-color: var(--color-midnight); color: var(--color-white); border: none; }
.btn-midnight:hover { background-color: var(--color-midblue); color: var(--color-white); }
.btn-outline-clementine {background-color: transparent; color: var(--color-clementine);  font-weight: 600; text-decoration: none !important; border: 2px solid; border-radius: 30px; border-color: var(--color-clementine); }
.btn-outline-clementine:hover { background-color: var(--color-clementine); color: var(--color-white); opacity: 0.8;}
.btn-outline-lightblue {background-color: transparent; color: var(--color-lightblue);  font-weight: 600; text-decoration: none !important; border: 2px solid; border-radius: 30px; border-color: var(--color-lightblue); }
.btn-outline-lightblue:hover { background-color: var(--color-lightblue); color: var(--color-midnight); }
.btn-outline-turquoise {background-color: transparent; color: var(--color-turquoise);  font-weight: 600; text-decoration: none !important; border: 2px solid; border-radius: 30px; border-color: var(--color-turquoise); }
.btn-outline-turquoise:hover { background-color: var(--color-turquoise); color: var(--color-white); opacity: 0.8;}
.btn-outline-midblue {background-color: transparent; color: var(--color-midblue);  font-weight: 600; text-decoration: none !important; border: 2px solid; border-radius: 30px; border-color: var(--color-midblue); }
.btn-outline-midblue:hover { background-color: transparent; color:var(--color-midblue);  opacity: 0.8;}
.btn-outline-midnight { background-color: transparent; color: var(--color-midnight);  font-weight: 600; text-decoration: none !important; border: 2px solid; border-radius: 30px; border-color: var(--color-midnight); }
.btn-outline-midnight:hover { background-color: transparent; color:var(--color-midnight); opacity: 0.8; }

.btn-gradient-coach {
  color: var(--color-white); /* or dark text if your gradient is light */
  background-image: linear-gradient(to right, #052c49 0%, #3778C2 45%, #5ce0d8 85%, #bdf2ef 100%);
  border: none;
  transition: opacity 0.3s ease;
}

.btn-gradient-coach:hover {
  opacity: 0.9; /* subtle hover effect */
}
.btn-primary { 
	background-color: var(--color-midnight); 
	border: none; 
	color: var(--color-white); 
	font-weight: 400; 
}
.btn-primary:hover { background-color: var(--color-midblue); color: var(--color-white); }
.btn-info { background-color: var(--color-iron); border: none; color: var(--color-white); font-weight: 400; }
.btn-info:hover { background-color: var(--color-palegray); color: var(--color-iron); }

/* Fixed invalid variables (use hex or existing vars) */
.btn-dark-hero  {
  background-color: var(--color-black); /* fixed */
  color: var(--color-white);
  border-radius: 30px; font-weight: 600; text-decoration: none !important;
  box-shadow: 0 0 4px #EBFCFF, 0 0 8px #f7ffff, 0 0 12px #539fbc;
  transition: all 0.3s ease; padding: 0.6rem 1.5rem;
}
.btn-dark-hero:hover {
  background-color: var(--color-lightblue); /* fixed */
  opacity: 0.5; border: 2px solid #000; font-weight: 400;
  box-shadow: 0 0 6px #EBFCFF, 0 0 12px #00ffef, 0 0 15px #446fe9;
}
.btn-sky-hero  {
  background-color: var(--color-lightblue);
  color: var(--color-white);
  border-radius: 30px; font-weight: 600; text-decoration: none !important;
  box-shadow: 0 0 4px #EBFCFF, 0 0 8px #f7ffff, 0 0 12px #539fbc;
  transition: all 0.3s ease; padding: 0.6rem 1.5rem;
}
.btn-sky-hero:hover {
  background-color: var(--color-lightblue);
  opacity: 0.5; border: 2px solid #000; font-weight: 400;
  box-shadow: 0 0 6px #EBFCFF, 0 0 12px #00ffef, 0 0 15px #446fe9;
}
/* Reusable glow you can add to any button */
.btn-glow {
box-shadow: 0 0 4px #EBFCFF, 0 0 8px #f7ffff, 0 0 12px #539fbc;
	z-index: 4;
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-glow:hover {
box-shadow: 0 0 6px #EBFCFF, 0 0 12px #00ffef, 0 0 15px #446fe9;
transform: translateY(-1px);
}

 a {
  text-decoration: none;
  color: inherit; /* Keeps text consistent with parent color */
  transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Hover/focus: underline + accent color */
/* Global links (for content, navbar, etc.) */
a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  text-decoration: underline;
  color: var(--color-midblue);
}

/* Footer-specific links new scope*/
 
  footer.foot-brite {
    background-color: var(--color-midnight);
    color: var(--color-white);
  }
  footer.foot-brite a {
    text-decoration: none;
    color: var(--color-white);
    transition: color .2s ease;
  }
  footer.foot-brite a:hover,
  footer.foot-brite a:focus {
    text-decoration: none;
    color: var(--color-lightblue);
  }
  footer.foot-brite .mini a { color: var(--color-lightblue); }
  footer.foot-brite .mini a:hover { color: var(--color-white); }

/* === HOMEPAGE HERO SECTION === */
.jumbotron {
  position: relative;
  background: url("../images/light-bulb-8501930_640-BRITE.webp") no-repeat center center;
  background-size: cover;
  background-color: rgba(00,16,28, 0.9); /* Fallback */
  overflow: hidden;
	padding-top: 10px; /* adjust if your navbar is taller */
	padding-bottom: 3rem;
  height: 100vh;
  z-index: 1;
}
.jumbotron .text-white {
  padding-top: 2rem;
}
.jumbotron p.lead {
  font-size: 1.25rem;
}
/* limit the lift to the homepage jumbotron only */
.jumbotron .hero-circuit,
.jumbotron .divider-circuit { bottom: 8rem; }

@media (min-width: 992px) {
  .jumbotron .text-white {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px){ .jumbotron { padding-bottom: 4rem; } }
/* ===Bulb Spray ===*/

canvas#sprayCanvas {
  position: absolute;
  top: 0;
  right: 0;
  height: 110%;
  width: 50%; /* Only animate over the right half */
  z-index: 2; /* Behind text overlay */
  pointer-events: none;
}
    
.hero-circuit {
  position: relative;
  bottom: 8rem; /* Raise the divider by 2-10rem from the bottom */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
  pointer-events: none;
}
.hero-circuit-midblue {
  position: relative;
background: url("../assets/connector-divider-midblue-01.svg") no-repeat center bottom;
	bottom: 8rem;
  width: 100%;
 height: auto;
 z-index: 2;
}


.hero-circuit svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

.jumbotron .hero-circuit,
.jumbotron .hero-circuit-midblue {
  position: absolute;       /* keep it positioned */
  left: 0;
  right: 0;
  bottom: 1.75rem;                /* anchor to bottom of jumbotron */
  width: 100%;
  height: auto;
  margin-top: 0;            /* no weird margin pushing it */
}
@media (min-width: 768px){
  .jumbotron .hero-circuit,
  .jumbotron .hero-circuit-midblue { bottom: 2.25rem; }
}

.jumbotron .hero-circuit { margin-top: clamp(1rem, 2vw, 2.5rem); }

.overlay {
  z-index: 3;
  position: relative;
  padding-left: 2rem;
  padding-right: 2rem;
	 min-height: 100vh; /* full viewport height */
  height: 100%;
  flex: 1 1 auto;
  width: 100%;
	max-width: 100vw;
   background-color: rgba(00,16,28, 0.3);
  display: flex;
	align-items: center;
  justify-content: flex-start;
	flex-wrap: wrap;
}

@media (max-width: 768px) {
  .overlay {
    padding-left: 1rem;
    padding-right: 1rem;
	  background-color: rgba(00,16,28, 0.3);
  }
}

.glow {
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 12;
      fill: none;
      stroke-dasharray: 140 1850;
      stroke-dashoffset: 0;
      animation-timing-function: linear;
    }
  .energizer-glow {
		  fill: none;
	  }
    .glow-clementine {
      stroke: url(#gradClementine);
      filter: url(#blurClementine);
      animation: animateClementine 15s linear infinite;
    }
@keyframes animateClementine {
      0% { stroke-dashoffset: 0; opacity: 0.8; }
      30% { opacity: 0.9; }
      100% { stroke-dashoffset: -2200; opacity: 1; }
    }
.tglow {
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 14;
      fill: none;
      stroke-dasharray: 140 1850;
      stroke-dashoffset: 0;
      animation-timing-function: linear;
    }
.glow-shadow { filter: drop-shadow(0 0 18px #b3d9ff) drop-shadow(0 0 24px #3399ff);}
    .glow-turq {
      stroke: url(#gradTurquoise);
      filter: url(#blurTurq);
      animation: animateTurq 15s linear infinite;
    }

    @keyframes animateTurq {
      0% { stroke-dashoffset: 0; opacity: 0.5; }
      30% { opacity: 0.7; }
      100% { stroke-dashoffset: -2300; opacity: 0.8; }
    }


/* Midnight background section */
.section-highlight {
  background-color: var(--color-midnight);
}


/* Headline */
.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-midnight);
  margin-bottom: 1rem;
}
/* compare card section */
.comp-card-section {
  position: relative;
  background: linear-gradient(to right, #3778C2 0%, #90BFE6 66%, #A5CCE7 100%);
  overflow: hidden;
  padding-bottom: 3rem; /* Optional: adjust as needed */
	 z-index: 1;
}
/* === was Price Card ===*/	
.compare-card {
	isolation: isolate; /* ← Helps prevent background bleeding */
    position: relative; /* ← Needed for 'isolation' to work properly */
	max-width: 600px;           /* Limits width on large screens */
    width: 100%;                /* Responsive for smaller screens */
    margin: 3rem auto;          /* Centers the card horizontally */
    padding: 3rem;              /* Adds spacing inside the card */
    background-color: white !important; /* ← Forces it */
    color: var(--color-midnight); /* or iron text color here */
    transition: transform 0.3s ease;
    overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	    border-radius: 12px;        /* Optional: softens the card edges */

}
.compare-card-dk {
	isolation: isolate; /* ← Helps prevent background bleeding */
    position: relative; /* ← Needed for 'isolation' to work properly */
	max-width: 600px;           /* Limits width on large screens */
    width: 100%;                /* Responsive for smaller screens */
    margin: 3rem auto;          /* Centers the card horizontally */
    padding: 3rem;              /* Adds spacing inside the card */
    background-color: var(--color-midnight) !important; /* ← Forces it */
    color: var(--color-white); /* or iron text color here */
    transition: transform 0.3s ease;
    overflow: hidden;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	    border-radius: 12px;        /* Optional: softens the card edges */
}
@media (max-width: 768px) {
    .compare-card {
        padding: 1.5rem;
        max-width: 90%;
    }
}
.compare-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 24px;
    height: 24px;
    background: var(--color-midblue);
	color: var(--color-white);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
}

.comp-badge {
    color: var(--color-white);
    background-color: var(--color-midblue);
    backdrop-filter: blur(5px);
    padding: 0.3rem 0.75rem;
}

/* --- Restore pulsing sunglow bullets in compare list --- */

/* stat counter */
.stat-circle {
  width: 250px;
  height: 250px;
  border: 25px solid var(--color-midblue); /* Sunglow yellow or light blue */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.stat-count {
  font-size: 10rem;
  font-weight: 800;
  color: var(--color-white); /* Adjust to match as needed */
	text-align: center;
  line-height: 1;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  opacity: 0;
  transform: translateY(10px);
	text-shadow: 4px 2px 6px rgba(0, 0, 0, 0.5); /* soft gray glow */
}
.stat-count.visible {
  opacity: 1;
  transform: translateY(0);
}

.stat-subtitle {
  font-size: 1.5rem;
  color: var(--color-midnight);
  text-align: center;
}
@media (max-width: 576px) {
  .stat-count {
    font-size: 6rem;
  }
}
/* Base pulse */ 
.pulse-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: 0.5rem;
  align-self: start;
  animation: pulse 1.5s infinite ease-in-out;
  transition: background-color 0.3s ease;
  cursor: pointer;
  position: relative;
  background-color: var(--dot, var(--color-sunglow));
}

.pulse-dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 0.5in;
  z-index: -1;
  background-color: var(--dot, var(--color-sunglow));
}

.pulse--sunglow    { --dot: var(--color-sunglow); }
.pulse--lightblue { --dot: var(--color-lightblue); }
.pulse--midblue   { --dot: var(--color-midblue); }
.pulse--clementine    { --dot: var(--color-clementine); }
.pulse--turq      { --dot: var(--color-turquoise); }

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.8; }
}



/* --- text-column: pulse-dot bullets --- */
.brite-list li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .75rem;
}

.brite-list .pulse-dot {
  position: absolute;
  left: 0;
  top: .45em;           /* centers the dot on first line */
  width: 12px;
  height: 12px;
  margin: 0;            /* kill earlier margin */
  border-radius: 50%;
  background-color: var(--dot, var(--color-sunglow));
  animation: pulse 1.5s ease-in-out infinite;
}


/* === HERO SECTION === */
.hero-section {
  position: relative;
	flex-direction: column;
	display: flex;
	text-align: left !important;;
  min-height: 860px;
  padding-top: 12rem;   /* just spacing for text */
  padding-bottom: 0;
  overflow: visible;  /* avoid clipping the divider glow */
  z-index: 0;
  /* defaults */
  --hero-bg: url('../images/how-it-works-hero-01.jpg');
  --hero-overlay: rgba(0, 16, 28, 0.6);

  background: var(--hero-bg) top / cover no-repeat;
}


.hero-section::before {
  content: "";
  position: absolute; 
  inset: 0;
  background: var(--hero-overlay);
  z-index: 0;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}
.hero-section .divider-circuit {
	position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;   /* flush left */
  margin-right: -50vw;  /* flush right (prevents subtle gaps on some browsers) */
  margin-top: auto;     /* pins it to the bottom of the flex hero */
	margin-bottom: 0 !important; /* pulls it down */
  overflow: visible;
  z-index: 1; /* keep above hero overlay */
}

/* Optional: animation speed variable scoped to hero */
.hero-section.hero--coach {
  --lead-duration: 6s; /* adjust speed for coach hero */
}
/* Variants */
.hero--coach {
  --hero-bg: url('../images/coach_hero-a581659677.webp');
  --hero-overlay: rgba(0, 32, 64, 0.65); /* slightly bluer tint */
}

.hero--hr {
  --hero-bg: url('../images/hr-learn_as668275395.webp');
  --hero-overlay: rgba(0, 16, 28, 0.70); /* warmer tint */
}

.hero--team {
  --hero-bg: url('../images/team-hero-as727788591.webp');
  --hero-overlay: rgba(0, 16, 28, 0.4);  /* lighter overlay */
}

/* glow title */
.hero-title.glow {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700; line-height: 1.05;
  text-shadow: 0 0 8px rgba(235,252,255,.7), 0 0 10px rgba(0,255,239,.8), 0 0 20px rgba(83,159,188,.9);
}
.hero-text {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700; 
  line-height: 1;/* line spacing */
  text-shadow:
	  0 0 8px rgba(235,252,255,.7), 0 0 10px rgba(0,255,239,.8), 0 0 20px rgba(83,159,188,.9);
}
.blu-title.glow {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700; line-height: 1.05;
  text-shadow: 0 0 8px rgba(235,252,255,.7), 0 0 10px rgba(144, 191, 230,.9), 0 0 20px rgb(144, 191, 230,.5);
}
.hero-section h1,
.hero-section h2 { margin: 2px; }                  /* kill default heading margin */

.hero-section .display-2 {                        /* make middle line match others */
  font-weight: 700;
  line-height: .9;
	margin-top: .25em;
 margin-bottom: .15em;
}
.hero-section { --hero-gap: .18em; }           /* tweak once */
.hero-section .display-2 { margin-bottom: var(--hero-gap); }

@media (max-width: 420px) {
  .hero-section .display-2 { line-height: .98; }
}
.hero-inner{
  max-width: 1200px;   /* tune as you like */
  margin-left: 3rem;      /* left-anchored */
  margin-right: auto;  /* not centered */
  margin-top: clamp(3rem, 12vh, 14rem);  /* push block down */
}
/* text sits on top */
.z-top, .text-block {
  position: relative;
  z-index: 2;
}
 .text-block { 
  color: var(--color-white);
	 font-size: clamp(1rem, 1.5vw, 2rem);
	 font-weight:300; line-height: 1.5;
  text-align: start !important;
  padding-left: 1rem;
  padding-top: 2rem; }

.text-shadow-midnight {
  text-shadow: 0 0 8px rgba(5, 43, 72,  0.7),
    0 0 15px rgba(55, 120, 194,  0.8),
    0 0 20px rgba(55, 120, 194,  0.9);
  border-radius: .5rem; /* rounded feel to match background shape */
  padding: 0.25rem 0.5rem; /* space so shadow isn’t clipped */
  background-color: transparent; /* keep background clear */
}
.text-shadow-wht {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5),
    0 0 15px rgba(178, 211, 238, 0.8),
    0 0 20px rgba(55, 120, 194,  0.3);
  border-radius: .5rem; /* rounded feel to match background shape */
  padding: 0.25rem 0.5rem; /* space so shadow isn’t clipped */
  background-color: transparent; /* keep background clear */
}

.text-shadow-sky {
  text-shadow: 0 0 8px rgba(55, 120, 194,  0.6),
    0 0 15px rgba(178, 211, 238, 0.8),
    0 0 20px rgba(255, 255, 255, 0.5);
  border-radius: .5rem; /* rounded feel to match background shape */
  padding: 0.25rem 0.5rem; /* space so shadow isn’t clipped */
  background-color: transparent; /* keep background clear */
}

.text-shadow-midb {
  text-shadow: 0 0 8px rgba(55, 120, 194,  0.9),
    0 0 15px rgba(55, 120, 194, 0.6),
    0 0 20px rgba(55, 120, 194, 0.4);
  border-radius: .5rem; /* rounded feel to match background shape */
  padding: 0.25rem 0.5rem; /* space so shadow isn’t clipped */
  background-color: transparent; /* keep background clear */
}

.btn-clementine-hero {
  background-color: var(--color-clementine); color: var(--color-white);
  border: none; border-radius: 30px; padding: 0.6rem 1.5rem; text-decoration: none; font-weight: 600;
  box-shadow: 0 0 4px #EBFCFF, 0 0 8px #f7ffff, 0 0 12px #539fbc; transition: all 0.3s ease;
}
.btn-clementine-hero:hover { background-color: #ff9100; font-weight: 400; box-shadow: 0 0 6px #EBFCFF, 0 0 12px #00ffef, 0 0 15px #446fe9; }

/* Glow animation */
.glow-animate { filter: drop-shadow(0 0 6px #b3d9ff) drop-shadow(0 0 14px #3399ff); animation: glowPulse 4s ease-in-out infinite; 
}

@keyframes glowPulse {
  0% { filter: drop-shadow(0 0 6px #b3d9ff) drop-shadow(0 0 14px #3399ff); }
  50% { filter: drop-shadow(0 0 26px #3399ff) drop-shadow(0 0 54px #66b3ff); }
  100% { filter: drop-shadow(0 0 6px #b3d9ff) drop-shadow(0 0 14px #3399ff); }
}

@media (min-width: 768px) { .hero-caption h1 { font-size: 4rem; } }
@media (min-width: 1200px) { .hero-caption h1 { font-size: 4.5rem; } }



/* Testimonials */
/* 1) Make cards and icon boxes fully opaque */
.testimonial-card { 
	background: var(--color-white) !important; /* for transparency use rgba(255,255,255,0.6)*/
	width: 100%; position: relative; 
	border-radius:16px; overflow: hidden; 
}
.quote-box{
flex: 0 0 100px;          /* don't shrmidnight; reserve width */
  width:100px; height:100px;      /* << size restores visible area */
  display:block; align-items:center; justify-content:center;
	border-radius:16px;
  background: transparent;/* or var(--color-white) */
}


.testimonial-card blockquote{ font-size:1.05rem; line-height:1.6; position:relative; padding-left:1.4rem; }


/* Mobile testimonial “flip” layout */
.testimonial-mobile {
  border-radius: 18px;
}

.testimonial-mobile blockquote {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-midnight);
}

/* smaller top quote icon */
.quote-top-icon {
  width: 48px;
  height: auto;
  display: inline-block;
  opacity: .95;
}

/* optional subtle pill around the quote on tiny screens */

@media (max-width: 575.98px) {
  .testimonial-mobile .card-body {
    background: var(--color-white) !important;
    border-radius: 18px;
	  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  }
}

#testimonials .card-body { color: var(--color-midnight); }

#testimonials .card:hover .card-title,
#testimonials .card:hover .card-text {
  color: inherit; /* keep text readable on hover */
}




/* Role cards / cards */
.role-cards-section { position: relative; background: linear-gradient(to right, #3778C2 0%, #90BFE6 66%, #A5CCE7 100%); overflow: hidden; padding-bottom: 3rem; z-index: 0; }
.card { background-color: transparent !important; border: none; box-shadow: none !important; text-align: left; padding: 0; }
.card-img-top { border-radius: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.15); object-fit: cover; height: 200px; width: 100%; transition: opacity 0.3s ease; }
.card:hover .card-img-top { opacity: 0.8; }
.card a, .card a * { text-decoration: none !important; color: inherit; }
.card small { font-size: 0.875rem; color: var(--color-palegray); display: block; }
.card-title { color: var(--color-midnight); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; margin: 0.75rem 0; }
.card-body { color: var(--color-midnight); font-weight: 400; font-size: 1rem; line-height: 1.5; }
.card .btn-primary { font-weight: 600; border-radius: 30px; color: var(--color-white); }
.card-body .btn { width: 100%; max-width: 200px; }

/* Divider circuit */
.hero-circuit, 
.divider-circuit { position: relative; bottom: 12rem; left: 0; width: 100%; z-index: 1; pointer-events: none; }
.divider-circuit-midblue { position: relative; }
.divider-circuit svg { width: 100%; height: auto; display: block; }
.divider-circuit-midblue img { display: block; width: 100%; height: auto; z-index: 1; position: relative; }
.divider-circuit-midblue .glow-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; }


.role-cards-section .divider-circuit,
.role-cards-section .divider-circuit-midblue {
  bottom: 0 !important;
}

/* gentle spacing so the line sits where we want */

.role-cards-section .divider-circuit { margin-top: clamp(0.5rem, 1.5vw, 1.5rem); }
.divider-circuit-turquoise {
  position: relative;
  bottom: 12rem; /* same offset */
  left: 0;
  width: 100vw;  /* full viewport width */
  z-index: 1;
  pointer-events: none;
}

.divider-circuit-turquoise svg {
  width: 100vw;
  height: auto;
  display: block;
}

.divider-circuit-turquoise img {
  display: block;
  width: 100vw;
  height: auto;
  z-index: 1;
  position: relative;
}

.divider-circuit-turquoise .glow-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.hero-section .divider-circuit {
  bottom: 0 !important;
}
/* Sunburst sections */
.sunburst-section { position: relative; overflow: hidden; padding: 4rem 2rem; background-color: var(--color-sunglow); z-index: 1; }
.sunburst-section::before { content: ''; position: absolute; inset: 0; background-image: url("../assets/sunglow-section.svg"); background-repeat: no-repeat; background-position: center top; background-size: cover; z-index: -1; opacity: 1; }
.sunburst-section.blue::before { background-image: url("../assets/blues-section.svg"); }
.sunburst-section-org { position: relative; overflow: hidden; padding: 4rem 2rem; background-color: white; background-image: url("../assets/orange-section-01.jpg"); background-repeat: no-repeat; background-position: 10% top; background-size: cover; }

/* About BRITE responsive split */
.about-brite-section { background: linear-gradient(to right, #FFFFFF 66%, var(--color-midnight) 66%); overflow: hidden; padding: 0 2rem; }
@media (max-width: 767.98px) { .about-brite-section { background: #FFFFFF !important; padding: 1.5rem; } }
.text-content { padding: 2rem; background: none; position: relative; z-index: 2; }
.brite-image-col { margin-bottom: 2rem; }

/* ===== PUZZLE BULB v2 — scoped, semantic, variable-driven ===== */

/* Container + sizing */
.puzzlebulb { position: relative; display:flex; justify-content:center; align-items:center; padding:0; }
.puzzlebulb .puzzlebulb-svg { width:100%; max-width:600px; height:auto; display:block; }

/* Defaults / tokens (override with theme classes below) */
.puzzlebulb{
  --bulb-base: var(--color-midblue);

  /* Sunglow (homepage) */
  --ring-1: #fc3;
  --ring-2: #ffdb71;
  --ring-3: #fff0c1;

  /* Blues (leaders) */
  --ring-1b:#C7DBF1;
  --ring-2b:#D1E1F4;
  --ring-3b:#E1EBF7;

  /* Turquoise (coaches) */
  --ring-1t:#5ce0d8;
  --ring-2t:#8de9e4;
  --ring-3t:#bdf2ef;
}

/* SEMANTIC names you can use in the SVG markup now */
.puzzlebulb-svg .bulb-base   { fill: var(--bulb-base); }
.puzzlebulb-svg .ring-inner  { fill: var(--ring-1); }
.puzzlebulb-svg .ring-middle { fill: var(--ring-2); }
.puzzlebulb-svg .ring-outer  { fill: var(--ring-3); }

/* LEGACY BRIDGE: map Illustrator st## ONLY inside the puzzlebulb */
.puzzlebulb-svg .st1  { fill: var(--bulb-base); }         /* base */
.puzzlebulb-svg .st2  { fill: var(--ring-1); }            /* sunglow inner */
.puzzlebulb-svg .st3  { fill: none; }                     /* (kept, no-op) */
.puzzlebulb-svg .st4  { fill: var(--ring-2); }            /* sunglow middle */
.puzzlebulb-svg .st5  { fill: var(--ring-3); }            /* sunglow outer */
.puzzlebulb-svg .st6  { fill: var(--bulb-base); }         /* base alt */
.puzzlebulb-svg .st7  { fill: var(--ring-1b); }           /* blue inner */
.puzzlebulb-svg .st8  { fill: var(--ring-2b); }           /* blue middle */
.puzzlebulb-svg .st9  { fill: var(--ring-3b); }           /* blue outer */
.puzzlebulb-svg .st10 { fill: var(--color-midnight); }    /* base (hiw) */
.puzzlebulb-svg .st11 { fill: var(--color-lightblue); }   /* base alt (hiw) */
.puzzlebulb-svg .st32 { fill: #fc9a4e; }                  /* clementine inner */
.puzzlebulb-svg .st33 { fill: var(--color-clementine); }  /* clementine middle */
.puzzlebulb-svg .st34 { fill: #fdc47a; }                  /* clementine outer */
.puzzlebulb-svg .st15 { fill: var(--ring-1t); }           /* turq inner */
.puzzlebulb-svg .st16 { fill: var(--ring-2t); }           /* turq middle */
.puzzlebulb-svg .st17 { fill: var(--ring-3t); }           /* turq outer */

/* Piece hover (kept, but scoped) */
.puzzlebulb-svg .puzzle-piece path { fill: var(--color-white); transition: fill .3s ease; }
.puzzlebulb-svg .puzzle-piece:hover path { fill: var(--color-lightblue); }

/* THEME toggles (set on a wrapper near the SVG) */
.puzzle--home    { --bulb-base: var(--color-midblue);  --ring-1:#fc3;      --ring-2:#ffdb71;            --ring-3:#fff0c1; }
.puzzle--coaches { --bulb-base: var(--color-midblue);  --ring-1:#5ce0d8;   --ring-2:#8de9e4;            --ring-3:#bdf2ef; }
.puzzle--hr { 
	--bulb-base: var(--color-palegray); 
	--ring-1:#164276;   
	--ring-2:#3778c2;            
	--ring-3:#90bfe6; }
.puzzle--teamleaders  { --bulb-base: var(--color-midblue);  --ring-1:#f87533;   --ring-2:#f88f3e; --ring-3:var(--color-clementine); }

/* Small-screen helper */
@media (max-width:575.98px){
  .puzzlebulb .puzzlebulb-svg { max-width:80%; margin:0 auto; }
}
.puzzlebulb:not(.puzzle--home) .puzzle-piece { opacity: 1; transform: none; }

.bulb-container { position: relative; display: flex; justify-content: center; align-items: center; padding: 0; }

.brite-lightbulb { width: 100%; height: auto; display: block; }
@media (max-width: 575.98px) { .brite-lightbulbhw { max-width: 80%; margin: 0 auto; } }
.puzzle-piece path { fill: var(--color-white);; transition: fill 0.3s ease; }
.puzzle-piece:hover path { fill: var(--color-lightblue); }

/* Drop-in entrance animation for puzzle pieces */

.puzzle-piece {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: transform, opacity;
}

/* On scroll-in */
.puzzle-piece.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* On scroll-out (optional reset state) */
.puzzle-piece.animate-reset {
  opacity: 0;
  transform: translateY(-20px);
}

/* Staggered entrance delay for animate-in */
.puzzle-piece.animate-in:nth-of-type(1) { transition-delay: 0.1s; }
.puzzle-piece.animate-in:nth-of-type(2) { transition-delay: 0.25s; }
.puzzle-piece.animate-in:nth-of-type(3) { transition-delay: 0.4s; }
.puzzle-piece.animate-in:nth-of-type(4) { transition-delay: 0.55s; }
.puzzle-piece.animate-in:nth-of-type(5) { transition-delay: 0.7s; }
.puzzle-piece.animate-in:nth-of-type(6) { transition-delay: 0.85s; }



/* === Mobile tweaks for glow === */
@media (max-width: 575.98px) {
  /* Narrower stroke widths and slightly slower breathing */
  @keyframes hiwPulseWide {
    0%,100% { stroke-width: 28; stroke-opacity: .30; }
    50%     { stroke-width: 48; stroke-opacity: .80; }
	}

  @keyframes hiwPulseSoft {
    0%,100% { stroke-width: 48; stroke-opacity: .20; }
    50%     { stroke-width: 72; stroke-opacity: .60; }
  }

  /* Slow the pulse cycle a bit on phones */
  .hiw-bulb-glow.primary   { animation: hiwPulseWide 3.4s ease-in-out infinite; }
  .hiw-bulb-glow.secondary { animation: hiwPulseSoft 4s   ease-in-out infinite; }
}
/* Tooltips */
.svg-tooltip { position: absolute; background: var(--color-midnight); color: var(--color-white); padding: .5rem .75rem; border-radius: .5rem; font-size: 0.9rem; max-width: 240px; pointer-events: none; box-shadow: 0 6px 16px rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.4s ease; z-index: 9999; }
.svg-tooltip[style*="display: block"] { opacity: 1; }


/* Core glow style: big, rounded stroke with gradient */
      .bulb-glow {
        fill: none;
        stroke: url(#glowGradient);
        stroke-linecap: round;
        stroke-linejoin: round;
        pointer-events: none; /* keep it “behind” interactions */
      }

      /* Primary glow layer (wider pulse) */
      .bulb-glow.primary {
        filter: url(#outerGlow);
        opacity: 0.85;
        animation: pulseWide 2.8s ease-in-out infinite;
      }

      /* Secondary glow layer (even softer, offset in time to feel “full”) */
      .bulb-glow.secondary {
        filter: url(#outerGlowSofter);
        opacity: 0.55;
        animation: pulseSoft 3.4s ease-in-out infinite;
        animation-delay: -1.2s; /* out-of-phase */
      }

      /* “Breathing” the width + opacity makes the glow feel brightening */
      @keyframes pulseWide {
        0%, 100% { stroke-width: 44; stroke-opacity: 0.35; }
        50%      { stroke-width: 72; stroke-opacity: 0.90; }
      }

      @keyframes pulseSoft {
        0%, 100% { stroke-width: 70; stroke-opacity: 0.25; }
        50%      { stroke-width: 98; stroke-opacity: 0.70; }
      }

/* Footer */
footer { background-color: var(--color-midnight); color: var(--color-white); width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 2rem 0; flex-wrap: wrap; position: relative; z-index: 1; }
footer .footer-column { flex: 1; min-width: 200px; margin: 1rem 2rem; }
footer .logo { max-width: 220px; height: auto; margin-bottom: 1rem; }

/* Consent Form */
.consent-form { background: #fff; padding: 2rem; max-width: 500px; color: var(--color-midnight); width: 90%; border-radius: 8px; text-align: left; }
.consent-item { margin: 1rem 0; }
.consent-item span { display: block; color: var(--color-midnight); font-size: 0.9rem; }
.consent-buttons { margin: .5rem 1rem; display: flex; gap: 1rem; justify-content: flex-end; }
.hidden { display: none; }
#consent-form button { padding: 0.8rem; font-size: 1rem; border-radius: 8px; }

/* === BRITE overrides (2025-08-13) — Team Synergy sky-circuit === */
.sky-circuit-section {
  position: relative;
	background: transparent;
  min-height: 900px;
  overflow: hidden;
  z-index: 0;
  padding: 0;
  --lead-duration: 8s;
  --lead-delay: 0s;
  --lag-duration: 14s;   /* use a different value to avoid re-sync */
  --lag-delay: 6s;       /* wait before the 2nd path starts */
}
.sky-circuit-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/energy_team_hm369977292.webp"); /* transparent?*/
  background-repeat: no-repeat;
  background-position: top center;                       /* tweak to taste */
  background-size: cover;         /* responsive control */
  opacity: 0.10;                                            /* only this layer fades */
  pointer-events: none;
  z-index: 0;                                               /* sits under circuits */
  /* Optional: blend into the gradient a bit more
     mix-blend-mode: screen;  // or 'soft-light'/'overlay' depending on your gradient */
}
/* 3) Circuit sky: keep above team (::before) */
.background-circuit-sky {
  background: url("../assets/background-sky-team-01.svg") left center no-repeat !important;
  background-size: cover !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  transform: none !important; /* bumped up */
  left: 0 !important;
}
.sky-circuit-section .bg-sky { opacity: .6; }

.background-circuit-glow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  transform: none !important;
  left: 0 !important;
}/* apply to the overlay ONLY */

.sky-circuit-content {
  position: absolute;
	padding-left: 4rem;
  z-index: 3 !important;   /* ensure above glow and circuits */
}
.circuit-text {
  font-size: clamp(4.5rem, 6vw, 6.5rem);
  font-weight: 600; 
  line-height: .9;/* line spacing */
  text-shadow:
	  0 0 8px rgba(55, 120, 194,  0.6),
    0 0 15px rgba(178, 211, 238, 0.8),
    0 0 20px rgba(255, 255, 255, 0.5);
}

/* AOS fallback — if the JS fails to load, show content instead of keeping it hidden */
html.aos-fallback [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* Team Synergy — travelling glow, uniquely scoped */
.sky-circuit-section .background-circuit-glow svg { width: 100%; height: 100%; display: block; }

.sky-circuit-section .glowbg {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 12;
  fill: none;
  stroke-dasharray: 140 1850;   /* adjust the 2nd value to your path length */
  stroke-dashoffset: 0;
  animation-timing-function: linear;
}

/* empty path group helper if you use it */
.sky-circuit-section .energy-glowbg { fill: none; }

/* Clementine-themed moving pulse for Team Synergy */
.sky-circuit-section .glow-clementine2 {
  stroke: url(#gradClementine2);
  filter: url(#blurClementine2);
  animation: animateClementine2 var(--lead-duration) linear infinite;
  /* keeps your stroke-dasharray/dashoffset from .glowbg */
}

.sky-circuit-section .glow-lead {
  animation-duration: var(--lead-duration);
  animation-delay: var(--lead-delay);
}

.sky-circuit-section .glow-lag {
  animation-duration: var(--lag-duration);
  animation-delay: var(--lag-delay);
}

@keyframes animateClementine2 {
  0%   { stroke-dashoffset: 0;      opacity: 0.8; }
  30%  {                          opacity: 0.9; }
  100% { stroke-dashoffset: -2200; opacity: 1;   }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sky-circuit-section .glow-clementine2 { animation: none; }
}

/* Team Stat cards */

/* 1) Make cards and icon boxes fully opaque */
.stat-card { 
	background: var(--color-white) !important; /* for transparency use rgba(255,255,255,0.6)*/
	width: 100%; position: relative; 
	border-radius:16px; overflow: hidden; 
}
.icon-box{
flex: 0 0 100px;          /* don't shrmidnight; reserve width */
  width:100px; height:100px;      /* << size restores visible area */
  display:block; align-items:center; justify-content:center;
	border-radius:16px;
  background: transparent;/* or var(--color-white) */
}

/* 2) Kill ANY pseudo overlay (contrast band, demos, etc.) */
.stat-card::before,
.media-card::before { content: none !important; 
	background: rgba(0,0,0,.12); 
	filter: blur(10px); 
	z-index: -1;
}

/* Mobile accordion theming */
.accordion-energy .accordion-button {
  background: rgba(0, 43, 73, 0.75);    /* midnight w/ transparency */
  color: #fff;
  border-radius: 12px;
  margin-bottom: .75rem;
}

.accordion-energy .accordion-button:not(.collapsed) {
  background: rgba(55, 120, 194, 0.9);  /* midblue when open */
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 204, 51, .35); /* sunglow ring */
}

.accordion-energy .accordion-item,
.accordion-energy .accordion-collapse {
  background: transparent;
  border: 0;
}

.accordion-energy .accordion-body {
  background: rgba(255,255,255,.9);
  color: var(--color-midnight);
  border-radius: 12px;
}

/* White accordion caret for closed state */
.accordion-energy .accordion-button::after {
  filter: invert(1); /* turns the default dark SVG white */
  opacity: 0.85;
}

/* Keep caret white when expanded */
.accordion-energy .accordion-button:not(.collapsed)::after {
  filter: invert(1);
  opacity: 1;
}

/* Hover + focus effect on accordion headers */
.accordion-energy .accordion-button:hover,
.accordion-energy .accordion-button:focus {
  box-shadow: 0 0 8px rgba(241, 160, 83, 0.6),   /* clementine glow */
              0 0 14px rgba(255, 204, 51, 0.5);  /* sunglow halo */
  border-color: var(--color-clementine);
  z-index: 1; /* keep glow above neighbors */
}

/* Optional: add a quick pulse when clicked */
.accordion-energy .accordion-button:active {
  animation: accordionPulse 0.4s ease;
}

@keyframes accordionPulse {
  0%   { transform: scale(1); box-shadow: none; }
  50%  { transform: scale(1.02); box-shadow: 0 0 12px rgba(255, 204, 51, 0.7); }
  100% { transform: scale(1); box-shadow: none; }
}
/* inner bevel / soft edge */
.brite-inner{
position: relative; inset: 0; width: calc(100% - 18px); height: calc(100% - 18px);
border-radius: calc(var(--radius) - 4px);
box-shadow: var(--shadow2);
display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 16px;
}
/* mobile testimonial flip cards */

.flip-card {
  perspective: 1000px;
	margin-bottom: 3.5rem;
}

.flip-inner{
  position: relative;
  width: 100%;
  height: 300px;
  transition: transform .6s;
  transform-style: preserve-3d;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  cursor: pointer;
}

.flip-card.flipped .flip-inner{ transform: rotateY(180deg); }

.flip-front,
.flip-back{
  
  position: absolute;
  width: 100%;
  min-height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
	margin-bottom: 2rem;
}

.flip-front{
  background: var(--color-midnight);
  color: var(--color-white);
}

.flip-back{
  background: var(--color-white);
  transform: rotateY(180deg) translateZ(0);
}

/* report carousel */
.carousel-inner {
  position: relative; /* important for overlay positioning */
}

.carousel-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;              /* allow clicks to pass through */
  z-index: 1;                        /* above images (z=1), below indicators/controls (Bootstrap puts them higher) */
  background: linear-gradient(35deg, rgba(144, 191, 230, .3) 0%, rgba(144, 191, 230, .5) 5%, rgba(144, 191, 230, .6) 45%, rgba(255, 255, 255, .3) 65%, rgba(255, 255, 255, .1) 100%);

}

/* If you have .carousel-caption, give it a tiny backdrop lift on white slides */
.carousel-caption {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  padding: .75rem 1rem;
  border-radius: .75rem;
	position: absolute;   /* Bootstrap already sets this, keep it */
  z-index: 2;           /* higher than .carousel-overlay */
}
/* (optional) keep arrows/indicators above overlay as well */
.carousel-control-prev,
.carousel-control-next,
.carousel-indicators{ z-index: 3; }

/* Discourage easy saving of raw images (not bulletproof) */
.carousel-item img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* How To Order carousel */
/* ==============================
BRITE STEPS – SCOPED TOKENS
Scope all component variables to .brite-steps
so nothing else on the site is affected.
============================== */
.brite-steps {
/* component-only tokens */
--ground: #F2F4F7; /* pale neutral background for this section only */
--accent: var(--color-clementine); /* big number color */
--midnight: var(--color-midnight); /* icon/text color */
--card-radius: 22px; /* wider outer edges */
--shadow-soft: 0 10px 24px rgba(0,0,0,0.10);
	--card-size: 340px;                  /* <<< adjust this to resize the SQUARE */
}
.brite-steps { background: var(--ground); }

/* Make the slide content align to the right and square up the card */
.brite-steps .carousel-item { 
/* no display override! */
  padding: 1.25rem;
	display: none !important;  /* hide everything by default */
}

.brite-steps .carousel .carousel-item.active,
.brite-steps .carousel .carousel-item-next,
.brite-steps .carousel .carousel-item-prev {
  display: block !important; /* show only active/transitioning */
}

.brite-steps .brite-card {
background: var(--color-white) no-repeat top left/ contain;;
border-radius: var(--card-radius);
box-shadow: var(--shadow-soft);
padding: 2rem; /* wider padding */
width: var(--card-size);
height: var(--card-size);            /* <<< PERFECT SQUARE */
text-align: left;
position: relative;
display: flex;              /* new */
flex-direction: column;     /* stack children */
justify-content: flex-end;  /* push content down */
}


.brite-steps .brite-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--midnight);
  margin-bottom: .5rem;
	margin-left: 6px
}
.brite-steps .brite-content p {
  color: var(--midnight);
  font-size: 1rem;
  margin: 0 0 0 6px;
}

.brite-steps .carousel-inner .carousel-item { padding: 1.25rem; }


.brite-steps .carousel-control-prev, 
.brite-steps .carousel-control-next {
width: 52px; height: 52px; border-radius: 50%; background: var(--color-white);
box-shadow: var(--shadow-soft);
top: 50%; transform: translateY(-50%);
}


.brite-steps .carousel-control-prev-icon, 
.brite-steps .carousel-control-next-icon {
filter: invert(15%) sepia(20%) saturate(2000%) hue-rotate(190deg) brightness(85%) contrast(95%);
}
.five-elements { background: linear-gradient(to top, #FFCC33 0%, #F1A053 80%, #FB8122 100%); }

/* =========================================================
   BRITE Arc Diagram (clean + page-specific palettes)
   ========================================================= */

/* Base tokens + geometry */
.brite-arc{
  --ring-fill: #f2f2f2;
  --arc-stroke: #bfbfbf;
  --pin-stroke: #a7a9ac;
  --arc-stroke-w: 1.57px;
  --pin-stroke-w: 1.57px;

  /* bulb */
  --bulb-stroke: var(--color-turquoise, #00b7b0);
  --bulb-base:   var(--color-midnight, #0b1f3b);
}

/* Optional: if arc sits inside .bg-light */
.bg-light .brite-arc { --ring-fill: var(--bs-light, #f8f9fa); }

/* SVG basics */
.brite-arc .brite-arc-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* Inner rings & center blobs */
.brite-arc .brite-arc-svg .st7 { fill: var(--ring-fill) !important; }

/* Arc stroke */
.brite-arc .brite-arc-svg .st2 {
  stroke: var(--arc-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--arc-stroke-w) !important;
  fill: none !important;
}

/* Pin outlines */
.brite-arc .brite-arc-svg .st4 {
  stroke: var(--pin-stroke) !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--pin-stroke-w) !important;
  fill: none !important;
}

/* Illustrator "none" */
.brite-arc .brite-arc-svg .st5 { fill: none !important; }

/* Bulb */
.brite-arc .brite-arc-svg .st3 { stroke: var(--bulb-stroke) !important; fill: none !important; }
.brite-arc .brite-arc-svg .st6 { fill: var(--bulb-base) !important; }

/* ---------------------------------------------------------
   FILLED DOTS 
   Inner dot classes: st12, st14, st0, st11, st13
   --------------------------------------------------------- */

/* Default palette (fallback if no page modifier is present) */
.brite-arc .brite-arc-svg .st12 { fill:#FFCC33 !important; } /* dot 1 */
.brite-arc .brite-arc-svg .st14 { fill:#5CE0D8 !important; } /* dot 2 */
.brite-arc .brite-arc-svg .st0  { fill:#3778C2 !important; } /* dot 3 */
.brite-arc .brite-arc-svg .st11 { fill:#90BFE6 !important; } /* dot 4 */
.brite-arc .brite-arc-svg .st13 { fill:#F1A053 !important; } /* dot 5 */

/*Shadow the entire SVG, not individual SVG shapes */

.brite-arc svg.brite-arc-svg{
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18))
          drop-shadow(0 2px 8px rgba(0,0,0,.10));
}
/* Dots are not filtered (avoid Edge bug) */
.brite-arc .brite-arc-svg .st12,
.brite-arc .brite-arc-svg .st14,
.brite-arc .brite-arc-svg .st0,
.brite-arc .brite-arc-svg .st11,
.brite-arc .brite-arc-svg .st13{
  filter: none !important;
}
/* -----------------------
   Page-specific palettes
   (edit hexes as desired)
   ----------------------- */

/* Coaches */
.brite-arc--coaches .brite-arc-svg .st12 { fill:#FFCC33 !important; }
.brite-arc--coaches .brite-arc-svg .st14 { fill:#5CE0D8 !important; }
.brite-arc--coaches .brite-arc-svg .st0  { fill:#3778C2 !important; }
.brite-arc--coaches .brite-arc-svg .st11 { fill:#90BFE6 !important; }
.brite-arc--coaches .brite-arc-svg .st13 { fill:#F1A053 !important; }
.brite-arc--coaches { --bulb-stroke: var(--color-turquoise, #00b7b0); }

/* HR (example — swap these to your HR theme) */
.brite-arc--hr .brite-arc-svg .st12 { fill:#90BFE6 !important; }
.brite-arc--hr .brite-arc-svg .st14 { fill:#3778C2 !important; }
.brite-arc--hr .brite-arc-svg .st0  { fill:#0b1f3b !important; }
.brite-arc--hr .brite-arc-svg .st11 { fill:#FFCC33 !important; }
.brite-arc--hr .brite-arc-svg .st13 { fill:#5CE0D8 !important; }
.brite-arc--hr { --bulb-stroke: var(--color-midblue, #1f5fa8); }

/* Team leaders (example) */
.brite-arc--team .brite-arc-svg .st12 { fill:#FFCC33 !important; }
.brite-arc--team .brite-arc-svg .st14 { fill:#3778C2 !important; }
.brite-arc--team .brite-arc-svg .st0  { fill:#90BFE6 !important; }
.brite-arc--team .brite-arc-svg .st11 { fill:#5CE0D8 !important; }
.brite-arc--team .brite-arc-svg .st13 { fill:#F1A053 !important; }
.brite-arc--team { --bulb-stroke: var(--color-clementine, #ff7a3d); }

/* ---------------------------------------------------------
   Overlay positioning + shadows (kept from your original)
   --------------------------------------------------------- */

.brite-arc .arc-stage{ position:relative; isolation:isolate; }
.brite-arc .arc-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.brite-arc .overlay-item{
  position:absolute;
  left:var(--x,0%);
  top:var(--y,0%);
  transform: translate(calc(-50% + var(--ox,0px)), calc(-50% + var(--oy,0px)));
  pointer-events:auto;
  max-width:240px;
}

/* Drop shadows (center ring + pins + dots) */
.brite-arc svg.brite-arc-svg :is(#center path, #lines g, .st7, .st12, .st14, .st0, .st11, .st13){
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.18))
          drop-shadow(0 2px 8px rgba(0,0,0,.10));
}
.brite-arc svg.brite-arc-svg #lines g{
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
}

/* Neutral bg token */
.bg-neutral{ background-color: var(--color-neutral, #f6f7fb); }

/* ===== Shared: apply gradients to the accordion BUTTONS ===== */
.accordion-button.hr-bg,
.accordion-button.coach-bg,
.accordion-button.leader-bg{
  background-color: transparent !important;      /* neutralize Bootstrap bg */
  background-image: none !important;             /* default off */
  box-shadow: none;                               /* tidy focus/active */
}

/* ===== HR (navy/blue) – white text + white chevron ===== */
.accordion-button.hr-bg{
  background-image: linear-gradient(to right, #052c49 0%, #3778C2 65%, #052c49 100%) !important;
  color: #fff !important;
}
.accordion-button.hr-bg:not(.collapsed){
  background-image: linear-gradient(to right, #052c49 0%, #3778C2 65%, #052c49 100%) !important;
  color: #fff !important;
}
.accordion-button.hr-bg:focus{ box-shadow: 0 0 0 .25rem rgba(55,120,194,.35); }
.accordion-button.hr-bg::after{
  /* White chevron */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ===== Coaches (navy → teal) – white text + white chevron ===== */
.accordion-button.coach-bg{
  background-image: linear-gradient(to right, #052c49 0%, #3778C2 45%, #5ce0d8 85%, #bdf2ef 100%) !important;
  color: #fff !important;
}
.accordion-button.coach-bg:not(.collapsed){
  background-image: linear-gradient(to right, #052c49 0%, #3778C2 45%, #5ce0d8 85%, #bdf2ef 100%) !important;
  color: #fff !important;
}
.accordion-button.coach-bg:focus{ box-shadow: 0 0 0 .25rem rgba(92,224,216,.35); }
.accordion-button.coach-bg::after{
  /* White chevron */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ===== Leaders (orange/yellow) – dark text + dark chevron ===== */
.accordion-button.leader-bg{
  background-image: linear-gradient(to right, #f1a053 0%, #fb8122 45%, #fb8122 80%, #ffcc33 100%) !important;
  color: #0b132b !important; /* dark navy for contrast on the light end */
}
.accordion-button.leader-bg:not(.collapsed){
  background-image: linear-gradient(to right, #f1a053 0%, #fb8122 45%, #fb8122 80%, #ffcc33 100%) !important;
  color: #0b132b !important;
}
.accordion-button.leader-bg:focus{ box-shadow: 0 0 0 .25rem rgba(251,129,34,.35); }
.accordion-button.leader-bg::after{
  /* Dark chevron (navy stroke) for light gradient end */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='%230b132b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}


/* Optional brand ring around avatars */
.avatar-ring {
  box-shadow: 0 0 0 4px rgba(0, 156, 222, .12); /* light blue ring */
}

/* Scoped footer styles (won’t affect navbar or body links) */
  footer.foot-brite {
    background-color: var(--color-midnight);
    color: var(--color-white);
  }
  footer.foot-brite a {
    text-decoration: none;
    color: var(--color-white);
    transition: color .2s ease;
  }
  footer.foot-brite a:hover,
  footer.foot-brite a:focus {
    text-decoration: none;
    color: var(--color-lightblue);
  }
  footer.foot-brite .mini a { color: var(--color-lightblue); }
  footer.foot-brite .mini a:hover { color: var(--color-white); }