/* Header layout - logo 280px fixed width (80% of original 350px) */
header.main-header .brand {
  width: 280px !important;
  height: auto !important;
}

header.main-header .brand img {
  width: 280px !important;
  height: auto !important;
}

body.scrolled:not(.nav-open) header.main-header .brand {
  height: auto !important;
}

body.scrolled:not(.nav-open) header.main-header .brand img {
  width: 200px !important;
}

@media screen and (max-width: 640px) {
  header.main-header .brand {
    width: auto !important;
    padding: 5px 0 !important;
  }
  header.main-header .brand img {
    width: 160px !important;
  }
  header.main-header nav.main-nav .nav-items .nav-item {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
  header.main-header nav.main-nav .nav-items li {
    margin-bottom: 0.25rem !important;
  }
}

/* Navigation - flexible */
header.main-header nav.main-nav {
  flex: 1 !important;
}

@media screen and (max-width: 1024px) {
  header.main-header .brand {
    width: auto !important;
  }
  header.main-header nav.main-nav {
    width: auto !important;
  }
}

/* Hide Projects label and filter buttons */
#work > .grid.pb-2 {
  display: none !important;
}

/* Reduce gap between nav and portfolio */
#work {
  padding-top: 20px !important;
}

.content > section:first-child {
  margin-top: 5rem !important;
}

/* Portfolio grid - 2.5px margins */
.grid.masonry.gallery {
  margin-right: -2.5px !important;
}

.grid.masonry.gallery .item {
  padding: 1.25px !important;
  margin-left: 0 !important;
}

/* Consistent thumbnail height */
a.thumb img {
  height: 320px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Fix hover overlay to match thumbnail size */
a.thumb .caption {
  margin: 2.5px !important;
}

/* Portfolio item spacing - balance below titles */
.grid.masonry.gallery .item .caption {
  padding-bottom: 15px !important;
}

/* Custom footer styles */
footer {
  background: transparent !important;
  color: #333 !important;
}

footer a {
  color: #333 !important;
}

footer a:hover {
  color: #88AC2E !important;
}

/* Footer icons */
.footer-icons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 20px !important;
}

.footer-icons a {
  color: #333 !important;
  transition: color 0.2s ease !important;
}

.footer-icons a:hover {
  color: #88AC2E !important;
}

.footer-icons svg {
  display: block !important;
}

/* Mobile footer adjustments */
@media screen and (max-width: 640px) {
  footer .grid {
    display: block !important;
  }
  footer .col-6 {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
  }
  footer .col-6.text-right {
    text-align: left !important;
  }
  .footer-icons {
    justify-content: flex-start !important;
  }
  footer .col-6 span.text-dark,
  footer .secondary-nav,
  footer .secondary-nav li,
  footer .secondary-nav li a,
  footer .secondary-nav li span {
    font-size: 14px !important;
  }
  footer .secondary-nav {
    padding-left: 0 !important;
    margin: 0 !important;
  }
  footer .secondary-nav li {
    display: block !important;
    margin-bottom: 0.25rem !important;
    list-style: none !important;
  }
}

/* Project gallery - CSS Grid with featured first image */
.project-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2.5px !important;
  width: 100% !important;
}

.project-gallery a {
  display: block !important;
}

.project-gallery a:first-child {
  grid-column: 1 / -1 !important;
}

.project-gallery a:first-child img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.project-gallery a:not(:first-child) img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  aspect-ratio: 4/3 !important;
  display: block !important;
}

@media screen and (max-width: 1024px) {
  .project-gallery {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 640px) {
  .project-gallery {
    grid-template-columns: 1fr !important;
  }
}

/* Reviews carousel */
.reviews-section {
  overflow: hidden !important;
}

.reviews-title {
  text-align: left !important;
  margin-bottom: 2rem !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #88AC2E !important;
}

.reviews-carousel {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

.reviews-track {
  display: flex !important;
  gap: 20px !important;
  animation: scroll-reviews 60s linear infinite !important;
  width: max-content !important;
}

.reviews-track:hover {
  animation-play-state: paused !important;
}

.review-card {
  flex-shrink: 0 !important;
  width: 300px !important;
  background: #f9f9f9 !important;
  border-radius: 8px !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.review-stars {
  color: #f4b400 !important;
  font-size: 1.25rem !important;
  margin-bottom: 12px !important;
  letter-spacing: 2px !important;
}

.review-text {
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #444 !important;
  margin-bottom: 12px !important;
}

.review-author {
  font-size: 0.9rem !important;
  color: #666 !important;
  font-style: italic !important;
  margin: 0 !important;
}

@keyframes scroll-reviews {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* About section - align image to top */
#about .grid {
  align-items: flex-start !important;
}

/* Project page hero - reduced vertical height (50% of original) */
.content > section.hero {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
  min-height: auto !important;
}



/* TBD Section header */
.tbd-header {
  text-align: center !important;
}

.tbd-header h3 {
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Placeholder boxes for missing projects */
.placeholder-img {
  width: 100%;
  height: 320px;
  background-color: #1a1a1a;
}

/* Fix anchor scroll offset for fixed header */
#about-us, #contact-us {
  scroll-margin-top: 150px !important;
  padding-top: 20px !important;
}

/* Process Page Gallery Rows */
.process-gallery {
  margin-bottom: 3rem !important;
}

.process-row {
  display: grid !important;
  gap: 10px !important;
  margin-bottom: 45px !important;
}

.process-row.cols-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.process-row.cols-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.process-row a {
  display: block !important;
  overflow: hidden !important;
}

.process-row img {
  width: 100% !important;
  height: 280px !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease !important;
}

/* Taller height for 2-column rows (more square) */
.process-row.cols-2 img {
  height: 420px !important;
}

/* Master Plans row - first image full height, second matches */
.process-row.master-plans {
  align-items: stretch !important;
}

.process-row.master-plans a {
  display: flex !important;
}

.process-row.master-plans img {
  height: auto !important;
  width: 100% !important;
  object-fit: cover !important;
}

.process-row a:hover img {
  transform: scale(1.02) !important;
}

.process-row-label {
  text-align: center !important;
  font-size: 0.85rem !important;
  color: #000 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 12px !important;
  margin-top: 0 !important;
}

.process-row-label:first-of-type {
  margin-top: 0 !important;
}

@media screen and (max-width: 768px) {
  .process-row.cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media screen and (max-width: 480px) {
  .process-row.cols-2,
  .process-row.cols-3 {
    grid-template-columns: 1fr !important;
  }
}