.hero:before {
  z-index: 1;
  pointer-events: none;
}

.hero-photo {
  position: absolute;
  inset: 84px 0 0 48%;
  margin: 0;
  overflow: hidden;
}

.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #071725 0%, rgba(7,23,37,.9) 16%, rgba(7,23,37,.22) 67%, rgba(7,23,37,.08)),
    linear-gradient(0deg, rgba(7,23,37,.65), transparent 48%);
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center;
  filter: saturate(.86) contrast(1.04);
}

.hero-content,
.hero-badge,
.scroll-cue {
  z-index: 3;
}

.brand-logo {
  object-fit: contain;
  border-radius: 5px;
  background: #231f20;
}

.site-header .brand-logo {
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}

.service-grid {
  grid-template-columns: repeat(2, 1fr);
}

.service-card:nth-child(2) {
  border-right: 0;
}

.service-card:nth-child(-n+2) {
  border-bottom: 1px solid var(--line);
}

.instagram-link {
  color: #28b4ff;
  font-size: .76rem;
  font-weight: 700;
  margin-top: 6px;
}

.instagram-link:hover {
  color: #fff;
}

.contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.contact-actions .button {
  margin-top: 0;
}

.button-email {
  border: 1px solid #231f20;
  color: #231f20;
}

.button-email:hover {
  background: #231f20;
  color: #fff;
}

.footer-email {
  color: #fff;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

.footer-email:hover {
  color: #fff200;
}

.project-grid {
  grid-template-columns: 1.25fr .75fr;
  grid-template-rows: none;
  grid-auto-rows: 260px;
}

.project {
  background: #0c2436;
}

.project::before {
  display: none;
}

.project img,
.project video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.88);
  transition: transform .6s ease, filter .4s ease;
}

.project:hover img,
.project:hover video {
  transform: scale(1.035);
  filter: saturate(1);
}

.project video {
  object-position: center 45%;
}

.video-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  padding: 5px 9px;
  background: #fff200;
  color: #231f20;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.before-after-media {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.before-after-media > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.before-after-media > div:first-child {
  border-right: 2px solid #fff200;
}

.comparison-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  padding: 5px 9px;
  background: rgba(35,31,32,.88);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.before-after-media > div:last-child .comparison-tag {
  background: #fff200;
  color: #231f20;
}

.project-large {
  grid-row: span 2;
}

.project-number {
  color: #fff;
  background: rgba(3,13,22,.58);
  padding: 5px 8px;
}

.project-label {
  padding-top: 44px;
}

@media (max-width: 820px) {
  .hero-photo {
    inset: 72px 0 0 18%;
  }

  .hero-photo::after {
    background: linear-gradient(90deg, rgba(7,23,37,.98) 0%, rgba(7,23,37,.84) 40%, rgba(7,23,37,.28)), linear-gradient(0deg, rgba(7,23,37,.7), transparent 45%);
  }

  .project-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 280px;
  }

  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-card:nth-child(2) {
    border-right: 0;
  }

  .contact-actions {
    grid-template-columns: 1fr;
  }

  .project-large {
    grid-row: auto;
  }
}

/* CNC logo palette */
:root {
  --navy: #231f20;
  --navy-2: #2e2b2c;
  --blue: #fff200;
  --blue-bright: #fff83b;
  --white: #f7f7f5;
  --muted: #b9b7b8;
  --ink: #231f20;
  --line: #d8d6d6;
}

body { background: #f7f7f5; }
.site-header { background: rgba(35,31,32,.97); }
.brand small { color: #c9c7c8; }

.nav-cta,
.button-primary { color: #231f20; }

.nav-cta:hover,
.button-primary:hover {
  background: #fff;
  color: #231f20;
}

.hero { background: linear-gradient(105deg, #231f20 0%, #2d292a 56%, #3a3637 100%); }

.hero-photo::after {
  background:
    linear-gradient(90deg, #231f20 0%, rgba(35,31,32,.92) 16%, rgba(35,31,32,.25) 67%, rgba(35,31,32,.08)),
    linear-gradient(0deg, rgba(35,31,32,.72), transparent 48%);
}

.hero h1 span { -webkit-text-stroke-color: #fff200; }
.trust-strip { color: #231f20; }
.trust-strip div { border-color: rgba(35,31,32,.22); }
.trust-strip strong { color: #231f20; }
.work-section { background: #231f20; }
.project { background: #353132; }
.about-mark::after { background: #231f20; }
.estimate { background: #2e2b2c; }
.estimate-card { border-top: 5px solid #fff200; }
footer { background: #171415; }
.footer-brand .brand-logo { background: #231f20; }

.instagram-link,
.hero .eyebrow,
.work-section .eyebrow,
.estimate .eyebrow { color: #fff200; }

.services .eyebrow,
.service-icon,
.about-copy .eyebrow,
.about-copy li span { color: #8c8500; }

@media (max-width: 820px) {
  .hero-photo::after {
    background: linear-gradient(90deg, rgba(35,31,32,.99) 0%, rgba(35,31,32,.86) 40%, rgba(35,31,32,.3)), linear-gradient(0deg, rgba(35,31,32,.72), transparent 45%);
  }
}