:root { --ink: #182021; --paper: #f0eee7; --muted: #617073; --line: rgba(24, 32, 33, .18); --accent: #dd6b3d; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; } a { color: inherit; text-underline-offset: 3px; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .skip-link { left: 16px; padding: 9px 12px; position: fixed; top: -60px; z-index: 3; background: var(--ink); color: var(--paper); } .skip-link:focus { top: 16px; }
.site-header { align-items: center; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; min-height: 74px; padding: 0 clamp(20px, 5vw, 72px); } .wordmark { font-size: 20px; font-weight: 800; letter-spacing: -.08em; text-decoration: none; } .wordmark span { color: var(--accent); } nav { display: flex; gap: 22px; } nav a, .nav-cta { font-size: 13px; text-decoration: none; } .nav-cta { justify-self: end; text-decoration: underline; }
main { overflow: hidden; }.hero { min-height: 550px; padding: clamp(54px, 9vw, 130px) clamp(20px, 11vw, 176px) 46px; position: relative; } .kicker { color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .12em; margin: 0 0 22px; text-transform: uppercase; }.kicker span { color: var(--accent); padding: 0 4px; }h1, h2, h3, p { margin-top: 0; } h1 { font-size: clamp(45px, 7.2vw, 102px); font-weight: 500; letter-spacing: -.07em; line-height: .93; margin-bottom: 60px; max-width: 1050px; } .hero-bottom { align-items: end; display: flex; justify-content: space-between; gap: 24px; }.hero-bottom p { font-size: 15px; line-height: 1.55; margin: 0; max-width: 340px; }.arrow-link { font-size: 13px; font-weight: 700; text-decoration: none; }.arrow-link span { color: var(--accent); font-size: 17px; margin-left: 8px; }
.feature { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: 1.2fr .8fr; min-height: 510px; }.feature-image { background: linear-gradient(135deg, transparent 38%, rgba(240,238,231,.18) 38% 42%, transparent 42%), radial-gradient(circle at 52% 42%, #ef835d 0 14%, transparent 14.3%), radial-gradient(ellipse at 50% 105%, #394345 0 42%, transparent 42.3%), #273033; }.feature-copy { align-self: end; padding: clamp(36px, 5.5vw, 88px); }.feature-copy .kicker { color: #acb7b8; }.feature h2, .services h2, .about h2, .contact h2 { font-size: clamp(27px, 3.5vw, 51px); font-weight: 500; letter-spacing: -.055em; line-height: 1; }.text-link { color: #f5b099; display: inline-block; font-size: 13px; font-weight: 700; margin-top: 28px; }
.services { display: grid; gap: 60px; grid-template-columns: .85fr 1.15fr; padding: clamp(70px, 11vw, 150px) clamp(20px, 11vw, 176px); }.services h2 { max-width: 360px; }.service-list { border-top: 1px solid var(--line); }.service { border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 42px 1fr 1.15fr; padding: 24px 0; }.service span { color: var(--accent); font-family: ui-monospace, monospace; font-size: 12px; }.service h3 { font-size: 16px; font-weight: 700; margin: 0; }.service p, .about > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.about { border-top: 1px solid var(--line); display: grid; gap: 35px; grid-template-columns: .7fr 1.3fr; padding: clamp(70px, 10vw, 140px) clamp(20px, 11vw, 176px); }.about > p:last-child { align-self: end; font-size: 17px; max-width: 530px; }.contact { background: var(--accent); padding: clamp(70px, 10vw, 145px) clamp(20px, 11vw, 176px); }.contact .kicker { color: #69331f; }.contact h2 { font-size: clamp(45px, 7vw, 90px); margin-bottom: 45px; }.contact form { max-width: 620px; }.contact label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 8px; }.input-help { color: rgba(24,32,33,.7); font-size: 12px; margin: 0 0 2px; }.form-row { border-bottom: 1px solid rgba(24,32,33,.6); display: flex; }.form-row input { background: transparent; border: 0; color: var(--ink); font-size: 18px; min-width: 0; outline: 0; padding: 13px 0; width: 100%; }.form-row button { background: transparent; border: 0; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 750; white-space: nowrap; }.form-message { font-size: 13px; min-height: 20px; margin: 11px 0 0; }
footer { align-items: center; display: flex; font-size: 11px; justify-content: space-between; min-height: 74px; padding: 0 clamp(20px, 5vw, 72px); } footer a { color: var(--muted); }
@media (max-width: 720px) { .site-header { grid-template-columns: 1fr auto; min-height: 62px; } nav { display: none; }.hero { min-height: 480px; }.hero-bottom { align-items: flex-start; flex-direction: column; } h1 { margin-bottom: 42px; }.feature { display: block; }.feature-image { height: 310px; }.feature-copy { padding: 46px 25px; }.services, .about { display: block; }.services h2 { margin-bottom: 42px; }.service { grid-template-columns: 35px 1fr; }.service p { grid-column: 2; }.about h2 { margin-bottom: 38px; }.contact h2 { margin-bottom: 34px; } footer { align-items: flex-start; flex-direction: column; gap: 8px; padding-bottom: 18px; padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }