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

/* 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: #013388 !important;
}

.with-blue-dark-background {
  background-color: #000f27 !important;
}

.with-blue-background {
  background-color: #011a45 !important;
}

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

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

/* Buttons */
.main-button {
  background-color: #013388 !important;
}
.main-button:hover {
  background-color: #012a70 !important;
}
.submit-button {
  background-color: #013388 !important;
}
.submit-button:hover {
  background-color: #012a70 !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: #013388 !important;
}

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

/* Footer */
.footer {
  background-color: #000f27 !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: #013388 !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 #013388 !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 */


/* 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/pics/202_wellington_twilight_full_size_0008.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(0, 15, 39, 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: #013388 !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: #013388 !important;
}
a.menu-main-link.w--current,
.menu-main-link.w--current {
  color: #013388 !important;
}

.specialist-item{min-width:0 !important;}

/* ===== Bruce Mears additions (bm-*) ===== */
/* press/award marquee tiles (text in place of tenant logos) */
p.logo-carousel-image.bm-press-tile {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #013388 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
}

/* houzz wordmark in social boxes */
.bm-houzz { display: flex !important; align-items: center !important; justify-content: center !important; }
.bm-houzz-text {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #ffffff;
  text-transform: lowercase; line-height: 1;
}

/* full photo gallery grid on project pages */
.bm-gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; width: 100%;
}
.bm-gallery-item { overflow: hidden; position: relative; aspect-ratio: 4 / 3; }
.bm-gallery-item.wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.bm-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.bm-gallery-item:hover img { transform: scale(1.04); filter: brightness(1.06); }
@media (max-width: 767px) {
  .bm-gallery-grid { grid-template-columns: 1fr; gap: 1em; }
}

/* Marvin / Atlantic Millwork pillar in footer */
.bm-marvin { margin-top: 2.5em; max-width: 30em; }
.bm-marvin img {
  max-width: 260px; width: 100%; height: auto; background: #ffffff;
  padding: 10px 14px; margin-bottom: 1em; display: block;
}


/* video embed on about page */
.bm-video { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.bm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* portrait sticky block — keep the face in frame */
.home-about-video .cover-image { object-position: center 12% !important; }

/* Marvin lockup sits on the navy footer — white wordmark, no tile */
.bm-marvin img { background: transparent; padding: 0; max-width: 300px; }

/* ===== Motion tokens (bm) ===== */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 320ms;
  --dur-2: 640ms;
  --dur-3: 1100ms;
}

/* IO-choreographed reveals with stagger */
.bm-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-2) var(--ease-out-expo),
    transform var(--dur-2) var(--ease-out-expo);
  transition-delay: calc(var(--bm-i, 0) * 80ms);
  will-change: opacity, transform;
}
.bm-reveal.bm-in { opacity: 1; transform: none; }

/* ===== Engineered hero project slider ===== */
.bm-slide {
  position: absolute; inset: 0; display: block; opacity: 0;
  transition: opacity var(--dur-3) var(--ease-soft);
  pointer-events: none;
}
.bm-slide.is-active { opacity: 1; pointer-events: auto; }
.bm-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 52% 40%; will-change: transform;
}
.hero-slider-overlay-color { pointer-events: none !important; }
.home-hero-content { pointer-events: none; }
.home-hero-content a, .home-hero-content .button-secondary { pointer-events: auto; }
.home-hero-lines, .content-background-lines { pointer-events: none; }
.bm-slide-label {
  position: absolute; left: 8%; bottom: 9%; z-index: 4;
  font-family: Antonio, Impact, sans-serif;
  font-size: clamp(15px, 1.3vw, 19px); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgba(1, 15, 39, 0.55); padding: 0.7em 1.1em;
  border-left: 3px solid #78c0e0;
  transition: background var(--dur-1) var(--ease-soft),
              border-color var(--dur-1) var(--ease-soft);
}
.bm-slide:hover .bm-slide-label { background: #013388; border-color: #fff; }
.home-hero-heading.bm-tagline {
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 1.04; max-width: 14ch; text-wrap: balance;
}

/* ===== Press / award marquee tiles ===== */
p.logo-carousel-image.bm-press-tile {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 200px !important; min-width: 200px !important; height: 80px !important;
  background: #ffffff !important; border: 1px solid #013388 !important;
  padding: 12px 20px !important; box-sizing: border-box !important; flex-shrink: 0 !important;
  text-align: center !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 0.06em !important; text-transform: uppercase !important;
  color: #013388 !important; line-height: 1.25 !important; margin: 0 !important;
}
@media (max-width: 767px) {
  p.logo-carousel-image.bm-press-tile { width: 160px !important; min-width: 160px !important; height: 65px !important; }
}
img.logo-carousel-image.bm-tile-navy { background: #013388 !important; border-color: #013388 !important; }

/* ===== Testimonials v2 — large, legible, choreographed ===== */
.bm-t-opener {
  max-width: 30ch; margin: 0 auto; text-align: center;
  font-family: Antonio, Impact, sans-serif; font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 4rem); line-height: 1.08;
  color: #fff; text-transform: uppercase; letter-spacing: 0.015em;
}
.bm-t-opener em { font-style: normal; color: #78c0e0; }
.bm-t-attr { text-align: center; margin-top: 1.2em; color: rgba(255,255,255,0.75);
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; }
.bm-testimonial {
  position: relative; background: #ffffff; border: 1px solid #c6d1e4;
  border-left: 4px solid #013388; padding: clamp(32px, 4vw, 52px);
  font-size: 16px; max-width: 940px; width: 100%; margin: 0 auto; text-align: left;
}
.bm-testimonial + .bm-testimonial { margin-top: 40px; }
.bm-testimonial::before {
  content: "\201C"; position: absolute; top: -10px; right: 18px;
  font-family: Antonio, Georgia, serif; font-size: 110px; line-height: 1;
  color: #e2e8f1; pointer-events: none;
}
.bm-quote-lead {
  font-family: Antonio, Impact, sans-serif; font-weight: 500;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3;
  color: #013388; margin-bottom: 14px; max-width: 34ch;
}
.bm-quote-body {
  font-size: 19px; line-height: 1.78; color: #16233c; white-space: pre-line;
}
.bm-testimonial figcaption {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid #e2e8f1;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.bm-testimonial .bm-name {
  font-family: Antonio, Impact, sans-serif; font-size: 22px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; color: #013388;
}
.bm-testimonial .bm-place {
  color: #5d6c7b; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
@media (max-width: 767px) {
  .bm-quote-body { font-size: 17.5px; }
  .bm-slide-label { left: 10%; bottom: 12%; }
}

/* ===== Reduced motion — kill transforms & autoplay ===== */
@media (prefers-reduced-motion: reduce) {
  .bm-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bm-slide { transition: none !important; }
  .bm-slide img { transform: none !important; }
  div.logo-carousel-block { animation: none !important; }
}