:root{--ink:#0a0a0a;--paper:#fff;--g1:#f4f4f2;--g2:#e4e4e0;--g3:#8c8c88;--g4:#4a4a48;--serif:'Newsreader',Georgia,'Times New Roman',serif;--mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;--sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--g4);font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:500;letter-spacing:-.012em;line-height:1.08}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}

/* header */
.bar{background:var(--paper);border-bottom:1px solid var(--g2);position:sticky;top:0;z-index:10}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;font-weight:700;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.logo img{height:30px;width:auto}
.bar nav{display:flex;align-items:center;gap:30px}
.bar nav a{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--g4)}
.bar nav a:hover,.bar nav a.on{color:var(--ink)}
.bar nav a.btn{color:#fff;padding:11px 20px}
.bar nav a.btn:hover{color:#fff}

/* buttons */
.btn{display:inline-block;font-family:var(--mono);font-weight:500;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;background:var(--ink);color:#fff;border:1px solid var(--ink);transition:.2s;cursor:pointer}
.btn:hover{background:#2b2b2b;border-color:#2b2b2b}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:var(--g2);border-color:var(--g2)}
.btn.line{background:none;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.line:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.out{background:none;color:var(--ink);border-color:var(--ink)}
.btn.out:hover{background:var(--ink);color:#fff}

/* banner */
.banner{background-color:var(--ink);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:64px 64px;background-position:-1px -1px;color:#d4d4d0;position:relative;overflow:hidden}
.banner:before{content:"";position:absolute;right:3%;top:50%;transform:translateY(-50%);height:80%;max-width:48%;aspect-ratio:38/33;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='4 0 38 33'><g fill='none' stroke='white' stroke-width='2.6' stroke-linejoin='miter' stroke-miterlimit='10'><polyline points='8,14 12.5,4 17,11 21.5,4 26,14'/><polyline points='8,18 12.5,28 17,21 21.5,28 26,18'/></g><text x='34' y='25' text-anchor='middle' font-family='Georgia,serif' font-size='12' font-weight='700' fill='white'>2</text></svg>") no-repeat center/contain;opacity:.06;pointer-events:none}
.banner h1 em{font-style:italic;font-weight:400;color:#fff;box-shadow:inset 0 -.14em 0 rgba(255,255,255,.28)}
.banner .wrap{position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);margin-bottom:26px}
.eyebrow:before{content:"//";color:#fff;opacity:.55}
.banner h1{color:#fff;font-size:clamp(2.5rem,6vw,4.6rem);max-width:15ch}
.banner .sub{font-size:1.2rem;max-width:54ch;margin-top:26px;color:#c4c4c0}
.banner .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.hero{padding:132px 0 120px}
.head{padding:96px 0 84px}
.head h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:18ch}

/* strip */
.strip{background:var(--g1);border-bottom:1px solid var(--g2)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .wrap>div{padding:26px 24px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-left:1px solid var(--g2)}
.strip .wrap>div:first-child{border-left:0;padding-left:0}

/* sections */
.sec{padding:96px 0}
.sec.alt{background:var(--g1)}
.sec h2{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:14px}
.sec .lead{max-width:60ch;font-size:1.1rem}
.rows{margin-top:44px;border-top:1px solid var(--ink)}
.li{display:grid;grid-template-columns:80px 1fr 1.3fr 40px;gap:28px;align-items:start;padding:34px 0;border-bottom:1px solid var(--g2);transition:.2s}
.li:hover{background:var(--g1)}
.li .n{font-family:var(--mono);font-weight:500;color:var(--g3);font-size:.9rem;letter-spacing:.1em}
.li h3{font-size:1.5rem}
.li p{font-size:1rem}
.li .go{font-size:1.4rem;color:var(--ink);text-align:right}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.step{border-top:3px solid var(--ink);padding-top:18px}
.step .n{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;color:var(--g3)}
.step h3{font-size:1.25rem;margin:8px 0 8px}
.step p{font-size:.96rem}
.band{background:var(--ink);padding:96px 0;text-align:center}
.band h2{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:24ch;margin:0 auto 34px}

/* service blocks */
.svc{padding:80px 0;border-top:1px solid var(--g2)}
.svc:first-of-type{border-top:0}
.svc .grid{display:grid;grid-template-columns:1fr 1.5fr;gap:72px}
.svc .tag{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g3);display:block;margin-bottom:14px}
.svc h2{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.svc p.d{margin-top:16px;font-size:1.05rem}
.svc h3{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin:30px 0 8px;letter-spacing:.2em}
.svc h3:first-child{margin-top:0}
.svc ul{list-style:none;border-top:1px solid var(--g2)}
.svc li{padding:13px 0;border-bottom:1px solid var(--g2);color:var(--ink)}
.svc .btn{margin-top:32px}

/* contact */
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--g2);margin-top:8px}
.opt{padding:34px 30px;border-left:1px solid var(--g2)}
.opt:first-child{border-left:0}
.opt h3{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g3);margin-bottom:10px}
.opt p,.opt a{font-size:1.1rem;color:var(--ink);font-weight:500}

/* form */
.qform{position:relative;max-width:680px;margin:34px auto 0;background:#fff;border:1px solid var(--g2);padding:38px 38px 32px;text-align:left}
.qform .row{display:grid;gap:6px;margin-bottom:20px}
.qform .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.qform label{font-weight:600;color:var(--ink);font-size:.86rem}
.qform .optional{font-weight:400;color:var(--g3);font-size:.82rem}
.qform input[type=text],.qform input[type=email],.qform input[type=tel],.qform select,.qform textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #c9c9c5;border-radius:0;padding:13px 14px;width:100%}
.qform input:focus,.qform select:focus,.qform textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
.qform textarea{min-height:110px;resize:vertical}
.qform .check{display:flex;gap:12px;align-items:flex-start;margin:4px 0 22px;background:var(--g1);border:1px solid var(--g2);padding:16px 18px}
.qform .check input{margin-top:4px;width:18px;height:18px;accent-color:var(--ink);flex:none}
.qform .check label{font-weight:400;color:var(--g4);font-size:.88rem;line-height:1.55}
.qform .check label a{color:var(--ink);font-weight:600;text-decoration:underline}
.qform button{width:100%}
.qform .fineprint{font-size:.8rem;color:var(--g3);text-align:center;margin-top:16px;line-height:1.5}
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* footer */
footer{background:var(--ink);color:var(--g3);padding:56px 0 48px;font-size:.82rem}
footer .top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-bottom:28px;border-bottom:1px solid #2a2a28}
footer .brand{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase}
footer .brand img{height:28px;width:auto}
footer nav a{color:#c4c4c0;margin-left:26px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
footer nav a:hover{color:#fff}
footer .ent{margin-top:24px}

@media(max-width:860px){.li{grid-template-columns:50px 1fr;gap:12px 20px}.li p{grid-column:2}.li .go{display:none}.strip .wrap{grid-template-columns:1fr}.strip .wrap>div{border-left:0;border-top:1px solid var(--g2);padding-left:0}.strip .wrap>div:first-child{border-top:0}.steps{grid-template-columns:1fr 1fr}.svc .grid{grid-template-columns:1fr;gap:32px}.opts{grid-template-columns:1fr}.opt{border-left:0;border-top:1px solid var(--g2)}.opt:first-child{border-top:0}}
@media(max-width:620px){.banner:before{opacity:.045;right:-10%;max-width:70%}.bar nav a:not(.btn){display:none}.hero{padding:84px 0 76px}.head{padding:64px 0 56px}.sec,.band{padding:68px 0}.steps{grid-template-columns:1fr}.qform{padding:26px 20px}.qform .two{grid-template-columns:1fr}footer nav a{margin:0 18px 0 0}}

/* proof row (inside banner) */
.proof{display:grid;grid-template-columns:repeat(4,1fr);margin-top:84px;border-top:1px solid rgba(255,255,255,.22)}
.proof>div{padding:26px 24px 0;border-left:1px solid rgba(255,255,255,.14)}
.proof>div:first-child{border-left:0;padding-left:0}
.proof b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6vw,3rem);line-height:1;color:#fff;letter-spacing:-.02em}
.proof span{display:block;margin-top:10px;font-size:.88rem;line-height:1.5;color:#a8a8a4;max-width:24ch}

/* selected work / article rows */
.work .li{grid-template-columns:80px 1.1fr 1.4fr 40px}
.work .li .src{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g3);display:block;margin-top:8px}
.more{margin-top:34px}

/* about */
.about{display:grid;grid-template-columns:1.5fr 1fr;gap:88px;align-items:start}
.about .copy p{font-size:1.12rem;margin-bottom:22px;color:var(--g4)}
.about .copy p:first-child{font-family:var(--serif);font-size:1.7rem;line-height:1.35;color:var(--ink)}
.tl{border-top:1px solid var(--ink)}
.tl div{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--g2)}
.tl b{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g3);padding-top:4px}
.tl span{color:var(--ink)}

/* portfolio entries */
.art{display:grid;grid-template-columns:80px 1fr 1.3fr;gap:28px;padding:44px 0;border-bottom:1px solid var(--g2)}
.art:first-child{border-top:1px solid var(--ink)}
.art .n{font-family:var(--mono);font-weight:500;color:var(--g3);font-size:.9rem;letter-spacing:.1em}
.art h2{font-size:1.6rem;margin-bottom:10px}
.art .ttl{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g3)}
.art p{margin-bottom:14px}
.art a.read{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}

@media(max-width:860px){.proof{grid-template-columns:1fr 1fr;margin-top:56px}.proof>div{padding:22px 20px 22px 0;border-left:0;border-bottom:1px solid rgba(255,255,255,.14)}.work .li{grid-template-columns:50px 1fr}.about{grid-template-columns:1fr;gap:48px}.art{grid-template-columns:50px 1fr;gap:10px 20px}.art>div:last-child{grid-column:2}}
@media(max-width:620px){.proof{grid-template-columns:1fr}.tl div{grid-template-columns:1fr;gap:4px}}

.more-link{margin-top:34px;font-size:.95rem;color:#a8a8a4}
.more-link a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.more-link a:hover{border-color:#fff}

footer .ent a{color:#c4c4c0;border-bottom:1px solid #4a4a48}
footer .ent a:hover{color:#fff;border-color:#fff}
footer .ent .legal{margin-left:20px;font-size:.7rem;color:#5e5e5a}
footer .ent .legal a{color:inherit;border:0;margin-right:14px}
footer .ent .legal a:hover{color:#a8a8a4}

footer .ent .legal{margin-left:16px;white-space:nowrap}
footer .ent .legal a{margin:0}

.opt .share{margin-top:10px}
.opt .share a{font-size:.86rem;font-weight:400;color:var(--g3);text-decoration:underline;text-underline-offset:3px}
.opt .share a:hover{color:var(--ink)}