:root {
  --ink: #173b38;
  --muted: #5e706b;
  --paper: #f5f7f1;
  --card: #e4eee6;
  --line: #cbd8d0;
  --accent: #d66c46;
  --accent-dark: #b85232;
  --cream: #fbfaf5;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; }

.site-header, main, .site-footer { max-width: 1160px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

.site-header { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }

.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.mark { display: grid; width: 31px; height: 31px; place-items: center; color: var(--cream); background: var(--ink); border-radius: 50%; font-size: 10px; letter-spacing: .04em; }
.header-link, .text-link { font-size: 14px; font-weight: 700; text-decoration: none; }
.header-link:hover, .text-link:hover { color: var(--accent-dark); }

.hero { padding: 122px 8.5% 144px; max-width: 930px; }
.eyebrow, .section-label, .product-kicker, .pillar-number { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.eyebrow { color: var(--accent-dark); }
.hero h1 { max-width: 760px; margin: 18px 0 25px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(54px, 8vw, 96px); font-weight: 400; letter-spacing: -.065em; line-height: .98; }
.hero-copy { max-width: 570px; margin: 0 0 34px; color: var(--muted); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; }
.button { display: inline-flex; align-items: center; gap: 22px; padding: 14px 18px 14px 20px; color: var(--cream); background: var(--accent); border-radius: 3px; font-size: 14px; font-weight: 800; text-decoration: none; }
.button:hover { background: var(--accent-dark); }

.intro, .products { display: grid; grid-template-columns: 24% 1fr; gap: 8%; padding: 92px 8.5%; border-top: 1px solid var(--line); }
.section-label { color: var(--muted); padding-top: 9px; }
h2 { margin: 0 0 18px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(32px, 4vw, 54px); font-weight: 400; letter-spacing: -.045em; line-height: 1.03; }
.intro p { max-width: 590px; margin: 0; color: var(--muted); font-size: 18px; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 8.5%; background: var(--line); border: 1px solid var(--line); }
.pillar { min-height: 260px; padding: 31px; background: var(--card); }
.pillar-number { display: block; color: var(--accent-dark); margin-bottom: 54px; }
.pillar h3 { margin: 0 0 9px; font-family: Georgia, "Times New Roman", serif; font-size: 28px; font-weight: 400; letter-spacing: -.03em; }
.pillar p, .product-grid p { margin: 0; color: var(--muted); font-size: 15px; }

.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9%; }
.product-kicker { display: block; color: var(--accent-dark); margin-bottom: 22px; }
.product-grid h2 { font-size: clamp(30px, 3vw, 43px); }

.closing { padding: 128px 8.5% 150px; }
.closing-card { max-width: 800px; padding: 62px; color: var(--cream); background: var(--ink); }
.closing-card h2 { max-width: 590px; margin-top: 18px; color: var(--cream); }
.closing-card p { max-width: 490px; margin: 0 0 25px; color: #c8d6cf; }
.closing-card .text-link { color: #f3b296; }

.site-footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 25px; padding-bottom: 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 700px) {
  .site-header, main, .site-footer { padding-left: 21px; padding-right: 21px; }
  .site-header { padding-top: 20px; padding-bottom: 20px; }
  .header-link { font-size: 13px; }
  .hero { padding: 92px 0 105px; }
  .hero h1 { font-size: clamp(52px, 16vw, 76px); }
  .intro, .products { display: block; padding: 67px 0; }
  .section-label { margin-bottom: 31px; }
  .pillars { display: block; margin: 0; }
  .pillar { min-height: 0; padding: 27px 25px 31px; }
  .pillar-number { margin-bottom: 29px; }
  .product-grid { display: block; }
  .product-grid > div + div { margin-top: 57px; }
  .closing { padding: 81px 0 97px; }
  .closing-card { padding: 37px 25px 42px; }
  .site-footer { display: block; padding-top: 20px; }
  .site-footer span { display: block; }
  .site-footer span + span { margin-top: 8px; }
}