:root {
  --ink: #172523;
  --paper: #f4f1ea;
  --mist: #dbe5de;
  --accent: #bc492c;
  --line: rgba(23, 37, 35, .22);
  --sans: Helvetica Neue, Helvetica, Arial, ui-sans-serif, sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-header, main, footer { width: min(100% - 80px, 1400px); margin-inline: auto; }
.site-header { align-items: center; display: flex; justify-content: space-between; padding: 24px 0; }
.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -.055em; }
.dot { color: var(--accent); }
.header-link, .text-link { border-bottom: 1px solid currentColor; font-family: var(--mono); font-size: 11px; letter-spacing: -.03em; padding-bottom: 3px; }
.header-link span, .text-link span { color: var(--accent); font-size: 14px; padding-left: 3px; }

.hero { min-height: calc(100svh - 68px); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 11.5vh 0 6.5vh; position: relative; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .025em; line-height: 1.4; margin: 0; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.8rem, 8.3vw, 8.6rem); font-weight: 400; letter-spacing: -.083em; line-height: .9; margin: 0; max-width: 980px; position: relative; z-index: 1; }
h1 em { color: var(--accent); font-family: Georgia, serif; font-weight: 400; letter-spacing: -.1em; }
.hero-art { bottom: 6.5vh; height: clamp(230px, 29vw, 410px); pointer-events: none; position: absolute; right: 1.5vw; width: clamp(230px, 29vw, 410px); }
.hero-footer { align-items: flex-end; display: flex; justify-content: space-between; gap: 40px; position: relative; z-index: 1; }
.hero-footer p { font-size: 17px; letter-spacing: -.035em; line-height: 1.35; margin: 0; max-width: 370px; }

.section-rule { border-top: 1px solid var(--line); padding: 30px 0 120px; }
.statement { display: grid; grid-template-columns: 25% 1fr; gap: 24px; }
.statement-copy { max-width: 900px; }
h2 { font-size: clamp(2rem, 4.2vw, 4.45rem); font-weight: 400; letter-spacing: -.07em; line-height: .98; }
.statement h2 { margin-bottom: 36px; }
.statement p, .engagement p { font-size: 18px; letter-spacing: -.035em; line-height: 1.38; max-width: 440px; }
.visual-pause { height: min(46vw, 640px); margin-left: calc((100vw - min(100vw - 80px, 1400px)) / -2); margin-right: calc((100vw - min(100vw - 80px, 1400px)) / -2); overflow: hidden; }
.visual-pause svg { display: block; height: 100%; width: 100%; }

.approach { padding-bottom: 0; }
.section-intro { display: grid; grid-template-columns: 25% 1fr; gap: 24px; padding-bottom: 72px; }
.section-intro h2 { margin: 0; max-width: 760px; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { border-top: 1px solid var(--line); display: grid; grid-template-columns: 25% 1fr; gap: 24px; padding: 24px 0 40px; }
.step-number { color: var(--accent); font-family: var(--mono); font-size: 11px; }
h3 { font-size: clamp(1.6rem, 3.1vw, 3rem); font-weight: 400; letter-spacing: -.065em; line-height: 1; margin-bottom: 18px; }
.steps p { font-size: 16px; letter-spacing: -.02em; line-height: 1.4; margin: 0; max-width: 400px; }

.engagement { padding-top: 120px; }
.engagement-grid { display: grid; grid-template-columns: 58% 1fr; gap: 30px; }
.engagement-grid h2 { margin: 0; max-width: 650px; }
.engagement-grid p { margin-bottom: 22px; }
.engagement .text-link { display: inline-block; margin-top: 8px; }

.founder { padding-bottom: 0; }
.founder-grid { display: grid; grid-template-columns: 58% 1fr; gap: 30px; }
.founder h2 { margin: 0 0 12px; }
.founder-role { font-family: var(--mono); font-size: 10px; letter-spacing: .025em; margin: 0; text-transform: uppercase; }
.founder-copy > p { font-size: 18px; letter-spacing: -.035em; line-height: 1.38; margin-bottom: 24px; max-width: 430px; }
.founder-credentials { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 85px; }
.founder-credentials span { border-right: 1px solid var(--line); font-family: var(--mono); font-size: 10px; min-height: 72px; padding: 14px 18px 10px 0; text-transform: uppercase; }
.founder-credentials span + span { padding-left: 18px; }
.founder-credentials span:last-child { border-right: 0; }

.credibility { background: var(--mist); margin-left: calc((100vw - min(100vw - 80px, 1400px)) / -2); margin-right: calc((100vw - min(100vw - 80px, 1400px)) / -2); padding: 30px max(40px, calc((100vw - min(100vw - 80px, 1400px)) / 2)) 100px; }
blockquote { font-size: clamp(2.4rem, 5.2vw, 5.5rem); font-weight: 400; letter-spacing: -.075em; line-height: .98; margin: 78px 0 52px; max-width: 1000px; }
.credibility-note { font-size: 16px; letter-spacing: -.025em; line-height: 1.4; margin: 0; max-width: 430px; }

.contact { min-height: 76vh; display: flex; flex-direction: column; justify-content: center; padding: 90px 0; }
.contact h2 { font-size: clamp(3.2rem, 7vw, 7.5rem); margin: 28px 0 50px; }
.contact-link { border-bottom: 2px solid var(--accent); font-size: clamp(1.35rem, 2.3vw, 2.5rem); letter-spacing: -.06em; padding-bottom: 7px; width: fit-content; }
.contact-link span { color: var(--accent); }
.contact-page { display: grid; gap: 10vw; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); min-height: calc(100svh - 133px); padding: 12vh 0 10vh; }
.form-intro h1 { font-size: clamp(3.5rem, 6.3vw, 6.7rem); margin: 28px 0 38px; }
.form-intro > p:last-child { font-size: 17px; letter-spacing: -.03em; line-height: 1.4; max-width: 350px; }
.contact-form { align-self: end; }
.contact-form label { border-top: 1px solid var(--line); display: block; padding: 16px 0 21px; }
.contact-form label span { display: block; font-family: var(--mono); font-size: 10px; margin-bottom: 13px; text-transform: uppercase; }
.contact-form small { color: rgba(23, 37, 35, .65); font-size: inherit; text-transform: none; }
.contact-form input, .contact-form textarea { appearance: none; background: transparent; border: 0; border-radius: 0; color: var(--ink); font: inherit; font-size: 19px; letter-spacing: -.035em; outline: none; padding: 0; resize: vertical; width: 100%; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 0 2px 0 var(--accent); }
.contact-form button { appearance: none; background: var(--ink); border: 0; color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: 11px; margin-top: 17px; padding: 15px 18px; text-transform: uppercase; transition: background .2s ease; }
.contact-form button:hover { background: var(--accent); }
.contact-form button span { color: var(--mist); font-size: 15px; margin-left: 4px; }
.honeypot { display: none; }
footer { border-top: 1px solid var(--line); display: flex; font-family: var(--mono); font-size: 10px; justify-content: space-between; padding: 18px 0 24px; text-transform: uppercase; }

@media (max-width: 700px) {
  .site-header, main, footer { width: min(100% - 40px, 1400px); }
  .header-link { font-size: 9px; }
  .hero { min-height: calc(100svh - 62px); padding: 8vh 0 5vh; }
  h1 { font-size: clamp(3.35rem, 17.4vw, 5.5rem); }
  .hero-art { bottom: 5.7rem; height: 145px; opacity: .58; right: -22px; width: 145px; }
  .hero-footer { align-items: flex-start; flex-direction: column; gap: 26px; }
  .hero-footer p { font-size: 16px; max-width: 320px; }
  .section-rule { padding: 22px 0 75px; }
  .statement, .section-intro, .steps li, .engagement-grid { display: block; }
  .statement .eyebrow, .section-intro .eyebrow, .engagement > .eyebrow { margin-bottom: 42px; }
  h2 { font-size: clamp(2.4rem, 11.5vw, 4rem); }
  .statement h2 { margin-bottom: 25px; }
  .statement p, .engagement p { font-size: 16px; }
  .visual-pause { height: 56vw; margin-left: -20px; margin-right: -20px; min-height: 245px; }
  .section-intro { padding-bottom: 45px; }
  .steps li { padding: 20px 0 31px; }
  .step-number { display: block; margin-bottom: 31px; }
  h3 { font-size: 2.1rem; }
  .engagement { padding-top: 75px; }
  .engagement-grid h2 { margin-bottom: 38px; }
  .founder-grid { display: block; }
  .founder h2 { margin-bottom: 10px; }
  .founder-copy { margin-top: 46px; }
  .founder-copy > p { font-size: 16px; }
  .founder-credentials { grid-template-columns: 1fr 1fr; margin-top: 55px; }
  .founder-credentials span { border-bottom: 1px solid var(--line); min-height: 65px; padding: 13px 12px 12px 0; }
  .founder-credentials span:nth-child(even) { border-right: 0; padding-left: 12px; }
  .founder-credentials span:nth-child(n + 3) { border-bottom: 0; }
  .credibility { margin-left: -20px; margin-right: -20px; padding: 22px 20px 70px; }
  blockquote { font-size: clamp(2.25rem, 11.5vw, 3.7rem); margin: 66px 0 42px; }
  .contact { min-height: 65vh; padding: 75px 0; }
  .contact h2 { font-size: clamp(3rem, 14vw, 5rem); margin: 25px 0 44px; }
  .contact-page { display: block; min-height: auto; padding: 8vh 0 70px; }
  .form-intro h1 { font-size: clamp(3.3rem, 16vw, 5rem); }
  .form-intro { margin-bottom: 75px; }
  .form-intro > p:last-child { font-size: 16px; }
  footer { gap: 12px; line-height: 1.4; }
  footer span:last-child { text-align: right; }
}
