@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Baskerville:wght@400&display=swap');

:root{
  --ink:#172025;
  --green:#5f7f68;
  --cream:#fbfaf7;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans",Arial,sans-serif;
}
.page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(470px, 46%) 1fr;
}
.content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  padding:64px clamp(42px,6vw,110px) 76px;
}
.brand img{
  display:block;
  width:min(420px,72%);
  height:auto;
}
.strapline{
  margin-top:15px;
  color:var(--green);
  text-transform:uppercase;
  letter-spacing:.23em;
  font-size:clamp(.78rem,1.15vw,1.15rem);
  font-weight:500;
}
.message{
  max-width:780px;
  margin-top:auto;
  margin-bottom:auto;
  padding-top:75px;
}
h1{
  margin:0;
  font-family:"Libre Baskerville",Georgia,serif;
  font-size:clamp(3.4rem,6.3vw,7.4rem);
  line-height:1.05;
  font-weight:400;
  letter-spacing:-.04em;
}
.rule{
  width:160px;
  height:3px;
  background:var(--green);
  margin:42px 0 36px;
}
.intro{
  margin:0 0 36px;
  color:#263037;
  font-size:clamp(1.05rem,1.45vw,1.55rem);
  line-height:1.55;
}
.email{
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--green);
  text-decoration:none;
  font-size:clamp(1rem,1.35vw,1.35rem);
}
.email:hover{text-decoration:underline;text-underline-offset:5px}
.icon{
  width:54px;
  height:54px;
  border:1.5px solid var(--green);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.2rem;
}
.visual{
  min-height:100vh;
  position:relative;
  background:
    linear-gradient(to right,var(--cream) 0%,rgba(251,250,247,.86) 8%,rgba(251,250,247,.12) 38%,rgba(251,250,247,0) 55%),
    url("construction-visual.jpg") center right/cover no-repeat;
}
.visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.08),rgba(255,255,255,0) 60%);
}
@media(max-width:850px){
  .page{
    grid-template-columns:1fr;
    grid-template-rows:auto 40vh;
  }
  .content{
    min-height:60vh;
    padding:38px 28px 52px;
  }
  .brand img{width:250px}
  .strapline{font-size:.72rem}
  .message{margin-top:50px;padding-top:25px}
  h1{font-size:clamp(3rem,14vw,5.2rem)}
  .visual{
    min-height:40vh;
    background:
      linear-gradient(to bottom,var(--cream) 0%,rgba(251,250,247,.4) 20%,rgba(251,250,247,0) 55%),
      url("construction-visual.jpg") center/cover no-repeat;
  }
}