/* Continuous architectural-concrete background */
:root {
  --concrete-ink: #1b1c1f;
  --concrete-muted: #565a60;
  --concrete-line: rgba(27, 28, 31, .18);

  /* Homepage surfaces */
  --charcoal: rgba(247, 247, 244, .86);
  --graphite: rgba(255, 255, 253, .94);
  --graphite-2: rgba(239, 239, 236, .92);
  --line: var(--concrete-line);
  --steel: var(--concrete-muted);
  --steel-dim: #71747a;

  /* Interior-page surfaces */
  --bg: transparent;
  --surface: rgba(247, 247, 244, .86);
  --surface-2: rgba(255, 255, 253, .9);
  --raise: rgba(235, 235, 232, .94);
  --text: var(--concrete-ink);
  --muted: var(--concrete-muted);
  --dim: #73767b;
  --line-soft: rgba(27, 28, 31, .12);
}

html {
  background: #d8d8d4;
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  background: transparent !important;
  color: var(--concrete-ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(rgba(244, 244, 241, .08), rgba(226, 226, 222, .08)),
    url("concrete-wall-texture.jpg") center / cover no-repeat;
}

/* Light glass surfaces allow the concrete to remain visible. */
.trust,
.content,
.why,
.testi,
.final,
.cta,
footer {
  background: rgba(244, 244, 241, .76) !important;
  color: var(--concrete-ink);
  backdrop-filter: blur(2px);
}

.svc,
.why-cell,
.testi-card,
.area-link,
.card,
.oc,
.scard,
.spec,
.theme-switch {
  box-shadow: 0 18px 42px -34px rgba(20, 20, 22, .55);
}

h1,
h2,
h3,
h4,
.faq-q,
.flist h3,
.flist-h {
  color: var(--concrete-ink);
}

.svc p,
.why-cell p,
.testi-card p,
.final .lead,
.foot-about p,
.foot-col a,
.prose p,
.card p,
.cta p {
  color: var(--concrete-muted) !important;
}

.testi-card .who,
.faq-item,
.faq-list,
footer,
.content,
.cta,
.trust {
  border-color: var(--concrete-line) !important;
}

.area-link:hover,
.oc:hover,
.foot-col a:hover {
  color: var(--concrete-ink);
}

/* Light navigation over concrete on interior pages. */
header,
header.scrolled {
  background: rgba(239, 239, 236, .9) !important;
  border-bottom-color: var(--concrete-line) !important;
  backdrop-filter: blur(14px);
}

header .logo,
header .nav-links a,
header .nav-phone,
header.scrolled .logo,
header.scrolled .nav-links a,
header.scrolled .nav-phone {
  color: var(--concrete-ink);
}

header .burger span,
header.scrolled .burger span {
  background: var(--concrete-ink);
}

/* Homepage navigation remains white while it overlays the video. */
.home-page header:not(.scrolled) {
  background: transparent !important;
  border-bottom-color: transparent !important;
  backdrop-filter: none;
}

.home-page header:not(.scrolled) .logo,
.home-page header:not(.scrolled) .nav-links a,
.home-page header:not(.scrolled) .nav-phone {
  color: #fff;
}

.home-page header:not(.scrolled) .burger span {
  background: #fff;
}

.home-page .hero,
.home-page .hero h1,
.home-page .hero h2,
.home-page .hero h3 {
  color: #fff;
}

.home-page .svc:hover,
.home-page .area-link:hover {
  background: rgba(255, 255, 253, .98);
}

.home-page .testi-card .who .name,
.home-page .ci-row .v,
.home-page .contact h2 {
  color: var(--concrete-ink);
}

.home-page .mobile-menu {
  color: #fff;
}

.home-page .mobile-bar .mb-call {
  background: rgba(25, 26, 29, .96);
  color: #fff;
}

/* Dark overlays that sit directly on project photography stay unchanged. */
.shot .cap,
.shot .cam,
.scard h3,
.scard .tag,
.ba-tag {
  color: #fff;
}

.theme-switch {
  background: rgba(245, 245, 242, .92) !important;
}

@media (max-width: 700px) {
  body::before {
    background-position: 46% center;
  }
}