:root {
  --navy: #133752;
  --blue: #103d77;
}
.page {
  background-color: #fdfefe;
}
.header { padding-top: 10px; }
.brand, .brand img { width: 158px; height: 73px; }
.navigation { margin-left: 72px; padding-top: 34px; }
.header-call { margin-top: 25px; }
.hero { background: linear-gradient(110deg, #fff 14%, #fdfefe 43%, #dcecfb 100%); }
.hero-photo { mask-image: linear-gradient(90deg, transparent, #000 13%); }
.hero-wave { height: 100%; width: 100%; pointer-events: none; }
.hero-signature { position: relative; width: 262px; height: 58px; mix-blend-mode: normal; margin-top: 13px; }
.hero-signature > img:first-child { width: 262px; height: 32px; }
.signature-underline { position: absolute; top: 33px; left: 41px; width: 206px; height: 23px; }
.about-brush { top: 0; width: 165px; height: 248px; }
.about:after {
  bottom: -18px;
  height: 42px;
  clip-path: none;
  background: url('assets/refined/about-wave.svg') center/100% 100% no-repeat;
}
.service-card {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 6px rgb(27 48 62 / 8%), 0 0 2px rgb(27 48 62 / 9%);
}
.service-card img { border-radius: 4px 4px 1px 1px; }
.project img { border-radius: 2px; }
.quote-mark { display: flex; align-items: center; justify-content: center; background: #fceedd; }
.quote-mark img { width: 25px; height: 25px; }
.promise { background: #fdfefe; }
.promise:before { content: ''; position: absolute; top: 2px; left: 0; width: 119px; height: 94px; background: url('assets/refined/left-cream-brush-transparent.png') center/100% 100%; pointer-events: none; }
.promise > img { width: 307px; height: 103px; mix-blend-mode: normal; }
.footer-brand img { filter: none; }
.footer-brand .footer-signature { margin: 7px 0 0; width: 181px; height: 26px; }
.button { background-color: #153959; box-shadow: inset 0 0 0 1px rgb(7 42 69 / 25%); }
.button-light { background-color: #fff; }
.button-light:hover { background-color: var(--cream); }
@media (min-width: 951px) and (max-width: 1099px) {
  .services { padding-left: calc(43 / 977 * 100%); padding-right: calc(42 / 977 * 100%); }
  .service-grid { grid-template-columns: 209fr 209fr 208fr 208fr; column-gap: 19.333333px; }
  .service-card img { height: 125px; }
  .work { padding-left: calc(45 / 977 * 100%); padding-right: calc(44 / 977 * 100%); }
  .project-grid { grid-template-columns: 290fr 272fr 289fr; column-gap: 18.5px; }
  .project img { height: 141px; }
  .footer { grid-template-columns: 24% 53% 23%; }
  .footer-brand { padding-top: 77px; }
  .footer-brand > a > img { width: 155px; height: 71px; margin-left: 19px; }
  .footer-brand .footer-signature { margin-top: 6px; }
}
@media (min-width: 1100px) {
  .navigation { margin-left: auto; }
  .about-brush { width: 185px; height: auto; top: 28px; }
  .footer-brand > a > img { width: 195px; height: auto; }
  .footer-brand .footer-signature { width: 220px; height: auto; }
}
@media (max-width: 950px) {
  .navigation { margin: 0; padding: 18px; }
  .brand, .brand img { width: 148px; height: auto; }
  .hero-photo { mask-image: linear-gradient(180deg, transparent, #000 27%); }
  .hero-wave { display: none; }
  .hero-signature { width: 262px; height: 58px; }
  .footer-brand > a > img { width: 155px; height: auto; margin: auto; }
  .footer-brand .footer-signature { width: 181px; height: 26px; margin: 7px auto 0; }
  .promise:before { opacity: .6; }
}

.footer:before { background: linear-gradient(#1237500a,#1237500a), url('assets/hq/footer-background.png') center/100% 100% no-repeat; }

.page { background-image: url('assets/refined/paper-texture.png'); background-size: 30px 60px; }
@media (min-width:951px) and (max-width:1099px) {
  .footer-brand { padding-top:0; align-self:start; position:relative; top:78px; }
  .service-card:nth-child(2) { position:relative; left:-.328125px; }
  .service-card:nth-child(3) { position:relative; left:-.65625px; }
  .service-card:nth-child(4) { position:relative; left:.015625px; }
  .project:nth-child(2) { position:relative; left:-.5px; }
}

.hero-photo { background-image: url('assets/hq/hero-house.png'); }

.about-brush { mask-image:linear-gradient(90deg,transparent,#000 16%); }
.promise > img { mask-image:linear-gradient(90deg,transparent,#000 10%); }
.hero:after { content:'';position:absolute;bottom:0;left:0;width:100%;height:1.8711%;background:url('assets/refined/hero-bottom-edge.png') center/100% 100%;pointer-events:none;z-index:2; }
@media(max-width:950px){.hero:after{display:none}}

@media(max-width:950px){.footer:before{background-size:cover;background-position:center}}