.brand img,
footer img {
  filter: none;
  object-fit: contain;
}

/* Reference-led architectural hero */
.site-header {
  height: 104px;
  padding: 0 6.8vw;
  background: transparent;
  border: 0;
}

.site-header .brand img { width: 205px; }
.site-header nav,
.site-header .header-cta { display: none; }
.menu-button {
  display: flex;
  width: 46px;
  height: 38px;
  padding: 4px 0;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: 0;
}
.menu-button span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: transform .25s, opacity .25s;
}
.menu-open .menu-button span:nth-child(1) { transform: translateY(14px) rotate(45deg); }
.menu-open .menu-button span:nth-child(2) { opacity: 0; }
.menu-open .menu-button span:nth-child(3) { transform: translateY(-14px) rotate(-45deg); }

.hero {
  position: relative;
  width: 100%;
  min-height: 980px;
  height: 100vh;
  margin: 0;
  padding: 150px 7vw 190px;
  align-items: flex-start;
  background: #111214 url("assets/hero-wall-v2.webp") center 35% / cover no-repeat;
  border: 0;
  box-shadow: none;
}
.hero::after { display: none; }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3,4,5,.12), rgba(3,4,5,.2) 58%, rgba(3,4,5,.58)), linear-gradient(0deg, rgba(4,5,6,.65), transparent 35%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(740px, 58vw);
}
.hero-intro {
  margin: 0 0 58px;
  color: #dedede;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
}
.channel-headline {
  margin: 0;
  color: #151618;
  font-size: clamp(68px, 6.2vw, 108px);
  line-height: .96;
  letter-spacing: -.065em;
  font-weight: 800;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
  text-shadow:
    2px 3px 0 #050506,
    5px 7px 0 rgba(0,0,0,.58),
    -5px 1px 10px rgba(255,224,171,.86),
    0 0 18px rgba(255,209,135,.68),
    0 0 36px rgba(255,188,92,.3);
}
.hero-service-line {
  width: max-content;
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 2px solid rgba(221,177,112,.72);
  color: #d6ad75;
  font: 600 12px/1.5 Montserrat, sans-serif;
  letter-spacing: .24em;
}
.hero .hero-description {
  margin: 52px 0 30px;
  color: #d0d0d0;
  font-size: 17px;
  line-height: 1.6;
}
.hero-work-button {
  display: inline-flex;
  min-width: 245px;
  padding: 17px 25px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #d4ad78;
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.hero-work-button:hover { background: #d4ad78; color: #111214; }
.hero-work-button span { font-size: 24px; font-weight: 300; }
.hero-capabilities {
  position: absolute;
  z-index: 2;
  top: 180px;
  right: 8vw;
  list-style: none;
  margin: 0;
  padding: 0;
  color: #d0d0d0;
}
.hero-capabilities li { display: grid; grid-template-columns: 36px auto; margin-bottom: 17px; }
.hero-capabilities b,
.hero-capabilities span { font: 500 12px Montserrat, sans-serif; letter-spacing: .2em; }
.hero-capabilities b { color: #96979a; }
.scroll-cue { left: auto; right: 2.4vw; bottom: 220px; writing-mode: vertical-rl; color: #ddd; }
.hero-bottom-services {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 26px 7vw;
  background: rgba(7,8,9,.88);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-bottom-services > div {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: auto 1fr;
  padding: 0 5vw;
  border-right: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.hero-bottom-services > div:last-child { border: 0; }
.hero-bottom-services b { grid-row: 1 / 3; font-size: 25px; font-weight: 400; color: #e2e2e2; }
.hero-bottom-services strong { font-size: 16px; font-weight: 500; }
.hero-bottom-services span { color: #aaa; font-size: 13px; line-height: 1.55; }

@media (max-width: 820px) {
  .site-header { height: 88px; padding: 0 28px; }
  .site-header .brand img { width: 176px; }
  .menu-button { width: 36px; height: 31px; }
  .menu-open .menu-button span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .menu-open .menu-button span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
  .hero {
    min-height: 1250px;
    height: auto;
    padding: 142px 34px 255px;
    background-position: center top;
  }
  .hero-shade { background: linear-gradient(90deg, rgba(3,4,5,.02), rgba(3,4,5,.15) 70%, rgba(3,4,5,.38)), linear-gradient(0deg, rgba(3,4,5,.76), transparent 45%); }
  .hero-copy { width: 100%; }
  .hero-intro { margin-bottom: 82px; font-size: 16px; }
  .channel-headline { font-size: clamp(54px, 15vw, 72px); line-height: 1.02; }
  .hero-service-line { margin-top: 30px; font-size: 9px; letter-spacing: .15em; }
  .hero .hero-description { margin-top: 48px; font-size: 16px; }
  .hero-work-button { min-width: 230px; }
  .hero-capabilities { top: 150px; right: 30px; transform: scale(.86); transform-origin: top right; }
  .hero-capabilities li { margin-bottom: 12px; }
  .scroll-cue { right: 12px; bottom: 270px; }
  .hero-bottom-services {
    height: 205px;
    padding: 30px 18px;
  }
  .hero-bottom-services > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 12px;
    text-align: center;
  }
  .hero-bottom-services b { margin-bottom: 10px; font-size: 22px; }
  .hero-bottom-services strong { margin-bottom: 8px; font-size: 15px; }
  .hero-bottom-services span { font-size: 12px; }
}

.brand img { width: 170px; }
footer img { width: 155px; }

.hero-mark {
  width: clamp(230px, 27vw, 430px);
  right: 7vw;
  bottom: auto;
  top: 42%;
  opacity: .86;
  transform: translateY(-50%) rotate(-1.4deg);
}

.hero-mark img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) opacity(.82);
}

.hero {
  background-color: #111214;
  background-image: linear-gradient(90deg, rgba(8,9,11,.98) 0%, rgba(8,9,11,.9) 38%, rgba(8,9,11,.18) 70%, rgba(8,9,11,.08) 100%), url("assets/hero-signage-logo-centered.webp");
  background-size: cover;
  background-position: center;
}

.hero::after { display: none; }
.hero-grid { opacity: .18; }

.contact {
  position: relative;
  background: #191a1d;
}

.contact::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 54px;
  height: 3px;
  background: #b12a3b;
  transform: translateX(-50%);
}

.contact .eyebrow { color: #c8a76d; }
.contact > p:not(.eyebrow) { color: #a9aaad; }
.contact-actions a {
  background: #b12a3b;
  color: #fff;
}
.contact-actions a + a {
  background: transparent;
  color: #fff;
  border-color: #56585d;
}
.contact small { color: #74767b; }
.contact address {
  margin-top: 24px;
  color: #85878c;
  font-size: 14px;
  font-style: normal;
}

footer p { line-height: 1.8; }
footer a:hover { color: #fff; }

/* Hero as one fabricated sign face */
body {
  background-color: #252629;
  background-image: linear-gradient(115deg, rgba(255,255,255,.025), transparent 42%);
}

.works,
.process {
  background: var(--paper);
  color: var(--ink);
}

.works .section-heading > p,
.process .section-heading > p,
.process li p {
  color: #686a6e;
}

.works .filter:not(.active) {
  color: #55585d;
  border-color: rgba(17,18,20,.18);
}

.site-header {
  top: 14px;
  left: 14px;
  right: 14px;
  width: auto;
  padding-left: calc(4.5vw - 14px);
  padding-right: calc(4.5vw - 14px);
  background: linear-gradient(180deg, #111214, #0b0c0e);
  border: 1px solid #4a4b4e;
  border-bottom-color: #27282b;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.hero {
  width: auto;
  min-height: calc(100vh - 28px);
  margin: 14px;
  background-color: #090a0c;
  background-image:
    radial-gradient(circle at 72% 22%, rgba(200,167,109,.07), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 38%),
    linear-gradient(180deg, #101114, #07080a);
  background-size: auto;
  border: 1px solid #55565a;
  box-shadow:
    inset 0 0 0 5px #121316,
    inset 0 0 45px rgba(0,0,0,.7),
    0 10px 28px rgba(0,0,0,.45),
    0 0 22px rgba(200,167,109,.08);
}

.hero::after {
  display: block;
  content: "";
  position: absolute;
  inset: 7px;
  width: auto;
  height: auto;
  border: 1px solid rgba(200,167,109,.25);
  border-radius: 0;
  box-shadow: inset 0 0 18px rgba(200,167,109,.05);
  pointer-events: none;
}

.hero-grid {
  opacity: .34;
  background-size: 220px 220px;
  mask-image: linear-gradient(to right, transparent, rgba(0,0,0,.7), transparent);
}

.hero h1 {
  text-shadow: 0 2px 0 #222429, 0 0 16px rgba(255,255,255,.08);
}

.hero h1 span {
  text-shadow: 0 2px 0 #3b2b14, 0 0 18px rgba(215,177,111,.16);
}

.hero-mark {
  top: auto;
  right: 34px;
  bottom: 34px;
  width: 190px;
  opacity: .14;
  transform: none;
}

.hero-mark img { filter: none; }

/* Alternative: only the slogan is the sign */
.site-header {
  top: 0;
  left: 0;
  right: 0;
  padding: 0 4.5vw;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  background: rgba(10,11,13,.9);
  box-shadow: none;
}

.hero {
  width: 100%;
  min-height: 820px;
  height: 100vh;
  margin: 0;
  border: 0;
  background:
    linear-gradient(90deg, rgba(4,5,7,.97) 0%, rgba(9,10,12,.88) 58%, rgba(18,19,22,.72) 100%),
    url("assets/hero-signage-logo-centered.webp") center / cover;
  box-shadow: none;
}

.hero::after { display: none; }

.slogan-sign {
  position: relative;
  width: min(680px, 53vw);
  padding: 34px 42px 40px;
  background: linear-gradient(145deg, #18191c, #090a0c 68%);
  border: 5px solid #303236;
  outline: 1px solid rgba(200,167,109,.72);
  outline-offset: -10px;
  box-shadow:
    9px 12px 0 #050608,
    12px 16px 28px rgba(0,0,0,.7),
    inset 0 1px rgba(255,255,255,.08),
    inset 0 0 28px rgba(0,0,0,.72),
    0 0 18px rgba(200,167,109,.1);
}

.slogan-sign::before,
.slogan-sign::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  top: 16px;
  background: #85817a;
  box-shadow: inset 1px 1px rgba(255,255,255,.35), 0 1px 2px #000;
}

.slogan-sign::before { left: 17px; }
.slogan-sign::after { right: 17px; }
.slogan-sign .eyebrow { margin-bottom: 22px; }
.slogan-sign h1 { font-size: clamp(38px, 4.3vw, 68px); }
.hero-description { margin-top: 38px; }

@media (max-width: 820px) {
  .brand img { width: 140px; }
  .hero-mark {
    width: 174px;
    top: 25%;
    right: 22px;
    opacity: .5;
  }
  .hero {
    background-image: linear-gradient(180deg, rgba(8,9,11,.42) 0%, rgba(8,9,11,.88) 42%, rgba(8,9,11,.98) 100%), url("assets/hero-signage-logo-centered.webp");
    background-position: 69% center;
  }
  .hero-copy { margin-top: 92px; }
  .menu-open nav {
    display: flex;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 24px;
    background: #151619;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .site-header {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 0 22px;
  }
  .hero {
    min-height: calc(100vh - 20px);
    margin: 10px;
    padding-left: 34px;
    padding-right: 34px;
    background-image:
      radial-gradient(circle at 75% 20%, rgba(200,167,109,.08), transparent 28%),
      linear-gradient(145deg, rgba(255,255,255,.025), transparent 35%),
      linear-gradient(180deg, #101114, #07080a);
    background-position: center;
  }
  .hero::after { inset: 6px; }
  .hero-copy { margin-top: 50px; }
  .hero-mark {
    top: auto;
    right: 24px;
    bottom: 28px;
    width: 128px;
    opacity: .12;
    transform: none;
  }
  .site-header {
    top: 0;
    left: 0;
    right: 0;
    padding: 0 22px;
    background: rgba(8,9,11,.92);
  }
  .hero {
    width: 100%;
    min-height: 820px;
    height: 100vh;
    margin: 0;
    padding-left: 24px;
    padding-right: 24px;
    background:
      linear-gradient(180deg, rgba(7,8,10,.56) 0%, rgba(7,8,10,.9) 30%, rgba(7,8,10,.98) 100%),
      url("assets/hero-signage-logo-centered.webp") 67% center / cover;
  }
  .hero-copy { margin-top: 54px; }
  .slogan-sign {
    width: 100%;
    padding: 28px 24px 32px;
    border-width: 4px;
    outline-offset: -8px;
    box-shadow: 6px 8px 0 #050608, 9px 12px 22px rgba(0,0,0,.68), inset 0 0 24px rgba(0,0,0,.7);
  }
  .slogan-sign h1 { font-size: clamp(38px, 11vw, 54px); }
  .slogan-sign .eyebrow { font-size: 10px; letter-spacing: .16em; }
  .hero-description { margin-top: 32px; }
}