*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  background:#000;
  color:#fff;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

body{min-height:100svh}
a{color:inherit}

/* ================= DESKTOP ================= */

.page{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:
    #000 url("hero-desktop.jpg") center center / cover no-repeat;
}

.overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.88) 23%,
      rgba(0,0,0,.64) 40%,
      rgba(0,0,0,.24) 58%,
      rgba(0,0,0,.05) 78%,
      rgba(0,0,0,.02) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.28) 0%,
      rgba(0,0,0,.05) 52%,
      rgba(0,0,0,.02) 100%
    );
}

.topbar{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:34px 4.2vw 0;
}

/* Logo crisp; LAB begins under the Y */
.brand{
  --brand-width:220px;
  display:block;
  width:var(--brand-width);
  text-decoration:none;
  color:#fff;
}

.wordmark,
.labrow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  width:var(--brand-width);
  text-align:center;
  align-items:center;
}

.wordmark{
  font-size:39px;
  line-height:1;
  font-weight:400;
}

.labrow{
  margin-top:10px;
  font-size:19px;
  line-height:1;
  font-weight:300;
}

.lab-l{grid-column:3}
.lab-a{grid-column:4}
.lab-b{grid-column:5}

.contact{
  margin-top:7px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  letter-spacing:.10em;
  padding-bottom:7px;
  border-bottom:1.5px solid #a6ca44;
}

.content{
  position:relative;
  z-index:2;
  width:min(680px,48vw);
  margin-left:4.2vw;
  padding-top:12.5vh;
  padding-bottom:28px;
}

.tagline{
  margin:0;
  font-size:48px;
  line-height:1.08;
  font-weight:650;
  letter-spacing:-.035em;
  white-space:nowrap;
}

.tagline b{
  color:#a6ca44;
  font-weight:500;
  padding:0 .14em;
}

.mobile-tagline{display:none}

.green-rule{
  width:62px;
  height:2px;
  margin:28px 0 27px;
  background:#a6ca44;
}

p{
  margin:0;
  color:rgba(255,255,255,.95);
}

.lead{
  margin-bottom:29px;
  font-size:29px;
  line-height:1.45;
  font-weight:350;
}

.body-copy{
  margin-bottom:21px;
  font-size:17px;
  line-height:1.62;
  font-weight:300;
}

.mountain-mark{
  display:block;
  width:76px;
  height:auto;
  margin:34px 0 14px;
  color:#a6ca44;
}

.project{
  display:flex;
  gap:20px;
  align-items:stretch;
}

.vertical-rule{
  width:2px;
  min-height:58px;
  flex:0 0 auto;
  background:#a6ca44;
}

.project p{
  font-size:14px;
  line-height:1.72;
  letter-spacing:.08em;
}

.project strong{
  color:#fff;
  font-weight:600;
}

.project em{
  color:#a6ca44;
  font-style:normal;
  font-weight:500;
}

.white-rule{
  width:65px;
  height:1.5px;
  margin:24px 0 14px;
  background:#fff;
}

.signature{
  font-size:16px;
  line-height:1.5;
}

.signature a{
  color:#a6ca44;
  text-decoration:none;
}

/* ================= MOBILE ================= */

@media(max-width:800px){

  .page{
    min-height:100svh;
    overflow:visible;
    background:
      #000 url("hero-mobile.jpg") center top / cover no-repeat;
  }

  .overlay{
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.70) 0%,
        rgba(0,0,0,.28) 62%,
        rgba(0,0,0,.05) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,.32) 0%,
        rgba(0,0,0,.05) 30%,
        rgba(0,0,0,.30) 47%,
        rgba(0,0,0,.72) 69%,
        rgba(0,0,0,.95) 88%,
        #000 100%
      );
  }

  .topbar{
    padding:22px 18px 0 20px;
  }

  .brand{
    --brand-width:165px;
  }

  .wordmark{
    font-size:28px;
  }

  .labrow{
    margin-top:7px;
    font-size:14px;
  }

  .contact{
    margin-top:6px;
    font-size:10.5px;
    padding-bottom:5px;
    border-bottom-width:1px;
  }

  .content{
    width:auto;
    margin:0;
    padding:27svh 18px 30px 22px;
  }

  .desktop-tagline{display:none}

  .mobile-tagline{
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .tagline{
    font-size:29px;
    line-height:1.14;
    letter-spacing:-.03em;
    white-space:normal;
  }

  .tagline b{
    padding:0 .09em;
  }

  .green-rule{
    width:56px;
    margin:20px 0 22px;
  }

  .desktop-break{display:none}

  .lead{
    width:100%;
    max-width:none;
    margin-bottom:27px;
    font-size:20px;
    line-height:1.45;
  }

  /* Requested: 15px for the two explanatory paragraphs */
  .body-copy{
    width:100%;
    max-width:none;
    margin-bottom:22px;
    font-size:15px;
    line-height:1.60;
  }

  .mountain-mark{
    width:61px;
    margin:28px 0 12px;
  }

  .project{
    gap:15px;
  }

  .vertical-rule{
    min-height:54px;
  }

  .project p{
    font-size:12.5px;
    line-height:1.68;
    letter-spacing:.06em;
  }

  .white-rule{
    width:50px;
    margin:21px 0 13px;
  }

  .signature{
    font-size:15px;
    line-height:1.5;
    padding-bottom:18px;
  }
}

@media(max-width:390px){
  .brand{--brand-width:155px}
  .wordmark{font-size:26px}
  .labrow{font-size:13px}
  .tagline{font-size:27px}
  .lead{font-size:19px}
}