:root{
  --bg:#f7f7f5;
  --card:#ffffff;
  --border:#e7e5e4;
  --text:#1c1917;
  --muted:#78716c;
  --muted-2:#a8a29e;
  --accent:#1c1917;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{line-height:1.5}
a{color:inherit}
button{font:inherit}
img{max-width:100%;display:block}
iframe{border:0}

.site-shell{min-height:100vh}
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(255,255,255,.92); border-bottom:1px solid var(--border);
}
.header-inner,.footer-inner,.screen{
  max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px;
}
.header-inner{
  display:flex; gap:16px; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px;
}
.brand-title{font-size:14px; text-transform:uppercase; letter-spacing:.3em; color:#44403c}
.brand-sub{font-size:12px; color:var(--muted)}
.nav{display:flex; flex-wrap:wrap; gap:10px}
.nav-btn,.chip,.outline-btn,.primary-btn,.filter-btn{
  border:1px solid var(--border); background:#fff; color:#44403c; border-radius:4px;
  padding:10px 14px; cursor:pointer; transition:.18s ease;
}
.nav-btn:hover,.chip:hover,.outline-btn:hover,.filter-btn:hover{background:#f5f5f4}
.nav-btn.active,.filter-btn.active{background:var(--accent); color:#fafaf9; border-color:var(--accent)}
.screen{padding-top:44px; padding-bottom:64px; min-height:calc(100vh - 140px)}
.card{
  background:var(--card); border:1px solid var(--border); box-shadow:none;
}
.card-pad{padding:28px}
.eyebrow{font-size:12px; text-transform:uppercase; letter-spacing:.24em; color:var(--muted)}
.hero-title{
  margin:0; white-space:normal; font-size:clamp(3rem,8vw,6.2rem); line-height:.95; letter-spacing:-.04em;
}
.section-title{margin:0; font-size:clamp(2rem,5vw,3.5rem); line-height:1; letter-spacing:-.03em}
.section-desc{max-width:780px; color:var(--muted); font-size:16px}
.stack-4 > * + *{margin-top:16px}
.stack-5 > * + *{margin-top:20px}
.stack-6 > * + *{margin-top:24px}
.stack-8 > * + *{margin-top:32px}
.stack-10 > * + *{margin-top:40px}
.grid-2{display:grid; gap:28px}
.grid-3{display:grid; gap:24px}
.feature-grid{display:grid; gap:32px}
.image-grid{display:grid; gap:24px}
.work-list{display:grid; gap:14px}
.work-card{
  display:grid; gap:20px; padding:24px;
}
.badge{
  display:inline-flex; align-items:center; border-radius:4px; background:#f5f5f4; color:#57534e; padding:5px 10px; font-size:13px;
}
.meta{color:var(--muted); font-size:14px}
.detail-grid{display:grid; gap:28px}
.media-frame,.placeholder-frame{
  aspect-ratio:16/9; width:100%; background:#efede8; border-bottom:1px solid var(--border);
}
.placeholder-frame, .img-placeholder{
  display:flex; align-items:center; justify-content:center; color:var(--muted);
}
.img-placeholder{aspect-ratio:4/5; border:1px solid var(--border); background:#f5f5f2; padding:16px; text-align:center}
.project-thumb{
  aspect-ratio:4/3; object-fit:cover; background:#f5f5f2; border:1px solid var(--border);
}
.gallery-img{aspect-ratio:4/5; object-fit:cover; border:1px solid var(--border); background:#f5f5f2}
.action-row{display:flex; flex-wrap:wrap; gap:10px}
.info-grid{display:grid; gap:8px; color:#44403c}
.info-grid .label{color:var(--muted)}
.project-card{display:grid; gap:22px; padding:24px}
.contact-grid{display:grid; gap:28px}
.footer{border-top:1px solid var(--border); background:#fff}
.footer-inner{padding-top:20px; padding-bottom:20px; display:flex; justify-content:flex-end; color:var(--muted); font-size:14px}
.small{font-size:14px}
.body-copy{font-size:16px; line-height:1.9; color:#44403c}
.body-copy p{margin:0}
.body-copy p + p{margin-top:18px}
.rich-text{white-space:pre-line; color:#57534e; line-height:1.8}
.external-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.external-link svg{width:16px;height:16px}
.subtle{color:var(--muted)}
.hide{display:none !important}

@media (min-width: 800px){
  .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:minmax(0,1fr) auto; align-items:end}
}
@media (min-width: 980px){
  .work-card{grid-template-columns:168px minmax(0,1fr) auto; align-items:start; gap:28px}
  .detail-grid{grid-template-columns:1.1fr .9fr}
  .project-card{grid-template-columns:220px minmax(0,1fr); align-items:center}
}