@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root{
  --ink:#16202A;
  --paper:#F7F5F0;
  --slate:#5B6672;
  --hairline:#D8D3C7;
  --accent:#3E6E68;
  --accent-soft:#E4ECEA;
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans',sans-serif;
  font-size:17px;
  line-height:1.6;
}
h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.15;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:500;}
h2{font-size:clamp(1.6rem,3vw,2.2rem);}
p{margin:0 0 1.1em;max-width:62ch;color:var(--ink);}
a{color:var(--accent);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

header.site{
  border-bottom:1px solid var(--hairline);
  position:sticky;top:0;background:rgba(247,245,240,.92);backdrop-filter:blur(6px);
  z-index:10;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;}
.logo{font-family:'Fraunces',serif;font-weight:600;font-size:1.25rem;text-decoration:none;color:var(--ink);}
.logo span{color:var(--accent);}
.nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
.nav a.link{text-decoration:none;color:var(--slate);font-size:.95rem;}
.nav a.link:hover{color:var(--ink);}
.nav .cta{background:var(--ink);color:var(--paper);padding:9px 18px;border-radius:3px;text-decoration:none;font-size:.9rem;}
.navToggle{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer;}

section{padding:72px 0;}
.hero{padding-top:64px;padding-bottom:56px;border-bottom:1px solid var(--hairline);}
.hero .grid{display:grid;grid-template-columns:1.3fr .9fr;gap:56px;align-items:start;}
.hero .tag{color:var(--accent);font-size:.95rem;margin-bottom:14px;}
.hero .lede{font-size:1.15rem;color:var(--slate);max-width:46ch;}
.hero .stack{border-left:1px solid var(--hairline);padding-left:28px;}
.hero .stack div{padding:14px 0;border-bottom:1px solid var(--hairline);}
.hero .stack div:last-child{border-bottom:0;}
.hero .stack b{display:block;font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;}
.hero .stack small{color:var(--slate);}

.band{background:var(--accent-soft);border-bottom:1px solid var(--hairline);}

.split{display:grid;grid-template-columns:.7fr 1.3fr;gap:48px;}
.split h2{margin-bottom:18px;}

.list-plain{list-style:none;margin:0;padding:0;}
.list-plain li{padding:22px 0;border-top:1px solid var(--hairline);display:grid;grid-template-columns:60px 1fr;gap:22px;}
.list-plain li:last-child{border-bottom:1px solid var(--hairline);}
.list-plain .num{font-family:'Fraunces',serif;color:var(--accent);font-size:1.1rem;}

.pricing-row{display:grid;grid-template-columns:1.2fr .5fr 1.3fr;gap:24px;padding:26px 0;border-top:1px solid var(--hairline);align-items:baseline;}
.pricing-row:last-child{border-bottom:1px solid var(--hairline);}
.pricing-row .price{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--accent);}
.pricing-row h3{margin-bottom:4px;}

.quote{border-left:3px solid var(--accent);padding-left:22px;margin:0 0 1.4em;font-family:'Fraunces',serif;font-size:1.15rem;}

footer.site{border-top:1px solid var(--hairline);padding:44px 0;color:var(--slate);font-size:.92rem;}
footer.site .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;}
footer.site h4{font-family:'IBM Plex Sans';font-size:.85rem;color:var(--ink);margin:0 0 10px;}
footer.site ul{list-style:none;margin:0;padding:0;}
footer.site li{margin-bottom:6px;}
footer.site a{color:var(--slate);text-decoration:none;}

.btn{display:inline-block;background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:3px;text-decoration:none;font-size:.95rem;}
.btn.outline{background:transparent;color:var(--ink);border:1px solid var(--ink);}

@media (max-width:820px){
  .nav ul{display:none;}
  .navToggle{display:block;}
  .hero .grid, .split{grid-template-columns:1fr;}
  .hero .stack{border-left:0;padding-left:0;border-top:1px solid var(--hairline);padding-top:20px;}
  .pricing-row{grid-template-columns:1fr;gap:6px;}
  footer.site .fgrid{grid-template-columns:1fr;gap:24px;}
}