@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Instrument+Serif:ital@0;1&display=swap');

:root { --ink:#24252b; --paper:#f8f6f1; --warm:#efebe3; --line:#d8d2c8; --muted:#686966; --orange:#b6533d; --dark:#273234; --sans:'DM Sans',Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:var(--sans); }
a { color:inherit; text-decoration:none; }
p,h1,h2,h3 { margin-top:0; }
.shell { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.nav { display:flex; align-items:center; justify-content:space-between; min-height:82px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font-size:17px; font-weight:600; letter-spacing:-.05em; }
.brand span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#fff; background:var(--orange); font:400 20px var(--serif); }
nav { display:flex; gap:27px; color:var(--muted); font-size:13px; }
nav a:hover,.footer a:hover,.quiet:hover { color:var(--orange); }
.nav-cta,.button { display:inline-flex; align-items:center; gap:14px; border:1px solid var(--ink); border-radius:999px; padding:11px 16px; font-size:12px; font-weight:600; transition:all .18s ease; }
.nav-cta:hover { color:var(--paper); background:var(--ink); }
.hero { display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:70px; padding:92px 0 86px; }
.eyebrow { margin:0 0 20px; color:var(--orange); font:500 10px/1 var(--mono); letter-spacing:.12em; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.055em; }
h1 { max-width:610px; margin-bottom:26px; font-size:clamp(59px,6.1vw,91px); line-height:.87; }
h1 em,h2 em { color:var(--orange); font-weight:400; }
.hero-copy>p:not(.eyebrow) { max-width:490px; margin-bottom:31px; color:var(--muted); font-size:17px; line-height:1.58; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.button { padding:13px 18px; color:#fff; background:var(--ink); }
.button:hover { border-color:#93422f; background:#93422f; }
.quiet { font-size:13px; font-weight:500; }
.hero-copy>small { display:block; margin-top:28px; color:var(--muted); font-size:11px; }

.workspace-card { overflow:hidden; border:1px solid #273234; border-radius:17px; color:#f8f8f4; background:var(--dark); box-shadow:13px 15px 0 #ded7ce; }
.card-bar { display:flex; justify-content:space-between; padding:15px 18px; border-bottom:1px solid rgba(255,255,255,.16); font:500 10px var(--mono); letter-spacing:.08em; }
.card-bar span { color:#b5d2bf; }
.card-main { display:flex; align-items:end; justify-content:space-between; padding:25px 26px 20px; }
.card-main p { margin-bottom:8px; color:#b7c0bf; font-size:12px; }
.card-main strong { display:block; font:400 47px/.76 var(--serif); }
.card-main strong+span { display:block; margin-top:8px; color:#d9e0dc; font-size:12px; line-height:1.25; }
.avatar { display:grid; place-items:center; width:45px; height:45px; border-radius:50%; color:#293236; background:#e4b26e; font:400 30px var(--serif); }
.queue { display:grid; gap:9px; padding:0 16px 16px; }
.queue article { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:9px; min-height:56px; padding:10px 11px; border-radius:9px; background:rgba(255,255,255,.09); }
.queue .icon { font-size:17px; }
.queue .coral { color:#efc8a6; }.queue .blue { color:#b9d2e2; }.queue .mint { color:#b5d2bf; }
.queue article div { display:grid; gap:3px; }.queue b { font-size:12px; font-weight:500; }.queue small { color:#b9c5c2; font-size:10px; }.queue em { color:#efc8a6; font:500 10px var(--mono); }
.card-footer { display:flex; justify-content:space-between; gap:12px; padding:13px 18px; color:#a9cbb6; background:#1d2628; font:500 10px var(--mono); }.card-footer b { font-weight:500; }

.line { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font:500 11px var(--mono); }
.line div { display:flex; gap:22px; }.line b { color:var(--orange); font-weight:500; }.line b:nth-child(even) { color:var(--ink); }
.features { display:grid; grid-template-columns:.84fr 1.16fr; gap:65px; padding:111px 0; }
.section-title h2,.principles h2,.contact h2 { margin-bottom:20px; font-size:clamp(48px,5.5vw,73px); line-height:.9; }
.section-title>p:not(.eyebrow) { max-width:400px; margin-bottom:0; color:var(--muted); font-size:16px; line-height:1.6; }
.grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; border-top:1px solid var(--line); }
.grid article { min-height:285px; padding:22px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.grid article:first-child { border-left:1px solid var(--line); }
.grid span,.principle-list>article>span { color:var(--orange); font:500 11px var(--mono); }.grid h3 { margin:72px 0 10px; font-size:16px; letter-spacing:-.03em; }.grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.58; }
.principles { display:grid; grid-template-columns:1fr 1fr; gap:87px; width:min(1280px,calc(100% - 32px)); padding:110px 66px; background:var(--warm); }.principles h2 { margin-bottom:0; }
.principle-list { display:grid; align-content:center; }.principle-list article { display:grid; grid-template-columns:37px 1fr; gap:14px; padding:20px 0; border-top:1px solid #d5cec3; }.principle-list article:last-child { border-bottom:1px solid #d5cec3; }.principle-list b { display:block; margin-bottom:7px; font-size:15px; letter-spacing:-.025em; }.principle-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.52; }
.contact { display:flex; flex-direction:column; align-items:center; padding:118px 0; text-align:center; }.contact h2 { max-width:710px; }.contact>p:not(.eyebrow) { max-width:490px; margin-bottom:28px; color:var(--muted); font-size:16px; line-height:1.58; }.contact small { margin-top:20px; color:var(--muted); font-size:11px; }
.footer { display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:48px; padding:32px 0 40px; border-top:1px solid var(--line); }.footer p { margin:11px 0 0; color:var(--muted); font-size:11px; }.footer>div:nth-child(2) { display:flex; gap:17px; color:var(--muted); font-size:11px; }.footer small { color:var(--muted); font-size:10px; white-space:nowrap; }
.legal { max-width:760px; padding:90px 0 120px; }.legal h1 { font-size:clamp(56px,6vw,79px); }.legal h2 { margin:47px 0 13px; font-size:30px; line-height:1.1; }.legal p { color:var(--muted); font-size:15px; line-height:1.75; }.legal .lead { max-width:650px; font-size:20px; line-height:1.55; }.legal a { color:var(--orange); }.legal .note { margin-top:54px; padding-top:19px; border-top:1px solid var(--line); font-size:11px; }
@media (max-width:900px) { .features { gap:36px; }.grid { grid-template-columns:1fr; }.grid article,.grid article:first-child { min-height:0; padding:24px 20px 28px; border-left:1px solid var(--line); }.grid h3 { margin-top:34px; } }
@media (max-width:760px) { .shell { width:min(100% - 38px,620px); }.nav { min-height:67px; }nav{display:none}.hero{grid-template-columns:1fr;gap:53px;padding:62px 0 66px}h1{font-size:clamp(57px,15vw,74px)}.hero-copy>p:not(.eyebrow){font-size:15px}.workspace-card{max-width:520px}.line{align-items:flex-start;flex-direction:column}.line div{flex-wrap:wrap;gap:10px 18px}.features,.principles{grid-template-columns:1fr;gap:31px}.features{padding:74px 0}.principles{width:100%;padding:74px 19px}.contact{padding:82px 0}.footer{grid-template-columns:1fr;align-items:start;gap:22px}.footer>div:nth-child(2){flex-wrap:wrap}.legal{padding:60px 0 90px}.card-footer{flex-wrap:wrap} }