/* =========================================
   ABOUT PAGE SPECIFIC STYLES (about.css)
   ========================================= */

header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  background: transparent !important; /* Strips any background color */
  border: none !important;
  z-index: 100; /* Keeps it above the images */
}

.nav-container {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* --- 1. Split Screen Hero Layout --- */
.ray-hero-split {
  display: flex;
  width: 100%;
  height: 100vh; /* Fills the entire screen behind the navbar */
  background-color: #050505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- 2. Left Side (Slideshow - 2/3 Width) --- */
.ray-left-slideshow {
  flex: 2; /* Takes exactly 2/3 of the width */
  position: relative;
  overflow: hidden;
}

.ray-slider,
.slick-list,
.slick-track,
.ray-slide-item {
  height: 100%;
}

.ray-slide-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
}

/* Smooth Vignette Gradient fading slowly to black on the right */
.cinematic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Slowly fades to black on the right to merge with the text column */
  background: linear-gradient(
      to right,
      transparent 30%,
      rgba(5, 5, 5, 0.7) 75%,
      #050505 100%
    ),
    linear-gradient(to top, #050505 0%, transparent 20%);
  pointer-events: none;
  z-index: 2;
}

/* --- 3. Right Side (Quote & Text - 1/3 Width) --- */
.ray-right-content {
  flex: 1; /* Takes exactly 1/3 of the width */
  display: flex;
  align-items: center;
  padding: 10vh 5vw 0 2vw; /* Adjusted padding to fit the narrower text column */
  background-color: #050505;
  z-index: 3;
}

.ray-quote-box {
  max-width: 600px;
}

.ray-massive-quote {
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.5rem; /* Scaled down slightly to fit the 1/3 layout perfectly */
  line-height: 1;
  color: #fff;
  letter-spacing: 2px;
  margin: 15px 0 30px 0;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.ray-bio-block {
  border-left: 2px solid var(--primary, #a15127);
  padding-left: 20px;
}

.ray-subtext {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.05rem;
  color: #aaa;
  line-height: 1.7;
}

/* --- 4. Secondary Sections (Values & Leadership) --- */
.about-secondary-section {
  padding: 100px 8vw;
  background-color: #050505;
}

.core-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 100px;
}

.value-card {
  background: rgba(255, 255, 255, 0.02);
  padding: 50px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.value-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.5rem;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-align: center;
}

.value-text {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  color: #bbb;
  line-height: 1.6;
  text-align: center;
}

.leadership-heading {
  font-family: "Bebas Neue", sans-serif;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  margin-bottom: 60px;
}

/* --- 5. Leadership Alternating Split Rows --- */
.leadership-section {
  width: 100%;
  padding-top: 100px;
  background-color: #050505;
}

.leadership-heading {
  font-family: "Bebas Neue", sans-serif;
  font-size: 4rem;
  color: #fff;
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 2px;
}

/* The Row Container (50/50 Split) */
.leader-row {
  display: flex;
  width: 100%;
  min-height: 65vh; /* Gives the profiles a cinematic, tall height */
}

/* This class flips the layout so the image is on the left */
.leader-row.reverse {
  flex-direction: row-reverse;
}

/* 50% Text Side */
.leader-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8vw;
  background-color: #050505;
  z-index: 3;
}

/* 50% Image Side */
.leader-image-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.leader-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* Pushes focus slightly up so heads don't get cut off */
  filter: grayscale(100%) contrast(1.15);
  transition: filter 0.5s ease;
}

/* Cinematic reveal: Gently brings back color when hovering over a profile */
.leader-row:hover .leader-image {
  filter: grayscale(0%) contrast(1.1);
}

.leader-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 3.5rem;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 5px;
  line-height: 1;
}

.leader-role {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #a15127;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.leader-bio {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1.7;
  border-left: 2px solid rgba(161, 81, 39, 0.5);
  padding-left: 20px;
}

/* Seamless Vignette Gradients for Image Edges */
.leader-overlay-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(to right, #050505 0%, transparent 100%);
  pointer-events: none;
}

.leader-overlay-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(to left, #050505 0%, transparent 100%);
  pointer-events: none;
}

/* --- Mobile Responsiveness Updates --- */
@media (max-width: 992px) {
  /* Forces the rows to stack vertically on phones */
  .leader-row,
  .leader-row.reverse {
    flex-direction: column-reverse;
    min-height: auto;
  }

  .leader-image-wrapper {
    height: 50vh; /* Fixed height for image on mobile */
  }

  .leader-text {
    padding: 50px 5vw;
  }

  /* Change the side fades to a bottom fade for the mobile stack */
  .leader-overlay-left,
  .leader-overlay-right {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #050505 0%, transparent 100%);
  }
}

.leader-image-box {
  width: 150px;
  height: 150px;
  margin: 0 auto 25px auto;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(161, 81, 39, 0.5);
}

.leader-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(80%);
}

.leader-name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2.2rem;
  color: #fff;
}

.leader-role {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  color: #a15127;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.leader-bio {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  color: #aaa;
  line-height: 1.6;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 992px) {
  .ray-hero-split {
    flex-direction: column;
    height: 100vh;
  }

  /* 2. Force the image to take exactly 50% */
  .ray-left-slideshow {
    flex: 1 !important; /* Overrides the desktop flex: 2 */
    height: 50vh;
    width: 100%;
  }

  /* 3. Force the text to take the other 50% and center it */
  .ray-right-content {
    flex: 1 !important;
    height: 50vh;
    padding: 0 6vw; /* Removes heavy top padding to pull quote up */
    justify-content: center; /* Vertically centers the quote in its half */
  }

  /* 4. Scale text slightly so it fits perfectly in the bottom half */
  .ray-massive-quote {
    font-size: 2.2rem;
    margin: 10px 0 15px 0;
  }

  .ray-subtext {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .cinematic-overlay {
    background: linear-gradient(to top, #050505 0%, transparent 40%);
  }

  /* Keep your existing core-values-grid mobile CSS below this... */
  .core-values-grid,
  .leadership-grid {
    grid-template-columns: 1fr;
  }
}