:root{
  --bg:#f7f5f0;
  --surface:#ffffff;
  --text:#15221d;
  --muted:#5d6a64;
  --line:#ddd8cd;
  --accent:#16392f;
  --accent-soft:#a9884a;
  --max:980px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter, Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

.container{
  width:min(calc(100% - 2rem), var(--max));
  margin:0 auto;
}

header{
  border-bottom:1px solid var(--line);
  background:rgba(247,245,240,.94);
}

.nav{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand img{
  height:56px;
  width:auto;
}

nav.links{
  display:flex;
  gap:1.15rem;
  flex-wrap:wrap;
}

nav.links a{
  color:var(--muted);
  font-size:.96rem;
}

nav.links a.active,
nav.links a:hover{
  color:var(--accent);
}

main{
  padding:2.5rem 0 4rem;
}

section{
  padding:2.25rem 0;
}

.hero{
  padding-top:1.5rem;
  padding-bottom:3rem;
}

.hero-image{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.hero-inner{
  width:min(calc(100% - 2rem), 980px);
  margin:0 auto;
  padding-left:0;
  padding-right:0;
  position:relative;
  z-index:2;
}

.hero-image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("assets/hero-bg.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.99999;
  z-index:-2;
}

.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(247,245,240,.55), rgba(247,245,240,.72));
  z-index:-1;
}

.kicker{
  display:inline-block;
  margin-bottom:1rem;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent-soft);
  font-weight:700;
}

h1,h2,h3{
  margin:0 0 .8rem;
  line-height:1.15;
  font-family:Georgia, "Times New Roman", serif;
  font-weight:500;
}

h1{
  font-size:clamp(2.8rem, 5vw, 5rem);
  line-height:.98;
  max-width:13ch;
  letter-spacing:-0.04em;
}

h2{
  font-size:clamp(1.5rem, 3vw, 2.4rem);
  margin-top:0;
}

h3{
  font-size:1.18rem;
  margin-bottom:.45rem;
}

p{
  margin:.85rem 0;
}

.lead{
  font-size:1.05rem;
  line-height:1.7;
  max-width:58rem;
  color:rgba(21,34,29,.8);
}

.simple-stat{
  margin-top:1.25rem;
  color:var(--accent);
  font-family:Georgia, "Times New Roman", serif;
  font-size:1.35rem;
}

.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

.stack > * + *{
  margin-top:1rem;
}

.cardless-list{
  padding-left:1.1rem;
  margin:1rem 0 0;
}

.cardless-list li{
  margin:.45rem 0;
}

.page-intro{
  border-top:1px solid var(--line);
  padding-top:2rem;
}

.person{
  padding:1.1rem 0;
  border-top:1px solid var(--line);
}

.person:first-of-type{
  border-top:none;
}

.role{
  color:var(--accent-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  font-weight:700;
  margin-bottom:.55rem;
}

.contact-box{
  max-width:36rem;
}

form{
  margin-top:1.25rem;
}

label{
  display:block;
  margin:.8rem 0 .35rem;
  font-weight:600;
}

input,
textarea,
select{
  width:100%;
  padding:.9rem 1rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:0;
  color:var(--text);
  font:inherit;
}

textarea{
  min-height:150px;
  resize:vertical;
}

.button{
  display:inline-block;
  margin-top:1rem;
  background:var(--accent);
  color:#fff;
  padding:.9rem 1.15rem;
  border:none;
  border-radius:0;
  font-weight:600;
  cursor:pointer;
}

footer{
  border-top:1px solid var(--line);
  padding:1.25rem 0 2rem;
  color:var(--muted);
  font-size:.94rem;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

@media (max-width:760px){
  .nav{
    padding:.8rem 0;
    align-items:flex-start;
    flex-direction:column;
  }

  .grid-2{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .hero{
    padding-top:1.25rem;
    padding-bottom:2.25rem;
  }

  .hero-inner{
    width:min(calc(100% - 1.5rem), 1280px);
    padding-left:.75rem;
    padding-right:.75rem;
  }

  h1{
    font-size:clamp(2.5rem, 10vw, 4rem);
    max-width:10ch;
  }

  .lead{
    font-size:1rem;
    max-width:100%;
  }
}