:root {
  --grey: #3A3D38;
  --green: #2F6B42;
  --ink: #232521;
  --paper: #F1F0EB;
  --muted: #5E615A;
  --body: #43463F;
  --serif: 'Young Serif', Georgia, serif;
  --sans: Figtree, 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--green); }
a:hover { color: #1F4A2D; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
h2 { font-family: var(--serif); font-size: 46px; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.muted { color: var(--muted); }
.t-grey { color: var(--grey); }
.t-green { color: var(--green); }

/* Nav */
.nav { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.logo { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.logo:hover { color: var(--ink); }
.nav nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; font-weight: 500; }
.nav nav a { color: var(--ink); text-decoration: none; padding: 10px 0; }
.nav nav a:hover { color: var(--green); }

/* Hero */
.split { display: flex; min-height: 560px; }
.half { flex: 1 1 50%; padding-top: 72px; padding-bottom: 64px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; }
.half-grey { background: var(--grey); color: var(--paper); padding-left: max(20px, calc((100vw - 1200px) / 2 + 20px)); padding-right: 20px; }
.half-green { background: var(--green); color: #F4F7F1; padding-right: max(20px, calc((100vw - 1200px) / 2 + 20px)); padding-left: 20px; }
.half-grey .eyebrow { color: #C9CBC4; }
.half-green .eyebrow { color: #CFE3D2; }
.half h1 { font-family: var(--serif); font-size: 76px; line-height: 1.02; letter-spacing: -0.02em; }
.half p { max-width: 34ch; font-size: 19px; }
.half-grey p { color: #DCDDD7; }
.half-green p { color: #E3EFE5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font: inherit; font-weight: 600; cursor: pointer; }
.btn-dark { background: var(--ink); color: var(--paper); border: 0; }
.btn-dark:hover { background: #000; color: var(--paper); }
.btn-line { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-wide { min-height: 52px; font-weight: 700; }

/* Thesis */
.thesis { padding-top: 72px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.thesis h2 { max-width: 18ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Story */
.story { padding-top: 56px; padding-bottom: 56px; scroll-margin-top: 16px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; border-top: 1.5px solid var(--ink); padding-top: 32px; }

/* Work */
.work { padding-top: 40px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 32px; }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 24px; }
.pillar { border-radius: 6px; padding: 36px; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pillar-grey { background: #E3E3DD; }
.pillar-green { background: #DCE8DD; }
.pillar-head { display: flex; align-items: center; gap: 12px; }
.pillar-head h3 { font-family: var(--serif); font-size: 28px; }
.dot { width: 14px; height: 14px; border-radius: 50%; }
.dot-grey { background: var(--grey); }
.dot-green { background: var(--green); }
.item { display: flex; flex-direction: column; gap: 8px; }
.item h4 { font-weight: 700; font-size: 18px; }
.pillar-grey p { color: var(--body); }
.pillar-green p { color: #3B4A3E; }
.chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14px; padding: 4px 12px; border-radius: 999px; border: 1px solid #8A8D85; }
.badge { align-self: flex-start; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #F4F7F1; background: var(--green); padding: 4px 12px; border-radius: 999px; }

/* How */
.dark { background: var(--ink); color: var(--paper); }
.how { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
.steps li { display: flex; flex-direction: column; gap: 10px; border-top: 1.5px solid #6E7169; padding-top: 20px; }
.step-n { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: #9FC9A8; }
.steps h3 { font-weight: 700; font-size: 20px; }
.steps p { color: #C9CBC4; }

/* People */
.people { padding-top: 80px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 32px; }
.bios { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 40px 24px; }
.bio { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; min-width: 0; }
.bio-grey { border-top: 6px solid var(--grey); }
.bio-green { border-top: 6px solid var(--green); }
.bio-photo { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 6px; margin-bottom: 6px; }
.bio h3 { font-family: var(--serif); font-size: 30px; }
.bio p { color: var(--body); }
.cos { font-size: 14px; color: var(--muted); }

/* Contact */
.green { background: var(--green); color: #F4F7F1; }
.contact { padding-top: 72px; padding-bottom: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 48px; }
.contact-copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.contact-copy p { color: #E3EFE5; }
address { font-style: normal; font-size: 16px; line-height: 1.9; }
address a { color: #F4F7F1; }
address a:hover { color: #fff; }
form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { min-height: 48px; padding: 10px 14px; border-radius: 4px; border: 0; font: inherit; color: var(--ink); background: #fff; width: 100%; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .btn:focus-visible { outline: 3px solid #F4D35E; outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }

/* Footer */
.foot { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 14px; color: var(--muted); }

/* Simple page (thanks / 404) */
.simple { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-top: 64px; padding-bottom: 64px; }
.simple p { max-width: 48ch; color: var(--body); }

@media (max-width: 760px) {
  .split { flex-direction: column; min-height: 0; }
  .half { min-height: 300px; padding-top: 56px; padding-bottom: 48px; padding-left: 20px; padding-right: 20px; }
  .half h1 { font-size: 48px; }
  h2 { font-size: 34px; }
  .pillar { padding: 24px; }
}