/* ================================================= */
/* BASE / GLOBAL STYLES */
/* ================================================= */

body {
  background-color: #e7eee1;
  color: #313e44;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
}

a {
  color: #3d6d87;
  text-decoration: none;
}

a:hover {
  color: #9bc269;
}

/* ================================================= */
/* NAVBAR */
/* ================================================= */

.navbar {
  background-color: #313e44 !important;
  padding: 0.5rem 1rem;
}

.navbar-nav .nav-link {
  color: #9bc269 !important;
  font-weight: 500;
}

.navbar-nav .nav-link:hover {
  color: #3d6d87 !important;
}

/* ================================================= */
/* BUTTONS */
/* ================================================= */

.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
  background-color: #3d6d87 !important;
  border-color: #3d6d87 !important;
  color: #ffffff !important;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.btn:hover {
  background-color: #2e5366 !important;
  border-color: #2e5366 !important;
}

/* ================================================= */
/* HERO SLIDESHOW */
/* ================================================= */

.slideshow-box {
  width: 100%;
  max-width: 300px;        /* Desktop size */
  aspect-ratio: 1 / 1;     /* Always square */
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0.5rem;
  background-color: #f8f9fa;
}

.slideshow-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 300ms ease-in-out;
}

/* Fade class used by JS */
.slideshow-fade-out {
  opacity: 0;
}

/* ================================================= */
/* HERO HEADING + LOGOS */
/* ================================================= */

.heading-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 1rem;
}

.heading-inline h1 {
  margin: 0;
  line-height: 1.2;
}

.heading-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* Desktop/tablet: one row */
.heading-stair{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: nowrap;
  text-align: center;
}

/* Mobile: stair-step (top / middle / bottom) */
@media (max-width: 576px){
  .heading-stair{
    flex-direction: column;
    gap: .5rem;
  }

  /* Stair-step effect: top aligns left, middle centered, bottom aligns right */
  .heading-img--left  { align-self: flex-start; }
  .heading-title      { align-self: center; }
  .heading-img--right { align-self: flex-end; }
}

/* ================================================= */
/* HERO TEXT */
/* ================================================= */

.hero-text p {
  max-width: 900px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}

/* ================================================= */
/* OWNER CARDS */
/* ================================================= */

.owner-card {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.owner-name {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.owner-bio {
  line-height: 1.6;
}

/* ================================================= */
/* MOBILE OPTIMIZATIONS */
/* ================================================= */

@media (max-width: 576px) {

  /* Stack heading and logos */
  .heading-inline {
    flex-direction: column;
  }

  .heading-img {
    width: 60px;
    height: 60px;
  }

  /* Full-width slideshow on phones */
  .slideshow-box {
    max-width: 100%;
  }

  /* Improve text readability */
  .hero-text p {
    font-size: 1rem;
    padding: 0 1rem;
  }

  /* Make buttons easier to tap */
  .btn-lg {
    width: 100%;
  }
}

/* ================================================= */
/* ACCESSIBILITY / POLISH */
/* ================================================= */

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid #3d6d87;
  outline-offset: 2px;
}

.project-tile-link { display: block; text-decoration: none; color: inherit; }

.project-tile{
  width: 100%;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

.project-tile:hover{
  transform: translateY(-2px);
  transition: transform 150ms ease, box-shadow 150ms ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.project-tile__meta{
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: .4rem;
}

.project-tile__title{ margin: 0 0 .5rem; }
.project-tile__tagline{ margin: 0 0 .75rem; }
.project-tile__body{ margin: 0 0 .9rem; line-height: 1.5; }

.project-tile__bullets{
  margin: 0 0 .75rem;
  padding-left: 1.1rem;
}
.project-tile__bullets li{ margin: .25rem 0; }

.project-tile__foot{
  margin: 0;
  font-size: .9rem;
  opacity: .75;
}

.project-tile--alt{ background: #ffffff; }


.snapshot-box {
  padding: .5rem; /* instead of 1.25rem */
}

.bda-box img{
  height: 240px;        /* adjust: 220–320 depending on your design */
  object-fit: cover;
}


.carousel-item img {
  height: 240px;
  object-fit: cover;
}