:root  {
  --ink:#0A0A0A;
  --paper:#fff;
  --red:#C1121F;
  --mist:#f4f3f1;
  --line:#dedbd7;
  --muted:#686562;
  --max:1200px;
  --sans:Arial,Helvetica,sans-serif
}
*  {
  box-sizing:border-box
}
html  {
  scroll-behavior:smooth
}
body  {
  margin:0;
  color:var(--ink);
  font-family:var(--sans);
  background:var(--paper);
  line-height:1.5
}
img  {
  display:block;
  width:100%;
  object-fit:cover
}
a  {
  color:inherit;
  text-decoration:none
}
.skip  {
  position:fixed;
  top:-5rem;
  left:1rem;
  background:#fff;
  padding:.75rem;
  z-index:100
}
.skip:focus  {
  top:1rem
}
.wrap  {
  max-width:var(--max);
  margin:auto;
  padding:0 28px
}
.eyebrow  {
  font-size:.7rem;
  letter-spacing:.17em;
  font-weight:700;
  text-transform:uppercase;
  color:var(--red)
}
h1,h2,h3  {
  line-height:1.02;
  letter-spacing:-.055em;
  margin:.5rem 0 1.25rem
}
h1  {
  font-size:clamp(3.2rem,8vw,7.3rem)
}
h2  {
  font-size:clamp(2.4rem,4.5vw,4.5rem)
}
h3  {
  font-size:1.45rem;
  letter-spacing:-.035em
}
p  {
  color:var(--muted);
  font-size:1.02rem
}
.btn  {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:15px 23px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--ink);
  transition:.25s;
  cursor:pointer;
  background:var(--ink);
  color:#fff
}
.btn:hover,.btn:focus  {
  background:var(--red);
  border-color:var(--red);
  transform:translateY(-2px)
}
.btn-outline  {
  color:var(--ink);
  background:transparent
}
.btn-outline:hover,.btn-outline:focus  {
  color:#fff
}
.site-header  {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(10,10,10,.96);
  color:#fff;
  border-bottom:1px solid #252525
}
.nav  {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.brand  {
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:-.07em
}
.brand b  {
  color:var(--red)
}
.nav-links  {
  display:flex;
  gap:1.6rem;
  align-items:center
}
.nav-links a  {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  opacity:.75
}
.nav-links a:hover,.nav-links a:focus,.nav-links .active  {
  color:#fff;
  opacity:1
}
.nav-links .active:after  {
  content:'';
  display:block;
  height:2px;
  background:var(--red);
  margin-top:5px
}
.menu  {
  display:none;
  background:none;
  color:#fff;
  border:0;
  font-size:1.5rem
}
.hero  {
  position:relative;
  min-height:730px;
  color:#fff;
  display:flex;
  align-items:end;
  background:#111
}
.hero picture,.hero picture img  {
  position:absolute;
  inset:0;
  height:100%;
  z-index:0
}
.hero picture img  {
  opacity:.48
}
.hero:after  {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.53) 55%,rgba(0,0,0,.2));
  z-index:1
}
.hero-content  {
  position:relative;
  z-index:2;
  padding-bottom:105px;
  max-width:780px
}
.hero h1  {
  max-width:760px
}
.hero p  {
  color:#e4e1dd;
  max-width:490px;
  margin-bottom:2rem
}
.hero-actions  {
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.hero .btn-outline  {
  border-color:#fff;
  color:#fff
}
.page-hero  {
  background:var(--ink);
  color:#fff;
  padding:125px 0 75px
}
.page-hero p  {
  color:#d3d0cd;
  max-width:560px
}
.section  {
  padding:110px 0
}
.section-tint  {
  background:var(--mist)
}
.split  {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8vw;
  align-items:center
}
.split .image  {
  min-height:540px
}
.stat-row  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:2.8rem
}
.stat strong  {
  font-size:2.2rem;
  letter-spacing:-.07em;
  display:block
}
.stat span  {
  font-size:.73rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted)
}
.service-grid  {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-top:3rem
}
.service-card  {
  background:#fff;
  padding:34px;
  min-height:255px;
  transition:.25s
}
.service-card:hover  {
  background:var(--ink);
  color:#fff
}
.service-card:hover p  {
  color:#d0ceca
}
.service-no  {
  font-size:.72rem;
  color:var(--red);
  font-weight:bold
}
.service-card p  {
  font-size:.9rem
}
.feature  {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8vw
}
.feature-image  {
  min-height:590px
}
.list  {
  margin:2rem 0;
  padding:0;
  list-style:none
}
.list li  {
  border-top:1px solid var(--line);
  padding:15px 0;
  font-weight:600
}
.portfolio-grid  {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px
}
.project  {
  position:relative;
  overflow:hidden;
  background:#222;
  min-height:300px;
  grid-column:span 4
}
.project.wide  {
  grid-column:span 8
}
.project.tall  {
  grid-row:span 2;
  min-height:618px
}
.project img  {
  height:100%;
  position:absolute;
  transition:transform .55s
}
.project:hover img  {
  transform:scale(1.06)
}
.project-caption  {
  position:absolute;
  z-index:2;
  left:0;
  bottom:0;
  right:0;
  padding:52px 22px 22px;
  color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.82))
}
.project-caption span  {
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:#f3b0b5
}
.project-caption h3  {
  margin:4px 0 0
}
.quote  {
  background:var(--red);
  color:#fff;
  padding:75px 0
}
.quote p  {
  color:#ffe7e8
}
.quote-wrap  {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem
}
.quote h2  {
  margin:0;
  max-width:650px
}
.quote .btn  {
  background:#fff;
  color:var(--ink);
  border-color:#fff
}
.quote .btn:hover  {
  background:var(--ink);
  color:#fff
}
.form-grid  {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}
.form-group.full  {
  grid-column:1/-1
}
label  {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:block;
  margin-bottom:7px
}
input,select,textarea  {
  width:100%;
  font:inherit;
  border:1px solid var(--line);
  padding:15px;
  background:#fff;
  border-radius:0
}
textarea  {
  min-height:140px;
  resize:vertical
}
input:focus,select:focus,textarea:focus  {
  outline:2px solid var(--red);
  outline-offset:1px
}
.notice  {
  display:none;
  margin-top:1rem;
  color:#08733e;
  font-weight:bold
}
.contact-details  {
  padding:34px;
  background:var(--ink);
  color:#fff
}
.contact-details p  {
  color:#d2cfca
}
.contact-details a  {
  text-decoration:underline;
  text-decoration-color:var(--red);
  text-underline-offset:4px
}
.map-placeholder  {
  min-height:300px;
  background:linear-gradient(135deg,#211f1e,#4a3536);
  display:grid;
  place-items:center;
  color:#fff;
  text-align:center;
  padding:2rem
}
.footer  {
  background:var(--ink);
  color:#fff;
  padding:65px 0 25px
}
.footer-grid  {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:3rem
}
.footer p,.footer a  {
  color:#aaa6a2;
  font-size:.9rem
}
.footer a:hover  {
  color:#fff
}
.footer ul  {
  list-style:none;
  padding:0
}
.footer li  {
  margin:.55rem 0
}
.foot-bottom  {
  border-top:1px solid #292929;
  margin-top:4rem;
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  color:#898581;
  font-size:.76rem
}
.to-top  {
  position:fixed;
  right:20px;
  bottom:20px;
  border:0;
  background:var(--red);
  color:#fff;
  width:45px;
  height:45px;
  z-index:8;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:.25s
}
.to-top.show  {
  opacity:1;
  transform:none;
  pointer-events:auto
}
.reveal  {
  opacity:0;
  transform:translateY(22px);
  transition:.6s
}
.reveal.visible  {
  opacity:1;
  transform:none
}
.error  {
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:100px 1rem
}
.error h1  {
  font-size:min(25vw,15rem);
  margin:0;
  color:var(--red)
}
.legal  {
  max-width:760px
}
.legal h2  {
  font-size:2rem;
  margin-top:3rem
}
.legal p  {
  max-width:680px
}
@media(max-width:760px)  {
  .wrap  {
    padding:0 20px
  }
  .nav  {
    height:65px
  }
  .menu  {
    display:block
  }
  .nav-links  {
    display:none;
    position:absolute;
    top:65px;
    left:0;
    right:0;
    background:var(--ink);
    padding:18px 20px 28px;
    flex-direction:column;
    align-items:flex-start
  }
  .nav-links.open  {
    display:flex
  }
  .hero  {
    min-height:640px
  }
  .hero-content  {
    padding-bottom:70px
  }
  .split,.feature  {
    grid-template-columns:1fr;
    gap:2rem
  }
  .split .image,.feature-image  {
    min-height:360px;
    order:-1
  }
  .section  {
    padding:75px 0
  }
  .service-grid  {
    grid-template-columns:1fr
  }
  .portfolio-grid  {
    gap:10px
  }
  .project,.project.wide  {
    grid-column:span 12;
    min-height:300px
  }
  .project.tall  {
    min-height:430px
  }
  .stat-row  {
    gap:.5rem
  }
  .stat strong  {
    font-size:1.8rem
  }
  .quote-wrap,.footer-grid  {
    display:block
  }
  .quote .btn  {
    margin-top:1.5rem
  }
  .footer-grid>div  {
    margin-bottom:2rem
  }
  .foot-bottom  {
    display:block
  }
  .foot-bottom span  {
    display:block;
    margin:.5rem 0
  }
  .form-grid  {
    grid-template-columns:1fr
  }
  .form-group.full  {
    grid-column:auto
  }
  .page-hero  {
    padding:85px 0 55px
  }
}
:root  {
  --transition:.3s ease-out
}
@keyframes page-in  {
  from  {
    opacity:0;
    transform:translateY(5px)
  }
  to  {
    opacity:1;
    transform:none
  }
}
body  {
  animation:page-in .38s ease-out
}
:root  {
  --logo-width:148px
}
.brand  {
  display:inline-flex;
  align-items:center;
  letter-spacing:0
}
.brand img  {
  width:var(--logo-width);
  height:45px;
  object-fit:contain;
  object-position:left center
}
.footer .brand img  {
  height:58px;
  width:180px
}
@media(max-width:760px)  {
  .brand img  {
    width:120px;
    height:38px
  }
}
:root  {
  --logo-width:210px
}
.site-header  {
  box-shadow:0 4px 20px rgba(0,0,0,.12)
}
.nav  {
  height:92px
}
.brand  {
  height:70px;
  padding:6px 0
}
.brand img  {
  width:var(--logo-width);
  height:62px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.25));
  transition:transform .3s ease
}
.brand:hover img  {
  transform:scale(1.025)
}
.footer .brand img  {
  width:220px;
  height:72px
}
.scroll-progress  {
  position:absolute;
  bottom:-1px;
  left:0;
  height:3px;
  width:100%;
  background:linear-gradient(90deg,#8e0b15,#e6303d,#C1121F);
  transform:scaleX(0);
  transform-origin:left;
  will-change:transform;
  box-shadow:0 0 10px rgba(193,18,31,.7);
  transition:transform .08s linear
}
@media(max-width:760px)  {
  :root  {
    --logo-width:165px
  }
  .nav  {
    height:76px
  }
  .brand  {
    height:60px
  }
  .brand img  {
    height:54px
  }
  .nav-links  {
    top:76px
  }
  .footer .brand img  {
    width:190px;
    height:62px
  }
}
:root  {
  --logo-width:300px
}
.nav  {
  height:124px
}
.brand  {
  height:106px;
  padding:4px 0
}
.brand img  {
  width:var(--logo-width);
  height:100px
}
.scroll-progress  {
  display:none!important
}
@media(max-width:760px)  {
  :root  {
    --logo-width:220px
  }
  .nav  {
    height:94px
  }
  .brand  {
    height:78px
  }
  .brand img  {
    height:76px
  }
  .nav-links  {
    top:94px
  }
}
:root  {
  --logo-width:380px
}
.nav  {
  height:158px
}
.brand  {
  height:140px;
  padding:3px 0
}
.brand img,.footer .brand img  {
  width:var(--logo-width);
  height:132px;
  object-fit:contain;
  object-position:left center
}
.footer .brand  {
  height:140px
}
.footer .brand img  {
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))
}
@media(max-width:760px)  {
  :root  {
    --logo-width:275px
  }
  .nav  {
    height:116px
  }
  .brand  {
    height:98px
  }
  .brand img,.footer .brand img  {
    height:94px
  }
  .nav-links  {
    top:116px
  }
  .footer .brand  {
    height:102px
  }
}