:root{--bg:#efeee6;--ink:#1b2a22;--mut:#5c685f;--line:#1b2a2224;--acc:#3f7a4f;--acc2:#c98a3a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Helvetica Neue",Arial,sans-serif;line-height:1.55}
a{color:inherit}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:18px 5vw;background:#efeee6ee;backdrop-filter:blur(6px);border-bottom:1px solid var(--line);font-size:14px}
.mark{font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--acc)}
.top nav a{margin-left:26px;text-decoration:none;color:var(--mut)}
.top nav a:hover{color:var(--ink)}
section{padding:14vh 5vw;border-bottom:1px solid var(--line)}
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#e7e8dc}
.contours{position:absolute;inset:0;width:100%;height:100%}
.contours path{fill:none;stroke:var(--acc);stroke-width:1.4;opacity:.55;stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 3.2s calc(var(--d)*.18s) ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-in{position:relative}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);font-weight:700;margin:0}
h1{font-size:clamp(46px,9vw,132px);line-height:.98;font-weight:800;margin:.25em 0;letter-spacing:-.035em}
h1 em{font-style:normal;color:var(--acc);}
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:block;transform:translateY(105%);animation:up .9s cubic-bezier(.2,.7,.2,1) forwards}
.line:nth-child(2)>span{animation-delay:.14s}
@keyframes up{to{transform:none}}
.lede{max-width:30em;font-size:20px;color:var(--mut)}
.btn{display:inline-block;margin-top:14px;padding:15px 30px;background:var(--ink);color:var(--bg);text-decoration:none;font-size:14px;letter-spacing:.06em;font-weight:600;transition:background .2s,transform .2s}
.btn:hover{background:var(--acc);transform:translateY(-2px)}
h2{font-size:clamp(32px,5vw,64px);font-weight:800;letter-spacing:-.025em;margin:0 0 6vh}
.work ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.work li{display:grid;grid-template-columns:60px 2fr 1.5fr 80px;gap:16px;align-items:baseline;padding:30px 0;border-bottom:1px solid var(--line);transition:padding-left .3s,color .3s}
.work li:hover{padding-left:16px;color:var(--acc)}
.work h3{margin:0;font-size:clamp(22px,3vw,40px);font-weight:700;letter-spacing:-.02em}
.work p{margin:0;color:var(--mut)}
.n,.yr{font-size:13px;color:var(--mut)}
.steps,.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;list-style:none;padding:0;margin:0}
.steps span{font-size:13px;color:var(--acc2);font-weight:800;letter-spacing:.1em}
.steps h3,.svc h3{font-size:26px;font-weight:700;margin:.3em 0;letter-spacing:-.02em}
.steps p,.svc p{color:var(--mut);margin:0}
.svc li{border-top:2px solid var(--ink);padding-top:18px;transition:border-color .3s}
.svc li:hover{border-color:var(--acc)}
.contact{text-align:center;background:var(--ink);color:var(--bg);border:0}
.contact p{font-size:clamp(24px,4vw,48px);margin:0 0 22px;font-weight:700}
.contact .btn{background:var(--acc2);color:var(--ink)}
footer{display:flex;justify-content:space-between;padding:28px 5vw;font-size:13px;color:var(--mut)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:none}
@media(max-width:760px){.top nav a{margin-left:14px}.work li{grid-template-columns:36px 1fr 50px}.work li p{display:none}.steps,.svc{grid-template-columns:1fr}section{padding:10vh 6vw}}
@media(prefers-reduced-motion:reduce){.line>span{animation:none;transform:none}.contours path{animation:none;stroke-dashoffset:0}.reveal{opacity:1;transform:none;transition:none}}