:root{
  --orange:#f05100;
  --orange-2:#ff7a2f;
  --bg:#050505;
  --panel:#0c0c0c;
  --panel-2:#121212;
  --text:#f7f7f2;
  --muted:rgba(247,247,242,.64);
  --line:rgba(255,255,255,.10);
  --display:'Anton',sans-serif;
  --body:'IBM Plex Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --wrap:min(1320px,92vw);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--text);
  background:
    linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px),
    var(--bg);
  background-size:48px 48px;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
.wrap{width:var(--wrap);margin:auto}
header{
  position:fixed;inset:0 0 auto;z-index:100;padding:14px 0;
}
header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border:1px solid var(--line);
  border-radius:18px;background:rgba(9,9,9,.72);
  backdrop-filter:blur(18px);box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.logo img{width:145px;height:auto}
nav{display:flex;align-items:center;gap:28px}
nav ul{display:flex;gap:24px}
nav a{
  font:500 .76rem var(--mono);text-transform:uppercase;letter-spacing:.06em;
  position:relative;
}
nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--orange);transition:.25s}
nav a:hover::after,nav a.active::after{width:100%}
.cta{
  padding:13px 20px;border-radius:6px;background:var(--orange);
  font:600 .76rem var(--mono);text-transform:uppercase;letter-spacing:.05em;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
.hero{
  min-height:82vh;display:flex;align-items:flex-end;padding:170px 0 90px;
  position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 82% 18%,rgba(240,81,0,.20),transparent 27%),
    radial-gradient(circle at 10% 85%,rgba(240,81,0,.08),transparent 25%);
}
.hero::before{
  content:"PROJECTS";position:absolute;right:-1vw;top:18vh;
  font-family:var(--display);font-size:clamp(8rem,22vw,22rem);
  line-height:.75;color:rgba(255,255,255,.025);pointer-events:none;
}
.hero-grid{
  position:relative;z-index:2;display:grid;
  grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;
}
.eyebrow{
  display:flex;align-items:center;gap:12px;color:var(--orange);
  font:500 .72rem var(--mono);letter-spacing:.16em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--orange)}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase}
h1{font-size:clamp(5rem,12vw,11rem);line-height:.82;margin-top:22px;max-width:7ch}
.hero-copy p{margin-top:26px;max-width:58ch;color:var(--muted);font-size:1.08rem}
.hero-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hero-stat{
  min-height:150px;padding:22px;border:1px solid var(--line);
  border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  backdrop-filter:blur(14px);
}
.hero-stat strong{display:block;font-family:var(--display);font-size:2.8rem;color:var(--orange)}
.hero-stat span{font:.7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.filters{
  position:sticky;top:94px;z-index:50;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(5,5,5,.86);backdrop-filter:blur(18px);
}
.filter-wrap{display:flex;gap:10px;flex-wrap:wrap;padding:18px 0}
.filter-btn{
  border:1px solid var(--line);background:#0b0b0b;color:var(--text);
  border-radius:999px;padding:11px 17px;font:500 .72rem var(--mono);
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:.25s;
}
.filter-btn:hover,.filter-btn.active{background:var(--orange);border-color:var(--orange)}
.projects-section{padding:100px 0 130px}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.project-card{
  border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:transform .35s,border-color .35s,box-shadow .35s;
}
.project-card:hover{transform:translateY(-10px);border-color:rgba(240,81,0,.55);box-shadow:0 30px 80px rgba(0,0,0,.42)}
.project-card.hidden{display:none}
.project-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#111}
.project-media img{width:100%;height:100%;object-fit:cover;transition:transform .65s,filter .65s;filter:saturate(.78)}
.project-card:hover img{transform:scale(1.055);filter:saturate(1)}
.project-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.68))}
.project-index{
  position:absolute;left:18px;top:18px;padding:8px 10px;border:1px solid rgba(255,255,255,.16);
  border-radius:8px;background:rgba(5,5,5,.62);font:.7rem var(--mono);backdrop-filter:blur(10px)
}
.award-chip{
  position:absolute;right:18px;top:18px;padding:8px 11px;border-radius:999px;
  background:var(--orange);font:600 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em
}
.project-open{
  position:absolute;right:18px;bottom:18px;padding:11px 14px;border:1px solid rgba(255,255,255,.18);
  border-radius:10px;background:rgba(5,5,5,.68);font:.7rem var(--mono);
  text-transform:uppercase;letter-spacing:.06em;opacity:0;transform:translateY(10px);
  transition:.3s;backdrop-filter:blur(10px)
}
.project-card:hover .project-open{opacity:1;transform:none}
.project-info{padding:25px;display:grid;grid-template-columns:1fr auto;gap:12px 20px}
.project-client,.project-category{font:.68rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.project-client{color:var(--orange)}
.project-category{color:var(--muted);text-align:right}
.project-info h2{font-family:var(--body);text-transform:none;font-size:1.65rem;line-height:1.06;margin-top:8px}
.project-info p{grid-column:1/-1;color:var(--muted);font-size:.92rem;max-width:62ch}
.footer-cta{padding:110px 0;text-align:center;border-top:1px solid var(--line);background:radial-gradient(circle at 50% 50%,rgba(240,81,0,.18),transparent 35%)}
.footer-cta h2{font-size:clamp(3rem,7vw,7rem);max-width:12ch;margin:auto;line-height:.9}
.footer-cta a{display:inline-flex;margin-top:30px;padding:15px 24px;background:var(--orange);border-radius:7px;font:600 .76rem var(--mono);text-transform:uppercase}
footer{padding:35px 0;border-top:1px solid var(--line);background:#030303}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font:.72rem var(--mono)}
.reveal{opacity:0;transform:translateY(22px);transition:.65s}
.reveal.in-view{opacity:1;transform:none}
@media(max-width:900px){
  nav ul{display:none}
  .hero-grid{grid-template-columns:1fr}
  .hero-stat-grid{max-width:650px}
  .projects-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .logo img{width:118px}
  .cta{display:none}
  .hero{padding-top:145px}
  .hero-stat-grid{grid-template-columns:1fr 1fr}
  .hero-stat{min-height:120px}
  .project-info{grid-template-columns:1fr}
  .project-category{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .project-card:hover{transform:none}
}