:root { --deep: #153b38; --ink: #16302d; --paper: #f4f6ee; --coral: #e5745e; --mint: #cbe0d0; --line: #aebdb4; --muted: #557067; }
* { box-sizing: border-box; letter-spacing: 0; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", Arial, sans-serif; line-height: 1.5; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { cursor: pointer; }.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.demo-note { min-height: 34px; display: flex; justify-content: space-between; align-items: center; padding: 0 max(24px, calc((100vw - 1180px) / 2)); color: #dcece3; background: var(--deep); font-family: "DM Mono", monospace; font-size: 11px; }.demo-note a { text-decoration: underline; }.site-header { min-height: 88px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 25px; align-items: center; }.logo { font-size: 17px; font-weight: 700; line-height: .83; }.logo b { color: #ce634e; }.site-header nav { display: flex; gap: 24px; font-size: 13px; font-weight: 700; }.header-cta { justify-self: end; min-height: 40px; display: inline-flex; align-items: center; border: 1px solid var(--deep); border-radius: 3px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.hero { display: grid; grid-template-columns: .88fr 1.12fr; min-height: 610px; align-items: stretch; }.hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 65px 6vw 65px 0; }.eyebrow { margin: 0 0 14px; color: #557b70; font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; }.hero h1, .services h2, .how h2, .contact h2 { margin: 0; font-size: clamp(46px, 5.3vw, 73px); line-height: .91; }.hero h1 span { color: #d46652; }.hero-copy > p:last-of-type { max-width: 430px; margin: 27px 0; color: var(--muted); font-size: 17px; }.button { min-height: 45px; display: inline-flex; width: fit-content; align-items: center; gap: 13px; border: 1px solid var(--deep); border-radius: 3px; padding: 10px 14px; color: #f3f6ef; background: var(--deep); font-size: 13px; font-weight: 700; }.hero figure { position: relative; min-height: 480px; margin: 0; overflow: hidden; background: var(--mint); }.hero figure img { width: 100%; height: 100%; object-fit: cover; }.hero figcaption { position: absolute; right: 0; bottom: 0; padding: 10px 12px; color: var(--deep); background: var(--mint); font-family: "DM Mono", monospace; font-size: 10px; }
.signals { padding: 28px 0 0; color: #eaf2ec; background: var(--deep); }.signals > .wrap > p { margin: 0; color: #a8c5b5; font-family: "DM Mono", monospace; font-size: 11px; }.signal-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 25px; }.signal-grid article { min-height: 160px; display: grid; align-content: space-between; border: solid #588070; border-width: 1px 1px 0 0; padding: 24px 24px 24px 0; }.signal-grid article + article { padding-left: 24px; }.signal-grid article:last-child { border-right: 0; }.signal-grid b { color: #d5e8d9; font-size: 23px; }.signal-grid span { color: #b5cbc1; }
.services { display: grid; grid-template-columns: .73fr 1.27fr; gap: 85px; padding: 118px 0; }.services h2, .how h2, .contact h2 { font-size: clamp(42px, 4.8vw, 65px); }.service-table { border-top: 1px solid var(--line); }.service-table article { display: grid; grid-template-columns: 42px 1fr auto auto; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); padding: 22px 0; }.service-table > article > span { color: #5b8174; font-family: "DM Mono", monospace; font-size: 11px; }.service-table h3 { margin: 0 0 7px; font-size: 22px; }.service-table p { margin: 0; color: var(--muted); font-size: 14px; }.service-table b { color: #46675c; font-family: "DM Mono", monospace; font-size: 11px; white-space: nowrap; }.service-table a { display: flex; align-items: center; gap: 7px; border-bottom: 1px solid currentColor; padding-bottom: 3px; font-size: 12px; font-weight: 700; }.service-table i { font-style: normal; }
.how { padding: 105px 0; color: #eff6ef; background: #295c52; }.how .eyebrow { color: #c5dbcd; }.how-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 88px; }.how ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid #81a496; }.how li { display: grid; grid-template-columns: 58px 1fr; gap: 15px; border-bottom: 1px solid #81a496; padding: 18px 0; }.how li > span { color: #b9d8c4; font-family: "DM Mono", monospace; font-size: 11px; }.how h3 { margin: 0 0 7px; font-size: 21px; }.how li p { margin: 0; color: #d0e1d5; }
.contact { display: grid; grid-template-columns: .9fr 1fr; gap: 100px; padding: 118px 0; }.contact > div > p:last-child { max-width: 405px; color: var(--muted); }.contact form { display: grid; gap: 13px; padding: 24px; color: #f2f8f2; background: var(--deep); }.contact label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }.contact input, .contact textarea { width: 100%; border: 1px solid #7ea495; border-radius: 3px; padding: 10px; color: #f2f8f2; background: transparent; }.contact .button { width: 100%; justify-content: center; border-color: var(--coral); color: var(--deep); background: var(--coral); }.form-message { min-height: 20px; margin: 0; color: #c3dacf; font-size: 12px; }
footer { padding: 26px 0; color: #d4e2d8; background: var(--deep); font-size: 12px; } footer .wrap { display: flex; justify-content: space-between; gap: 16px; }
@media (max-width: 760px) { .wrap { width: min(100% - 32px, 1180px); }.demo-note { padding: 0 16px; }.site-header { grid-template-columns: 1fr auto; }.site-header nav { display: none; }.hero { grid-template-columns: 1fr; }.hero-copy { padding: 55px 0 40px; }.hero figure { min-height: 385px; }.signal-grid, .services, .how-grid, .contact { grid-template-columns: 1fr; }.signal-grid article, .signal-grid article + article { min-height: auto; gap: 44px; border-right: 0; border-bottom: 1px solid #588070; padding: 23px 0; }.signal-grid article:last-child { border-bottom: 0; }.services, .contact { gap: 45px; padding: 75px 0; }.service-table article { grid-template-columns: 35px 1fr; }.service-table b, .service-table a { grid-column: 2; width: fit-content; }.how { padding: 75px 0; }.how-grid { gap: 42px; } footer .wrap { display: grid; } }