@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --paper: #f4f3ed;
  --paper-deep: #e9e8e0;
  --ink: #192322;
  --muted: #666f6a;
  --line: #d6d7cf;
  --green: #c8ed79;
  --green-deep: #a9d64f;
  --dark: #172322;
  --mono: 'DM Mono', 'Courier New', monospace;
  --body: 'DM Sans', Arial, sans-serif;
  --display: 'Manrope', 'DM Sans', sans-serif;
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 3px solid #4d7b2c; outline-offset: 4px; }
.skip-link { position: absolute; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-150%); background: white; border: 1px solid var(--ink); }
.skip-link:focus { transform: translateY(0); }
.section-shell { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }

.site-header { height: 82px; width: min(1320px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 11px; align-items: center; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { border-radius: 2px; background: var(--ink); }
.brand-mark span:first-child { grid-row: span 2; background: #a9d64f; }
.brand-mark span:last-child { grid-column: 2; }
.brand-name { font: 800 17px/1 var(--display); letter-spacing: -.7px; }
.brand-dot { color: #79a834; }
.brand-name small { display: block; margin-top: 4px; font: 500 9px/1 var(--mono); letter-spacing: 2.3px; text-transform: uppercase; color: var(--muted); }
.main-nav { display: flex; gap: 34px; align-items: center; }
.main-nav a, .header-cta { text-decoration: none; font-size: 12px; font-weight: 600; }
.main-nav a { color: #56605b; transition: color .2s; }
.main-nav a:hover, .footer-links a:hover { color: #4a7421; }
.header-cta { padding: 12px 16px; border: 1px solid var(--ink); border-radius: 2px; transition: background .2s, color .2s; }
.header-cta:hover { color: var(--paper); background: var(--ink); }
.header-cta span { margin-left: 12px; }

.hero { min-height: 680px; padding-top: 88px; display: grid; grid-template-columns: 1.03fr .97fr; column-gap: 64px; position: relative; align-items: center; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 54px; }
.eyebrow, .section-index, .hero-bottom, .visual-label, .visual-caption, .service-number, .build-card small, .hero-note, .contact-email, .copyright { font-family: var(--mono); }
.eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 10px; font-size: 10px; line-height: 1.4; letter-spacing: 1.2px; text-transform: uppercase; color: #5d6c59; }
.eyebrow-line { width: 26px; height: 1px; background: #729338; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); }
h1 { max-width: 620px; margin-bottom: 22px; font-size: clamp(48px, 6.3vw, 79px); line-height: .99; letter-spacing: -5.5px; font-weight: 600; }
h1 em, h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
h1 em { color: #6e913e; }
.hero-lede { max-width: 495px; margin-bottom: 30px; font-size: 16px; line-height: 1.8; color: #57615d; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 0 18px; text-decoration: none; font-size: 12px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: #34413d; }
.button span { font-size: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 12px; font-weight: 700; }
.text-link span { font-size: 15px; transition: transform .2s; }
.text-link:hover span { transform: translate(3px, -2px); }
.hero-note { margin: 33px 0 0; display: flex; align-items: center; gap: 9px; font-size: 9px; letter-spacing: .15px; color: #67706a; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #90b844; box-shadow: 0 0 0 4px #e3edcf; }
.hero-visual { min-height: 430px; position: relative; display: grid; align-items: center; padding: 45px 14px 55px 20px; }
.visual-grid { position: absolute; inset: 16px 0 30px 48px; background-image: linear-gradient(#d9dbd1 1px, transparent 1px), linear-gradient(90deg, #d9dbd1 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(135deg, black, transparent 85%); opacity: .7; }
.visual-label { position: absolute; top: 19px; left: 36px; right: 3px; display: flex; justify-content: space-between; font-size: 8px; letter-spacing: 1.1px; color: #73806d; }
.visual-label span:last-child { color: #688e2f; }
.visual-window { position: relative; z-index: 1; width: min(100%, 475px); margin: 13px 0 0 9px; border: 1px solid #4a5952; border-radius: 7px; overflow: hidden; background: #1b2926; color: #edf0e8; box-shadow: 15px 20px 0 rgba(30, 48, 40, .09), 0 25px 65px rgba(33, 47, 38, .13); transform: rotate(1.5deg); }
.window-top { height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #34433c; color: #a8b2a8; font: 9px var(--mono); }
.window-dots { display: flex; gap: 4px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #69766d; }
.window-dots i:first-child { background: #d9936a; }.window-dots i:nth-child(2) { background: #d5bd70; }.window-dots i:nth-child(3) { background: #91ac70; }
.window-menu { font-size: 16px; line-height: 0; }
.window-body { padding: 24px 21px 21px; }
.code-line { min-height: 31px; display: flex; align-items: center; gap: 18px; font: 10px var(--mono); white-space: nowrap; }
.code-line b { width: 11px; text-align: right; color: #66736a; font-size: 8px; font-weight: 400; }
.code-line i { color: #c28ee0; font-style: normal; }.code-line strong { color: #c8ed79; font-weight: 500; }.code-line.muted span { color: #819087; }
.build-card { min-height: 68px; margin: 22px 0 0 29px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #435149; border-radius: 4px; background: #24342e; }
.build-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 3px; background: #c8ed79; color: #213222; font-size: 17px; }
.build-card small { display: block; margin-bottom: 5px; font-size: 7px; letter-spacing: 1.2px; color: #9aaa96; }.build-card strong { font: 600 12px var(--display); }.build-check { margin-left: auto; color: #c8ed79; font-size: 18px; }
.visual-caption { position: absolute; z-index: 2; right: -4px; bottom: 37px; display: flex; gap: 10px; align-items: center; font-size: 8px; color: #68766c; }.visual-caption span { color: #96b75f; }
.visual-orbit { position: absolute; z-index: 2; border: 1px solid rgba(113, 145, 65, .52); border-radius: 50%; }.orbit-one { width: 13px; height: 13px; top: 93px; right: 45px; background: var(--green); }.orbit-two { width: 7px; height: 7px; bottom: 99px; left: 1px; background: #e1eccd; }
.hero-bottom { position: absolute; inset: auto 0 0; height: 48px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); font-size: 8px; letter-spacing: 1px; color: #738077; }

.intro { padding-top: 118px; padding-bottom: 106px; border-bottom: 1px solid var(--line); }
.section-index { margin-bottom: 27px; font-size: 9px; letter-spacing: 1.1px; color: #72806f; }
.intro-content { display: grid; grid-template-columns: 1.05fr .95fr; gap: 82px; align-items: start; }
.intro h2, .section-heading h2, .approach h2, .faq h2, .contact h2 { margin-bottom: 0; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -2.7px; font-weight: 600; }
.intro h2 em, .section-heading h2 em, .faq h2 em { color: #6e913e; }
.intro-text { padding-top: 7px; }.intro-text p { margin: 0 0 15px; font-size: 14px; line-height: 1.8; color: #5b6560; }.intro-text p:last-child { margin-bottom: 0; }
.intro-rule { margin-top: 54px; display: flex; align-items: center; gap: 19px; font: 8px var(--mono); letter-spacing: 1px; color: #879084; }.rule-arrow { color: #80a348; font-size: 17px; }

.services { padding-top: 112px; padding-bottom: 120px; }
.section-heading { margin-bottom: 47px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }.section-heading .section-index { margin-bottom: 22px; }.section-heading > p { max-width: 295px; margin-bottom: 4px; font-size: 13px; line-height: 1.75; color: #637069; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #cfd2c8; }
.service-card { min-height: 326px; padding: 25px 25px 27px; border-right: 1px solid #cfd2c8; background: rgba(255, 255, 255, .22); transition: background .25s, transform .25s; }.service-card:last-child { border-right: 0; }.service-card:hover { position: relative; z-index: 1; background: #fafaf5; transform: translateY(-4px); }.service-card-featured { background: #e9eddf; }
.service-top { display: flex; justify-content: space-between; align-items: start; }.service-number { font-size: 9px; color: #899386; }
.service-symbol { width: 39px; height: 39px; display: flex; align-items: center; justify-content: center; position: relative; border: 1px solid #bcc9a7; border-radius: 50%; }
.symbol-window i { width: 13px; height: 11px; position: absolute; border: 1px solid #718f4d; border-radius: 2px; }.symbol-window i:nth-child(1) { transform: translate(-3px, -3px); background: #eef4e3; }.symbol-window i:nth-child(2) { transform: translate(3px, 3px); background: #c8ed79; }.symbol-window i:nth-child(3) { width: 3px; height: 3px; right: 9px; top: 11px; border: 0; background: #718f4d; }
.symbol-flow { flex-direction: column; gap: 3px; }.symbol-flow i { width: 14px; height: 5px; border: 1px solid #718f4d; border-radius: 5px; }.symbol-flow i:nth-child(2) { width: 21px; background: #c8ed79; }
.symbol-api { color: #718f4d; font: 12px var(--mono); }
.service-card h3 { margin: 37px 0 11px; font: 700 19px var(--display); letter-spacing: -.5px; }.service-card p { min-height: 65px; margin-bottom: 16px; font-size: 12px; line-height: 1.75; color: #66716b; }.service-card ul { margin: 0; padding: 15px 0 0; list-style: none; border-top: 1px solid #d6d9d0; }.service-card li { margin-top: 8px; padding-left: 14px; position: relative; font-size: 10px; color: #59645e; }.service-card li::before { content: ''; width: 4px; height: 4px; position: absolute; left: 0; top: 5px; border-radius: 50%; background: #89a957; }
.service-footnote { margin: 22px 0 0; font-size: 11px; color: #707a73; }.service-footnote span { margin-right: 7px; color: #82a44a; font-size: 15px; }

.approach { width: 100%; max-width: none; padding: 92px max(32px, calc((100vw - 1160px) / 2)) 97px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 85px; background: var(--dark); color: #f5f4ee; }
.approach .section-index { color: #a3b295; }.approach h2 { font-size: clamp(38px, 4.5vw, 54px); }.approach h2 em { color: var(--green); }.approach-intro { max-width: 340px; margin: 21px 0 28px; font-size: 12px; line-height: 1.8; color: #b8c1b9; }.text-link-light { color: var(--green); }
.steps { border-top: 1px solid #45534c; }.step { min-height: 116px; padding: 23px 4px; display: grid; grid-template-columns: 39px 1fr 30px; align-items: start; gap: 12px; border-bottom: 1px solid #45534c; }.step-count { padding-top: 5px; font: 9px var(--mono); color: #9ab770; }.step h3 { margin: 0 0 8px; font: 600 18px var(--display); letter-spacing: -.4px; }.step p { max-width: 435px; margin-bottom: 0; font-size: 11px; line-height: 1.65; color: #b0bab2; }.step-mark { text-align: right; font: 22px var(--body); color: #bce575; }

.faq { padding-top: 118px; padding-bottom: 118px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 92px; }.faq h2 { font-size: clamp(35px, 4vw, 48px); }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item summary { min-height: 66px; display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; list-style: none; font: 600 14px var(--display); }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary span { color: #769844; font: 20px var(--body); transition: transform .2s; }.faq-item[open] summary span { transform: rotate(45deg); }.faq-item p { max-width: 610px; margin: -1px 30px 23px 0; font-size: 12px; line-height: 1.75; color: #616b65; }

.contact { min-height: 385px; padding: 74px 25px 68px; position: relative; overflow: hidden; text-align: center; background: #dce8c9; }.contact .section-index { margin-bottom: 18px; color: #61794a; }.contact h2 { max-width: 700px; margin: 0 auto; font-size: clamp(38px, 5vw, 62px); }.contact h2 em { color: #577d2c; }.contact > p:not(.section-index) { max-width: 465px; margin: 19px auto 25px; font-size: 13px; line-height: 1.75; color: #56644d; }.button-light { color: white; background: var(--ink); }.button-light:hover { background: #34413d; }.contact-email { display: block; margin-top: 15px; font-size: 9px; letter-spacing: .4px; color: #68775a; }.contact-spark { position: absolute; top: 38px; right: 13%; color: #9ab578; font-size: 40px; }.contact::before, .contact::after { content: ''; position: absolute; width: 160px; height: 160px; border: 1px solid rgba(99, 130, 62, .2); border-radius: 50%; }.contact::before { top: -100px; left: -52px; }.contact::after { bottom: -118px; right: -45px; }
.site-footer { width: min(1320px, calc(100% - 64px)); min-height: 112px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 22px; }.footer-brand .brand-mark span { background: #435246; }.footer-brand .brand-mark span:first-child { background: #94b85b; }.site-footer > p { margin: 0 auto 0 26px; font-size: 10px; color: #748078; }.footer-links { display: flex; gap: 22px; }.footer-links a { font-size: 10px; text-decoration: none; color: #66716a; }.copyright { font-size: 8px; color: #8a938b; }

@media (max-width: 900px) {
  .hero { min-height: initial; padding-top: 70px; grid-template-columns: 1fr; gap: 10px; }.hero-copy { padding-bottom: 16px; }.hero-visual { min-height: 390px; width: min(100%, 600px); justify-self: center; }.hero-bottom { position: relative; grid-column: 1; margin-top: 20px; }
  .intro-content { gap: 45px; }.approach { gap: 48px; }.faq { gap: 45px; }.site-footer { flex-wrap: wrap; padding-block: 26px; }.site-footer > p { margin-right: 0; }.footer-links { order: 3; width: 100%; }.copyright { margin-left: auto; }
}
@media (max-width: 650px) {
  .section-shell, .site-header, .site-footer { width: calc(100% - 36px); }.site-header { height: 72px; }.main-nav { display: none; }.header-cta { padding: 10px 11px; font-size: 10px; }.header-cta span { margin-left: 5px; }
  .hero { padding-top: 57px; }.eyebrow { margin-bottom: 21px; }.hero h1 { max-width: 500px; font-size: clamp(47px, 14vw, 67px); letter-spacing: -3.8px; }.hero-lede { font-size: 14px; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }.hero-note { font-size: 8px; line-height: 1.6; }.hero-visual { min-height: 320px; padding: 45px 5px 40px; }.visual-grid { inset: 12px 0 20px 18px; background-size: 26px 26px; }.visual-label { left: 14px; right: 4px; font-size: 7px; }.visual-window { margin-left: 0; transform: rotate(.8deg); }.window-body { padding: 17px 12px 15px; }.code-line { gap: 10px; font-size: 8px; }.build-card { margin-left: 17px; }.visual-caption { right: 0; bottom: 17px; font-size: 7px; }.hero-bottom { font-size: 7px; letter-spacing: .5px; }
  .intro { padding-top: 82px; padding-bottom: 75px; }.intro-content, .section-heading, .faq { grid-template-columns: 1fr; display: grid; gap: 24px; }.intro h2, .section-heading h2, .approach h2, .faq h2 { font-size: 39px; letter-spacing: -2px; }.intro-text p { font-size: 13px; }.intro-rule { margin-top: 36px; gap: 12px; font-size: 7px; }
  .services { padding-top: 78px; padding-bottom: 80px; }.section-heading { margin-bottom: 29px; }.section-heading > p { max-width: 400px; margin: 0; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: initial; padding: 22px; border-right: 0; border-bottom: 1px solid #cfd2c8; }.service-card:last-child { border-bottom: 0; }.service-card h3 { margin-top: 25px; }.service-card p { min-height: initial; }.service-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .approach { width: 100%; padding: 75px 18px; grid-template-columns: 1fr; gap: 34px; }.approach-intro { max-width: 450px; }.step { grid-template-columns: 27px 1fr 22px; gap: 8px; }.step h3 { font-size: 16px; }
  .faq { padding-top: 80px; padding-bottom: 80px; gap: 26px; }.faq-item summary { min-height: 60px; font-size: 12px; }.faq-item p { font-size: 11px; }.contact { min-height: 375px; padding: 70px 18px 54px; }.contact h2 { font-size: 42px; letter-spacing: -2px; }.contact-spark { right: 8%; top: 20px; font-size: 29px; }.site-footer { min-height: 145px; gap: 15px; }.site-footer > p { width: calc(100% - 160px); margin: 0; font-size: 9px; }.footer-links { gap: 17px; }.copyright { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}