:root{
  --pear:#8CBE3F;
  --orchard:#4A6B24;
  --ink:#1A1A1A;
  --paper:#FAF9F5;
  --stone:#6E7269;
  --line:#E2E0D8;
  --display:"Libre Baskerville",Georgia,serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --max:1080px;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;transition:none !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}

.skip{
  position:absolute;left:-9999px;background:var(--ink);color:#fff;
  padding:12px 18px;z-index:100;
}
.skip:focus{left:12px;top:12px;}

a{color:var(--orchard);}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--pear);outline-offset:3px;
}

/* ---- masthead ---- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(250,249,245,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.masthead-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;
}
.logo{display:block;height:52px;width:auto;}
.logo-link{line-height:0;}

.nav{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap;
}
.nav a{
  font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;text-decoration:none;color:var(--stone);
  padding-bottom:3px;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--orchard);border-bottom-color:var(--pear);}

/* ---- dotted rule: the logo's signature device ---- */
.rule{
  height:10px;
  max-width:var(--max);
  margin:0 auto;
  background-image:linear-gradient(to right,var(--pear) 0 10px,transparent 10px 20px);
  background-size:20px 10px;
  background-repeat:repeat-x;
  background-position:left center;
}

/* ---- hero ---- */
.hero{padding:82px 0 68px;}
.eyebrow{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pear);font-weight:700;margin:0 0 22px;
}
h1{
  font-family:var(--display);
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  line-height:1.14;font-weight:700;margin:0 0 26px;max-width:19ch;
}
.lede{font-size:1.16rem;max-width:60ch;margin:0 0 22px;}
.hero-note{
  max-width:60ch;margin:0 0 32px;padding-left:20px;
  border-left:3px solid var(--pear);color:var(--stone);
}
.hero-note strong{color:var(--ink);}

.btn{
  display:inline-block;background:var(--orchard);color:#fff;
  text-decoration:none;font-weight:600;font-size:15px;
  letter-spacing:.05em;padding:14px 28px;margin-right:10px;
  border:2px solid var(--orchard);
}
.btn:hover{background:var(--pear);border-color:var(--pear);color:var(--ink);}
.btn-quiet{background:transparent;color:var(--orchard);}
.btn-quiet:hover{background:var(--pear);border-color:var(--pear);color:var(--ink);}

/* ---- sections ---- */
.section{padding:70px 0;}
h2{
  font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.2rem);
  font-weight:700;margin:0 0 12px;line-height:1.2;
}
.section-lede{color:var(--stone);max-width:68ch;margin:0 0 38px;}
.sub{
  font-family:var(--body);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orchard);
  margin:36px 0 14px;
}
h2 + .two-col{margin-top:30px;}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:52px;}
.two-col p:first-child{margin-top:0;}
.notes .sub:first-child{margin-top:0;}

.cats{margin:0;}
.cats dt{
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  margin-top:20px;
}
.cats dt:first-of-type{margin-top:0;}
.cats dd{margin:5px 0 0;color:var(--stone);font-size:.97rem;}

.pull{
  font-family:var(--display);font-size:1.15rem;font-style:italic;
  text-align:center;max-width:46ch;margin:52px auto 0;color:var(--orchard);
}

/* ---- services list ---- */
.services{
  list-style:none;margin:0 0 46px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0 32px;
}
.services li{
  border-bottom:1px solid var(--line);padding:11px 0;
  font-weight:600;font-size:1rem;
}

/* ---- rate cards ---- */
.cards{
  display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;
}
.card{
  background:#fff;border:1px solid var(--line);
  border-top:5px solid var(--pear);padding:30px 28px 26px;
}
.card-wide{grid-column:1 / -1;}
.card h3{
  font-family:var(--display);font-size:1.28rem;margin:0 0 8px;font-weight:700;
}
.card-note{font-size:.9rem;color:var(--stone);margin:0 0 20px;line-height:1.5;}

.card table{width:100%;border-collapse:collapse;}
.card th,.card td{
  text-align:left;padding:13px 0;border-bottom:1px solid var(--line);
  vertical-align:baseline;font-weight:400;
}
.card tr:last-child th,.card tr:last-child td{border-bottom:0;}
.card td{
  text-align:right;white-space:nowrap;font-weight:700;
  font-variant-numeric:tabular-nums;padding-left:18px;
}
.unit{
  display:block;font-size:.76rem;font-weight:400;
  color:var(--stone);letter-spacing:.02em;
}
.row-note{
  display:block;font-size:.82rem;font-weight:400;color:var(--stone);
}

/* ---- titles ---- */
.titles{list-style:none;margin:0;padding:0;}
.titles li{
  padding:9px 0 9px 20px;border-bottom:1px solid var(--line);
  font-size:.95rem;position:relative;
}
.titles li:before{
  content:"";position:absolute;left:0;top:19px;
  width:7px;height:7px;background:var(--pear);
}
.clients{
  font-size:.95rem;color:var(--stone);max-width:72ch;line-height:1.85;
}

/* ---- contact ---- */
.contact{text-align:center;padding-bottom:80px;}
.contact .lede{margin-left:auto;margin-right:auto;}
.email{margin:34px 0 10px;}
.email a{
  font-family:var(--display);font-size:clamp(1.2rem,3.2vw,1.75rem);
  color:var(--ink);text-decoration:none;
  border-bottom:3px solid var(--pear);padding-bottom:5px;
}
.email a:hover{color:var(--orchard);}
.who{color:var(--stone);font-size:.95rem;margin-top:26px;}

/* ---- footer ---- */
.foot{
  border-top:1px solid var(--line);padding:26px 0;
  font-size:.85rem;color:var(--stone);text-align:center;
}
.foot p{margin:0;}

/* ---- responsive ---- */
@media (max-width:820px){
  .two-col{grid-template-columns:1fr;gap:14px;}
  .cards{grid-template-columns:1fr;}
  .masthead-inner{justify-content:center;text-align:center;}
  .nav{justify-content:center;gap:18px;}
}
@media (max-width:520px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  .hero{padding:52px 0 44px;}
  .section{padding:52px 0;}
  .logo{height:42px;}
  .btn{display:block;margin:0 0 12px;text-align:center;}
}
