/* index page */
:root{
  --rule:var(--line);
  --accent:var(--brand-blue);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
img{max-width:100%}
body{background:var(--bg); color:var(--ink); font:400 17px/1.6 var(--body); padding-inline:20px; -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px; margin:0 auto; display:flex; flex-direction:column}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0}
p{margin:0}
.label{font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}


/* hero */
.hero{padding-block:96px 72px; display:grid; gap:28px}
.hero h1{font-size:clamp(36px, 9.5vw, 104px); font-weight:800; font-stretch:125%; line-height:.95; letter-spacing:-.04em; white-space:nowrap}
.hero .lede{font:400 clamp(20px,2.4vw,26px)/1.4 var(--display); max-width:42ch}
.hero .meta{display:flex; flex-wrap:wrap; gap:10px 28px; font:400 13px/1.4 var(--mono); color:var(--muted)}

/* sections */
section{padding-block:64px; border-top:1px solid var(--rule); display:grid; grid-template-columns:220px 1fr; gap:24px 48px}
section > .label{padding-top:8px}
@media (max-width:760px){ section{grid-template-columns:1fr; padding-block:48px} .hero{padding-block:56px 48px} }

/* now */
.now h2{font-size:clamp(30px,4vw,44px); font-weight:800; font-stretch:125%; letter-spacing:-.03em; line-height:1.05}
.now .body{display:grid; gap:20px; max-width:62ch}
.now .body p{color:var(--muted)}
.now .body p strong{color:var(--ink); font-weight:500}
.facts{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.facts li{list-style:none; font:400 13px/1 var(--mono); padding:8px 10px; border:1px solid var(--rule); border-radius:3px; background:var(--surface)}
.facts{padding:0; margin:4px 0 0}
.btn{display:inline-flex; align-items:center; gap:8px; align-self:start; justify-self:start; font:500 15px/1 var(--body); text-decoration:none; background:var(--accent); color:var(--accent-ink); padding:13px 18px; border-radius:3px; border:0; cursor:pointer}
.btn:hover{filter:brightness(1.08)}

/* services */
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.cols h3{font-size:21px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px}
.cols p{color:var(--muted); font-size:16px}
@media (max-width:900px){ .cols{grid-template-columns:1fr; gap:24px} }

/* work grid */
.work .intro{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:12px 24px; margin-bottom:30px}
.work .intro p{color:var(--muted); max-width:52ch}
.work .intro a{font:500 14px/1 var(--body); color:var(--accent); text-decoration:none; white-space:nowrap}
.work .intro a:hover{text-decoration:underline}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px 16px}
@media (max-width:760px){ .grid{grid-template-columns:repeat(2,1fr)} }
.tile{text-decoration:none; display:grid; gap:10px}
.tile .img{aspect-ratio:404/316; max-width:100%; overflow:hidden; background:var(--surface); border-radius:2px}
.tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.tile:hover img{transform:scale(1.035)}
.tile .cap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 12px; font-size:14px; line-height:1.35}
.tile .cap span:last-child{font:400 12px/1.5 var(--mono); color:var(--muted); white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .tile img{transition:none} .tile:hover img{transform:none} }

/* contact */
.contact h2{font-size:clamp(32px,5.5vw,60px); font-weight:800; font-stretch:125%; letter-spacing:-.035em; line-height:1.02}
.contact .body{display:grid; gap:24px}
.mail{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.mail code{font:500 clamp(17px,2.4vw,22px)/1.3 var(--mono); user-select:all; word-break:break-all}
.copy{font:500 13px/1 var(--body); background:transparent; color:var(--ink); border:1px solid var(--rule); padding:9px 12px; border-radius:3px; cursor:pointer}
.copy:hover{border-color:var(--ink)}
footer{border-top:1px solid var(--rule); padding-block:28px 40px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font:400 13px/1.4 var(--mono); color:var(--muted)}

footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--ink); text-decoration:underline}