:root{
  --bg:#1a0a09;
  --hero-grad1:#2e0909;
  --hero-grad2:#120a06;
  --text:#fbeee1;
  --muted:#c99f8b;
  --accent:#ff6240;
  --card:#291312;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

img{max-width:100%;display:block}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.88}

.fixed-nav{
  position:fixed;
  top:0; left:0; right:0; height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;
  background:linear-gradient(180deg,rgba(30,10,9,.98),rgba(30,10,9,0));
  z-index:10;
  box-shadow:0 2px 10px 0 rgba(46,9,9,.1);
}
.fixed-nav .brand{font-weight:700;letter-spacing:.5px;}
.fixed-nav .logo{height:40px;vertical-align:middle;display:inline-block;}
.fixed-nav .links a{
  margin-left:18px;
  color:var(--muted);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:15px;
}

.hero{
  position:relative;
  min-height:72vh;
  background: radial-gradient(90% 110% at 50% 15%, var(--hero-grad1) 0%, var(--hero-grad2) 100%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:100px 20px 40px;
}
.hero-inner h1{
  font-size:clamp(28px,5vw,56px);
  margin:.2em 0;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.02em;
}
.hero-inner p{
  margin:0 0 1.2em;
  color:var(--muted);
  font-size:1.4rem;
  font-weight:400;
}
.hero-logo{
  height:120px;
  margin-bottom:20px;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.cta{
  display:inline-block;
  border:2px solid var(--accent);
  color:var(--text);
  padding:12px 32px;
  border-radius:8px;
  background:rgba(46,9,9,.3);
  font-size:1.1em;
  font-weight:600;
  margin-top:1em;
  transition:background .2s, color .2s;
}
.cta:hover{
  background:var(--accent);
  color:#fff;
}
.hero-fade{
  position:absolute;inset:auto 0 0 0;height:80px;
  background:linear-gradient(180deg, rgba(26,10,9,0), rgba(26,10,9,1));
}

.section{padding:64px 20px}
.section h2{
  font-size:clamp(22px,3vw,32px);
  margin:0 0 24px;
  font-weight:700;
  color:var(--accent);
  letter-spacing:.01em;
}
.section.narrow{max-width:900px;margin:0 auto}

.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr); /* 2 per row on desktop */
  gap:24px;
}
@media (max-width:900px){
  .grid{grid-template-columns:1fr;}
}

.project-card{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
  transform:translateZ(0);
  box-shadow:0 6px 14px rgba(46,9,9,.16);
  cursor:pointer;
  transition:box-shadow .22s;
}
.project-card:hover{box-shadow:0 10px 30px rgba(255,98,64,0.22);}
.project-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(30,10,9,.68));
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:14px;opacity:0;transition:opacity .25s;
}
.overlay-inner h3{margin:0 0 4px;font-size:18px}
.overlay-inner p{margin:0 0 8px 0;color:var(--muted);font-size:14px;letter-spacing:.5px}
.overlay-inner span{color:var(--accent);font-weight:600;}
.project-card:hover .overlay{opacity:1}

.modal{
  position:fixed;inset:0;
  background:rgba(30,10,9,.96);
  display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:100
}
.modal.hidden{display:none}
.modal-inner{position:relative;width:min(1200px, 92vw);}
.video-wrap{position:relative;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(46,9,9,.28)}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%}
.close{
  position:absolute;right:0;top:-44px;height:36px;width:36px;
  border:none;border-radius:50%;background:rgba(255,255,255,.07);
  color:#fff;font-size:22px;cursor:pointer;
}
.close:hover{background:rgba(255,98,64,.16);}
@media (max-width:640px){
  .close{top:-40px}
  .hero-logo{height:70px}
}