/* Hero enhancements: lazy-loading, hover effects, transitions */
.hero-bg.lazy{opacity:0;transform:scale(1.06);filter:blur(8px) grayscale(.06);transition:opacity .9s ease,transform 10s ease,filter .9s ease}
.hero-bg.lazy.loaded{opacity:1;transform:scale(1);filter:blur(0) grayscale(0)}
.hero:hover .hero-bg.lazy.loaded{transform:scale(1.04)}

.about-hero-image img{display:block;width:100%;height:520px;object-fit:cover;border-radius:10px;overflow:hidden;transition:transform .6s ease,filter .6s ease,opacity .6s ease}
.about-hero-image img:hover{transform:translateY(-6px) scale(1.02);filter:contrast(1.03)}
.about-hero-image{position:relative}

/* Strong overlay to ensure label text remains visible on any image */
.about-hero-image::after{
  content:'';
  position:absolute;inset:0;border-radius:10px;
  background:linear-gradient(180deg,rgba(6,6,6,0.18) 0%, rgba(6,6,6,0.35) 40%, rgba(6,6,6,0.5) 100%);
  pointer-events:none;transition:background .3s ease;
}

.hero-image-label{position:absolute;left:28px;bottom:20px;color:#fff;z-index:3;max-width:72%;}
.hero-image-label span{display:block;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.85);opacity:.9}
.hero-image-label strong{display:block;font-size:20px;line-height:1.05;margin-top:6px;text-shadow:0 6px 18px rgba(8,8,8,.5);font-weight:700}

/* If you need an even stronger background for text, enable this class on the container */
.hero-image-label--solid{background:rgba(10,10,10,.32);padding:10px 14px;border-radius:6px}

.button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.button:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(16,16,16,.12);color:#fff}
.nav-cta:hover{color:#fff}
.button:active{transform:translateY(-1px)}

/* subtle focus state for accessibility */
.button:focus{outline:3px solid rgba(169,140,38,.18);outline-offset:3px}

/* Loading placeholder for images (very light grey) */
.img-placeholder{background:linear-gradient(90deg,#f4f4f4,#efefef,#f4f4f4);background-size:200% 100%;animation:shimmer 1.6s linear infinite;height:100%}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

/* small screens: keep hero visuals balanced */
@media(max-width:900px){
  .hero{min-height:640px}
  .hero-bg.lazy{transform:scale(1.04)}
  .about-hero-image img{height:360px}
}

.site-header{--header-height:76px}

/* Respect header height so content doesn't jump under the nav */
.hero{min-height:100vh;display:block}
.hero .hero-inner{min-height:100vh;display:flex;align-items:center;justify-content:flex-start;gap:40px;padding-top:var(--header-height)}

/* Additional top padding for Home page hero to avoid nav overlap */
.home .hero .hero-inner{padding-top:var(--header-height)}

@media(max-width:900px){
  .home .hero .hero-inner{padding-top:132px}
}
.hero .hero-inner .hero-copy{max-width:56%;padding-left:0}
.hero .hero-inner .hero-stat{margin-left:auto}

@media(max-width:900px){
  .site-header{--header-height:68px}
  .hero .hero-inner{min-height:calc(100vh - var(--header-height))}
  .hero .hero-inner{flex-direction:column;align-items:flex-start}
  .hero .hero-inner .hero-copy{max-width:100%}
  .hero .hero-inner .hero-stat{display:none}
}

/* When at the top of the page, make the header transparent so the hero extends behind it */
.site-header.transparent{background:transparent;border-bottom:0}
.site-header.transparent .brand img{filter:none;opacity:1}

/* Nav link color switching based on header state */
.site-header{transition:background .25s ease,color .25s ease}
.site-header .site-nav a{transition:color .18s ease,border-color .18s ease}

/* Transparent header (over hero): show white/nav on dark background */
.site-header.transparent .site-nav a:not(.nav-cta){color:#fff}
.site-header.transparent .site-nav a.nav-cta{color:#fff;background:var(--gold)}
.site-header.transparent .site-nav a:not(.nav-cta):hover,
.site-header.transparent .site-nav a:not(.nav-cta).active{color:var(--gold);border-color:var(--gold)}
.site-header.transparent .site-nav a.nav-cta:hover{color:#fff;background:#8e751d}

/* Scrolled / solid header: show dark nav for white background */
.site-header.scrolled .site-nav a:not(.nav-cta){color:var(--ink)}
.site-header.scrolled .site-nav a.nav-cta{color:#fff;background:var(--gold)}
.site-header.scrolled .site-nav a:not(.nav-cta):hover,
.site-header.scrolled .site-nav a:not(.nav-cta).active{color:var(--gold);border-color:var(--gold)}
.site-header.scrolled .site-nav a.nav-cta:hover{color:#fff;background:#8e751d}

/* Mobile open menu should stay readable: when transparent keep nav background white for the menu panel */
.site-nav.open{background:#fff}

/* When the mobile menu is open (white panel) ensure links are dark regardless of header transparency */
.site-header .site-nav.open a:not(.nav-cta){
  color:var(--ink);
  border-color:transparent;
}
.site-header .site-nav.open a.nav-cta{ color:#fff; background:var(--gold) }
.site-header .site-nav.open a:not(.nav-cta):hover,
.site-header .site-nav.open a:not(.nav-cta).active{ color:var(--gold); border-color:var(--gold) }
.site-header .site-nav.open a.nav-cta:hover{ color:#fff; background:#8e751d }

/* Safety: if any link color is still forced white, increase specificity for open state */
.site-nav.open a{ color:var(--ink) }
.site-nav.open a.nav-cta{ color:#fff }

/* Stronger dark overlay for services hero to ensure text contrast */
.services-hero .hero-shade{
  background:linear-gradient(180deg,rgba(0,0,0,.65) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.6) 100%);
}
.services-hero .hero-copy h1,
.services-hero .hero-copy p{
  color:#fff;
}

/* Center services hero content vertically */
.services-hero .hero-inner{
  padding-top:var(--header-height);
  min-height:100vh;
  align-items:center;
}

/* Make service cards fully clickable and reset default link styles */
.service-card{display:block;text-decoration:none;color:inherit}
.service-card img{display:block;width:100%;height:auto}
.service-card .card-copy a{display:none}

/* Ensure card copy is legible on dark overlays: white titles and visible body text */
.service-card .card-copy h3{color:#fff}
.service-card .card-copy p{color:rgba(255,255,255,0.92)}
.service-card .card-copy span{color:rgba(255,255,255,0.75)}