/* Silicato Development - Brand Color Overrides
   All blue palette replaced in webflow.min.css source.
   This file catches edge cases and hardcoded inline styles.
*/

/* Catch any straggler blues in computed/inline styles */
.animation-color-background.is-blue-color,
.animation-color-background {
  background-color: #A51E36 !important;
}

.with-blue-dark-background {
  background-color: #2a0f17 !important;
}

.with-blue-background {
  background-color: #4d1a2a !important;
}

.with-blue-light-background {
  background-color: #f5e5e8 !important;
}

.with-blue-borders::before,
.with-blue-borders::after,
.with-blue-border-on-top::before,
.with-blue-border-on-bottom::after {
  background-color: #A51E36 !important;
}

/* Buttons */
.main-button {
  background-color: #A51E36 !important;
}
.main-button:hover {
  background-color: #842235 !important;
}
.submit-button {
  background-color: #A51E36 !important;
}
.submit-button:hover {
  background-color: #842235 !important;
}

/* Active nav link */
a.nav-main-link.w--current,
a.menu-main-link.w--current,
.nav-main-link.w--current,
.menu-main-link.w--current {
  color: #ffffff !important;
}

/* Tab active */
.tab-link.w--current {
  background-color: #A51E36 !important;
}

/* Hero overlay */
.hero-slider-overlay-color {
  background-color: rgba(42, 15, 23, 0.6) !important;
}

/* Footer */
.footer {
  background-color: #2a0f17 !important;
}

/* Silicato logo - white box, fixed top-left (replacing menu button position) */
.nav-brand,
.nav-brand.w-nav-brand {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  background-color: #ffffff !important;
  width: 12vw !important;
  height: 13em !important;
  padding: 1em 2vw !important;
  border-right: 1px solid var(--color-7) !important;
  border-bottom: 1px solid var(--color-7) !important;
}

.logo-image-default {
  height: 60px !important;
  width: auto !important;
}

.footer-logo-image {
  height: 60px !important;
  width: auto !important;
}

/* Hide brand name text next to logos */
.brand-name-text,
.footer-brand-name-text {
  display: none !important;
}

/* Menu button positioning moved to bottom of file */

/* Add right padding to match left, so content fits between both boxes */
.nav-topbar {
  padding-right: 12vw !important;
}

.nav-main {
  margin-left: 12vw !important;
  margin-right: 12vw !important;
  width: calc(100% - 24vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

@media (max-width: 991px) {
  .nav.w-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }
  .nav-brand, .nav-brand.w-nav-brand {
    width: 30vw !important;
    height: 8em !important;
    padding: 1.5em !important;
  }
  .nav-topbar {
    height: 8em !important;
    padding-left: 30vw !important;
    padding-right: 30vw !important;
  }
  .logo-image-default {
    height: 60px !important;
  }
}
@media (max-width: 767px) {
  .nav-brand, .nav-brand.w-nav-brand {
    width: 30vw !important;
    height: 7em !important;
  }
  .nav-topbar {
    height: 7em !important;
    padding-left: 30vw !important;
    padding-right: 30vw !important;
  }
  .logo-image-default {
    height: 55px !important;
  }
}
@media (max-width: 479px) {
  .nav-brand, .nav-brand.w-nav-brand {
    width: 28vw !important;
    height: 6em !important;
  }
  .nav-topbar {
    height: 6em !important;
    padding-left: 28vw !important;
    padding-right: 28vw !important;
  }
  .logo-image-default {
    height: 50px !important;
  }
}

/* Active nav link */
a.nav-main-link.w--current,
a.menu-main-link.w--current,
.nav-main-link.w--current,
.menu-main-link.w--current {
  color: #ffffff !important;
}

/* Project/Property card grid - 3 columns, contained (main content only) */
.main .projects-list,
.main .project-list,
.main .project-2-list-wrapper,
main .projects-list,
main .project-list,
main .project-2-list-wrapper {
  grid-template-columns: 1fr 1fr 1fr !important;
  grid-column-gap: 1.5em !important;
  grid-row-gap: 1.5em !important;
  display: grid !important;
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4em !important;
  padding-right: 4em !important;
}

/* Cards - tighter padding for 3-col layout */
.project-item {
  padding: 2em !important;
}

/* Card images - fixed aspect ratio, no stretching */
.project-images {
  height: 0 !important;
  padding-bottom: 60% !important;
  overflow: hidden !important;
  position: relative !important;
}

.project-first-image {
  position: absolute !important;
  inset: 0 !important;
}

.cover-image,
.cover-image.is-parallax {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Featured project heading colors - red default, white on hover */
.featured-project-link-block .heading,
.featured-project-content .heading,
.heading.is-featured-project-title,
.heading.is-featured-project-title-large,
.heading.is-featured-project-client-name {
  color: #A51E36 !important;
  transition: color 0.3s ease !important;
}

.featured-project-link-block:hover .heading,
.featured-project-item:hover .heading,
.featured-project-item:hover .heading.is-featured-project-title,
.featured-project-item:hover .heading.is-featured-project-title-large,
.featured-project-item:hover .heading.is-featured-project-client-name {
  color: #ffffff !important;
}

/* Team photos - consistent size, show faces */
.specialist-image {
  width: 100% !important;
  height: 350px !important;
  overflow: hidden !important;
  position: relative !important;
}

.specialist-image .cover-image,
.specialist-image .cover-image.is-parallax {
  object-fit: cover !important;
  object-position: center 20% !important;
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.specialist-item {
  flex: 1 !important;
  max-width: 25% !important;
}

@media (max-width: 991px) {
  .specialist-item {
    max-width: 50% !important;
  }
  .specialist-image {
    height: 300px !important;
  }
}

@media (max-width: 479px) {
  .specialist-item {
    max-width: 100% !important;
  }
}

/* Hide testimonial images */
.testimonial-gallery {
  display: none !important;
}

/* Card image hover - dark overlay */
.project-item .cover-image {
  transition: filter 0.4s ease !important;
}

.project-item:hover .cover-image {
  filter: brightness(0.4) !important;
}

/* Tablet - 2 columns */
@media (max-width: 991px) {
  .main .projects-list,
  .main .project-list,
  .main .project-2-list-wrapper,
  main .projects-list,
  main .project-list,
  main .project-2-list-wrapper {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Mobile - 1 column */
@media (max-width: 767px) {
  .main .projects-list,
  .main .project-list,
  .main .project-2-list-wrapper,
  main .projects-list,
  main .project-list,
  main .project-2-list-wrapper {
    grid-template-columns: 1fr !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }
  .project-item {
    padding: 1.5em !important;
  }
}

/* Logo carousel - infinite sliding, 5 visible */
.padding.for-carousel-logos {
  padding: 3em 0 !important;
  overflow: hidden !important;
}

div.logo-carousel,
div.logo-carousel[data-w-id] {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
  position: relative !important;
  /* Kill Webflow IX2 animation */
  transform: none !important;
  will-change: auto !important;
}

div.logo-carousel-block {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-shrink: 0 !important;
  gap: 20px !important;
  grid-column-gap: 0 !important;
  padding-right: 20px !important;
  animation: logo-slide 30s linear infinite !important;
}

div.logo-carousel-block:nth-child(2) {
  display: flex !important;
  animation: logo-slide 30s linear infinite !important;
}

@keyframes logo-slide {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

img.logo-carousel-image {
  width: 200px !important;
  min-width: 200px !important;
  height: 80px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border: 1px solid #A51E36 !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

@media (max-width: 767px) {
  img.logo-carousel-image {
    width: 160px !important;
    min-width: 160px !important;
    height: 65px !important;
    padding: 10px 14px !important;
  }
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&display=swap');

/* Hide second header bar on mobile */
@media (max-width: 991px) {
  .nav-main {
    display: none !important;
  }
}

/* Card section headings - match body content width */
.section > .padding > .vertical-flex,
.section > .padding > .container {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4em !important;
  padding-right: 4em !important;
}

@media (max-width: 767px) {
  .section > .padding > .vertical-flex,
  .section > .padding > .container {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }
}

/* Properties page container - match card grid width */
.section > .padding > .container > .small-uppercase-title {
  max-width: 1300px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4em !important;
  padding-right: 4em !important;
}

/* CTA sections - background image with dark overlay */
.section.with-blue-dark-background:has(.call-to-action-block) {
  background-image: url("images/uploads/route-one-milford-silicato-development-scaled.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
}

.section.with-blue-dark-background:has(.call-to-action-block)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(42, 15, 23, 0.8);
  z-index: 1;
}

.section.with-blue-dark-background:has(.call-to-action-block) .padding {
  position: relative;
  z-index: 2;
}

/* Fullscreen menu - active link red and underlined */
a.menu-main-link.w--current,
.menu-main-link.w--current {
  color: #A51E36 !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em !important;
}

/* Hide Webflow badge injected by JS */
.w-webflow-badge {
  display: none !important;
}

/* Mobile header - taller, hide nav links, show menu button on right */
@media (max-width: 991px) {
  .nav-topbar {
    height: 8em !important;
  }
  .nav-main-links-wrapper,
  .nav-main-links-wrapper.w-nav-menu {
    display: none !important;
  }
  .nav-main {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 0 !important;
    overflow: visible !important;
  }
}

/* Menu button - always visible, fixed top-right on all sizes */
.button-for-open-menu {
  left: auto !important;
  right: 0 !important;
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  z-index: 9999 !important;
  background-color: #ffffff !important;
  border-left: 1px solid var(--color-7) !important;
  border-bottom: 1px solid var(--color-7) !important;
  border-right: none !important;
}

@media (max-width: 991px) {
  .button-for-open-menu {
    width: 12em !important;
    height: 8em !important;
  }
}
@media (max-width: 767px) {
  .nav-topbar {
    height: 7em !important;
  }
  .button-for-open-menu {
    width: 12em !important;
    height: 7em !important;
  }
}
@media (max-width: 479px) {
  .nav-topbar {
    height: 6em !important;
  }
  .button-for-open-menu {
    width: 10em !important;
    height: 6em !important;
  }
}

/* Fullscreen menu - active red, inactive grey */
.menu-main-link {
  color: #999999 !important;
}
.menu-main-link:hover {
  color: #A51E36 !important;
}
a.menu-main-link.w--current,
.menu-main-link.w--current {
  color: #A51E36 !important;
}