:root { color-scheme: dark; --bg:#121311; --panel:#181917; --line:rgba(238,241,231,.12); --text:#eeefe9; --muted:#999c93; --accent:#ff7a1a; --radius:16px; --ease:cubic-bezier(.16,1,.3,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"DM Sans",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:radial-gradient(var(--line) .7px,transparent .7px); background-size:22px 22px; opacity:.55; z-index:-1; }
a { color:inherit; text-decoration:none; }
.project-nav { width:min(100% - 48px,1400px); height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.project-brand { font:700 25px "Manrope",sans-serif; letter-spacing:-.07em; }
.project-brand span { margin-left:4px; color:var(--accent); font-size:9px; vertical-align:top; letter-spacing:0; }
.back-link { padding:12px 17px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; transition:.25s var(--ease); }
.back-link:hover { color:var(--text); border-color:var(--accent); transform:translateY(-2px); }
main { width:min(100% - 48px,1320px); margin:auto; }
.projects-hero { min-height:62dvh; padding:10vh 4vw 8vh; display:flex; flex-direction:column; justify-content:center; }
.projects-hero > p,.case-hero > p { margin:0 0 22px; color:var(--accent); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.projects-hero h1,.case-hero h1 { margin:0; font:500 clamp(52px,8vw,112px)/.93 "Manrope",sans-serif; letter-spacing:-.07em; }
.projects-hero h1 span { color:var(--muted); }
.hero-note { max-width:480px; margin:34px 0 0 auto; color:var(--muted); font-size:15px; line-height:1.65; }
.project-index { padding:0 4vw 120px; }
.project-count { display:flex; justify-content:space-between; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.project-count b { color:var(--text); font-weight:500; }
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.archive-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:transform .35s var(--ease),border-color .35s var(--ease); }
.archive-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); }
.archive-featured { grid-column:1/-1; }
.archive-image { overflow:hidden; background:#0d0e0c; }
.archive-image img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; transition:transform .6s var(--ease); }
.archive-card:hover img { transform:scale(1.015); }
.archive-info { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:18px 20px 20px; }
.archive-info div { display:grid; gap:5px; }
.archive-info strong { font:600 16px "Manrope",sans-serif; }
.archive-info span,.archive-info small { color:var(--muted); font-size:11px; }
.archive-info b { color:var(--accent); font-weight:400; }
.proof { padding:0 4vw 120px; scroll-margin-top:24px; }
.proof-head { padding:60px 0 70px; }
.proof-head > p { margin:0 0 22px; color:var(--accent); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.proof-head h2 { margin:0; font:500 clamp(40px,6vw,84px)/.95 "Manrope",sans-serif; letter-spacing:-.065em; }
.proof-head h2 span { color:var(--muted); }
.proof-filters { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 22px; }
.proof-filters button { padding:9px 14px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--muted); font:500 12px "DM Sans",sans-serif; cursor:pointer; transition:.25s var(--ease); }
.proof-filters button:hover { color:var(--text); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.proof-filters button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#17120e; }
.proof-filters button:focus-visible,.proof-links a:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.proof-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.proof-card { min-width:0; display:flex; flex-direction:column; padding:22px 22px 20px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); transition:transform .35s var(--ease),border-color .35s var(--ease); }
.proof-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); }
.proof-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.proof-card h3 { margin:18px 0 10px; font:600 20px "Manrope",sans-serif; letter-spacing:-.03em; }
.proof-card p { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.proof-stack { display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 18px; padding:0; list-style:none; }
.proof-stack li { padding:4px 9px; border:1px solid var(--line); border-radius:999px; color:var(--text); font-size:10px; }
.proof-links { display:flex; flex-wrap:wrap; gap:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; }
.proof-links a { color:var(--accent); }
.proof-links a:hover { text-decoration:underline; text-underline-offset:3px; }
.proof-links span { color:var(--muted); }
.project-footer { width:min(100% - 48px,1400px); margin:auto; padding:30px 0 38px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.project-footer a:hover { color:var(--accent); }
.case-study { padding:8vh 4vw 120px; }
.case-hero { min-height:45dvh; display:flex; flex-direction:column; justify-content:center; }
.case-actions { display:flex; gap:12px; margin-top:36px; }
.case-actions a { padding:13px 18px; border:1px solid var(--line); border-radius:999px; font-size:12px; }
.case-actions .primary-link { background:var(--accent); border-color:var(--accent); color:#17120e; }
.case-image { margin:0; padding:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }
.case-image img { display:block; width:100%; height:auto; border-radius:10px; }
.case-facts { display:grid; grid-template-columns:.5fr 1fr 1.25fr; gap:40px; padding:38px 0 70px; border-bottom:1px solid var(--line); }
.case-facts div { display:grid; gap:10px; }
.case-facts span,.case-copy span,.next-project span { color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.case-facts strong { font-size:14px; font-weight:500; line-height:1.5; }
.case-copy { padding:80px 0; }
.case-copy h2 { max-width:900px; margin:18px 0 70px; font:500 clamp(30px,4vw,52px)/1.12 "Manrope",sans-serif; letter-spacing:-.045em; }
.case-notes { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin-left:30%; }
.case-notes p { color:var(--muted); font-size:14px; line-height:1.7; }
.next-project { display:flex; justify-content:space-between; align-items:end; padding:34px 0; border-top:1px solid var(--line); }
.next-project strong { font:500 clamp(28px,4vw,54px) "Manrope",sans-serif; letter-spacing:-.05em; color:var(--accent); }
@media(max-width:700px){.project-nav,main,.project-footer{width:calc(100% - 32px)}.projects-hero{min-height:55dvh;padding:70px 0}.projects-hero h1,.case-hero h1{font-size:clamp(45px,15vw,68px)}.hero-note{margin:28px 0 0}.project-index,.case-study{padding-left:0;padding-right:0}.archive-grid,.proof-grid{grid-template-columns:1fr}.proof{padding-left:0;padding-right:0}.proof-head{padding:40px 0 50px}.archive-featured{grid-column:auto}.case-actions{flex-direction:column;align-items:flex-start}.case-facts{grid-template-columns:1fr;gap:24px}.case-notes{grid-template-columns:1fr;margin-left:0;gap:28px}.next-project{align-items:flex-start;flex-direction:column;gap:16px}.project-footer{gap:20px;flex-direction:column}}
@media(min-width:701px) and (max-width:1040px){.proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}