:root{
  --bg: #0b0b0c;
  --fg: #e7e7ea;
  --muted: #9ea0a6;
  --accent: #7cffc0;
  --accent-2: #6aa8ff;
  --card: #111214;
  --stroke: #2a2c31;
  --radius: 22px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
.light{
  --bg:#fafafa;--fg:#111214;--muted:#4b4f57;--card:#ffffff;--stroke:#e6e6eb;--shadow:0 10px 30px rgba(0,0,0,.15)
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.35; overflow-x:hidden;
}

#bgCanvas, #bgCanvas2 { pointer-events: none; }

#bg{
  position:fixed; inset:0; z-index:-2; display:block;
  background: radial-gradient(60vw 60vw at 10% 10%, rgba(124,255,192,.04), transparent 60%),
              radial-gradient(50vw 50vw at 90% 0%, rgba(106,168,255,.04), transparent 60%);
}

.grain:after{
  content:""; position:fixed; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.25; z-index:-1;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.18"/></svg>');
  background-size:300px 300px; animation:drift 22s linear infinite;
}
@keyframes drift { from{transform:translateX(0)} to{transform:translateX(-300px)} }

.wrap{max-width:1200px; margin:0 auto; padding:24px}

header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0 6px}
.logo{display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--fg)}
.mark{
  width:42px; height:42px; border-radius:12px;
  background:conic-gradient(from 180deg at 50% 50%, var(--accent), transparent 25%, var(--accent-2));
  box-shadow: var(--shadow); position:relative; overflow:hidden;
}
.mark:before{content:""; position:absolute; inset:6px; border:2px solid var(--bg); border-radius:10px; opacity:.65}
.wordmark{font-weight:700; letter-spacing:.02em; font-size:1.1rem}
nav a{color:var(--muted); text-decoration:none; margin:0 12px; font-weight:600; position:relative}
nav a:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); transform:scaleX(0); transform-origin:left; transition:.25s}
nav a:hover, nav a.active{color:var(--fg)}
nav a:hover:after, nav a.active:after{transform:scaleX(1)}
.toggle{border:1px solid var(--stroke); background:transparent; color:var(--fg); border-radius:999px; padding:10px 14px; cursor:pointer}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:end; padding:36px 0 14px}
.title{font-size:clamp(42px, 7vw, 92px); line-height:0.95; letter-spacing:-.02em; margin:0}
.subtitle{margin:12px 0 0; color:var(--muted); max-width:52ch}

.caps{font-size:.8rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}

.grid{display:grid; gap:18px}
.cols-3{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width:900px){ .hero{grid-template-columns:1fr} .cols-3{grid-template-columns:1fr} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border:1px solid var(--stroke); border-radius:var(--radius); padding:20px; transition:.25s; position:relative; overflow:hidden;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(124,255,192,.4)}
.card .tag{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:rgba(255,255,255,.02)}
.card h3{margin:12px 0 8px; font-size:1.4rem}
.card p{margin:0; color:var(--muted)}
.card .cta{margin-top:14px; display:inline-block; font-weight:700; text-decoration:none; color:var(--fg)}
.card .cta span{background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}

.section{padding:38px 0}
.divider{height:1px; background:linear-gradient(90deg, transparent, var(--stroke), transparent); margin:28px 0}

.services{border-radius:var(--radius); border:1px dashed var(--stroke); padding:22px; text-align:center; position:relative}
.services:before{
  content:""; position:absolute; inset:-2px; border-radius:calc(var(--radius) + 2px); border:2px solid transparent;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.18;
}

.pillars .card svg{width:42px; height:42px}
.list{margin:8px 0 0; padding:0; list-style:none}
.list li{padding:8px 0; border-bottom:1px dashed var(--stroke)}
.list li:last-child{border-bottom:none}

footer{padding:48px 0 60px; text-align:center}
.tagline{
  font-size:clamp(22px, 3.5vw, 42px); letter-spacing:.02em; font-weight:700; margin:10px 0 0;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;
}

.sigils{position:fixed; right:20px; top:20px; display:flex; flex-direction:column; gap:14px; opacity:.6}
.sigil{width:56px; height:56px; border-radius:12px; border:1px solid var(--stroke); display:grid; place-items:center; backdrop-filter:blur(4px); background:rgba(255,255,255,.02)}
.sigil svg{width:32px; height:32px}

.reveal{opacity:0; transform:translateY(12px); transition: .6s ease}
.reveal.on{opacity:1; transform:none}


/* Works Grid */
.works-grid img {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  margin-bottom: 12px;
  transition: transform .4s ease;
}
.works-grid img:hover {
  transform: scale(1.03);
}
.work-card h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}
.work-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.work-card a.work-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-card a.work-link:hover {
  color: var(--accent);
}

/* Modal styles */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  padding-top: 60px;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: var(--radius);
}

#modalCaption {
  margin: 20px auto;
  text-align: center;
  color: var(--fg);
  font-size: 1rem;
  max-width: 80%;
}

.close {
  position: absolute;
  top: 20px; right: 40px;
  color: var(--fg);
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: var(--accent);
}


/* Prev/Next navigation in modal */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: var(--fg);
  font-weight: bold;
  font-size: 32px;
  user-select: none;
  transition: 0.3s;
}
.next { right: 20px; }
.prev { left: 20px; }
.prev:hover, .next:hover { color: var(--accent); }


/* Background canvas (starfield) */
#bgCanvas{
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
}


/* ===== Fixed header + mobile menu ===== */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  border-bottom: 1px solid var(--stroke);
  padding: 12px 24px;
}
.wrap { padding: 88px 24px 24px; } /* space for fixed header on desktop */

/* header layout tweaks */
.header-actions { display:flex; align-items:center; gap:10px; }
.hamburger{
  display:none; /* shown on mobile */
  width:42px; height:38px; border-radius:12px;
  border:1px solid var(--stroke); background:transparent; cursor:pointer;
  position:relative; padding:0; align-items:center; justify-content:center;
}
.hamburger span{
  display:block; width:20px; height:2px; background:var(--fg); margin:4px auto; transition:.25s;
}
.hamburger.open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* Nav default (desktop) */
nav#siteNav a { margin: 0 12px; }
@media (max-width: 900px){
  .wrap { padding: 76px 16px 20px; }
  nav#siteNav{
    position: fixed;
    top: 60px; right: 16px; left: 16px;
    background: color-mix(in oklab, var(--bg) 92%, transparent);
    border: 1px solid var(--stroke);
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    gap: 6px;
  }
  nav#siteNav.open { display: flex; }
  nav#siteNav a{
    padding: 12px 10px;
    margin: 0;
    border-radius: 12px;
  }
  nav#siteNav a:hover{ background: rgba(255,255,255,.04); }
  .hamburger{ display:flex; }
}


/* Contact section */
.contact{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 24px;
  align-items: start;
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}
.contact-left h3{ margin:0 0 6px; font-size:1.6rem; }
.contact-left p{ margin:0 0 10px; color:var(--muted); }
.email-link{ display:inline-block; margin-top:6px; font-weight:700; text-decoration:none; color:var(--fg); }

.socials{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.socials a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--stroke); border-radius:14px; text-decoration:none; color:var(--fg); }
.socials a:hover{ border-color: rgba(124,255,192,.5); box-shadow: var(--shadow); }
.socials svg{ flex:0 0 24px; }
.socials span{ font-weight:600; }

@media (max-width:900px){
  .contact{ grid-template-columns:1fr; }
  .socials{ grid-template-columns:1fr 1fr; }
}

/* Footer */
.site-footer{
  border-top:1px solid var(--stroke);
  padding: 22px 0 36px;
  margin-top: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.footer-inner{
  max-width:1200px; margin:0 auto; padding: 0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:var(--muted);
}
.footer-inner .brand{ font-weight:700; color:var(--fg); }
.footer-inner .to-top{ color:var(--fg); text-decoration:none; border:1px solid var(--stroke); padding:8px 12px; border-radius:999px; }
.footer-inner .to-top:hover{ border-color: rgba(124,255,192,.5); }


/* ==== Alignment fixes (header & body share gutters) ==== */
.wrap{ max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
header{ margin-left:0; margin-right:0; } /* header is inside .wrap, so it inherits gutters */
.header-actions{ margin-right:0; } /* keep right edge aligned with body */

/* Optional: ensure logo text baseline looks tight */
.wordmark{ line-height:1; display:inline-block; transform: translateY(0); }

/* ==== Works grid: 2 per line on mobile ==== */
@media (max-width: 900px){
  .works-grid.cols-3{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .works-grid{ gap: 14px; }
}

/* Background video */
#bgVideo {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* ==== Video Area ==== */
.video-area {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}

.video-area video {
  display: block;
  width: 100%;
  height: auto;
}

/* ==== Video Embed ==== */
.video-embed {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}

/* === Header alignment fixes === */
header {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}
.header-actions { margin-right: 0; }
.logo, nav#siteNav, .header-actions { flex-shrink: 0; }

/* === Works grid: 2 columns on mobile === */
@media (max-width: 900px) {
  .works-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .works-grid { gap: 14px; }
}

/* Ensure project cards stack on mobile */
@media (max-width: 900px) {
  .grid[style*="grid-template-columns:1.1fr"] {
    grid-template-columns: 1fr !important;
  }
}