:root{
    --space:#0b1024;        /* deep space navy */
    --panel:#121a38;
    --violet:#7c5cff;
    --cyan:#4fd8ff;
    --ink:#e9edff;
    --mist:#93a0c9;
    --line:rgba(147,160,201,.18);
    --glass:rgba(255,255,255,.055);
    --glass-line:rgba(255,255,255,.14);
    --maxw:1100px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--space);
    color:var(--ink);
    font-family:"Archivo",system-ui,sans-serif;
    font-size:17px;line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:"Space Grotesk",sans-serif;font-weight:600;line-height:1.1;letter-spacing:-.01em}
  a{color:var(--cyan)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .grad-text{
    background:linear-gradient(92deg,var(--violet),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }

  /* ---------- header ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(11,16,36,.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink);text-decoration:none}
  .brand b{background:linear-gradient(92deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
  nav ul{display:flex;gap:26px;list-style:none}
  nav a{color:var(--mist);text-decoration:none;font-size:.94rem}
  nav a:hover{color:var(--ink)}
  .menu-btn{display:none;background:none;border:1px solid var(--glass-line);color:var(--ink);padding:6px 12px;border-radius:8px;font:inherit}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:96vh;
    display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;
    isolation:isolate;
  }
  /* Blurred backdrop.
     To use a real render: uncomment the <img> in .hero-bg below and set its src.
     The blur is intentionally moderate — tune with --hero-blur. */
  .hero{--hero-blur:14px}
  .hero-bg{position:absolute;inset:-40px;z-index:-2}
  .hero-bg img{
    width:100%;height:100%;object-fit:cover;
    filter:blur(var(--hero-blur)) brightness(.62) saturate(1.15);
    transform:scale(1.06);
  }
  .hero-bg .aurora{
    position:absolute;inset:0;
    background:
      radial-gradient(720px 480px at 18% 22%, rgba(124,92,255,.42), transparent 62%),
      radial-gradient(820px 560px at 82% 30%, rgba(79,216,255,.30), transparent 64%),
      radial-gradient(700px 520px at 55% 95%, rgba(124,92,255,.22), transparent 60%),
      var(--space);
    filter:blur(var(--hero-blur));
    transform:scale(1.06);
  }
  .hero-veil{position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg, rgba(11,16,36,.55) 0%, rgba(11,16,36,.18) 45%, rgba(11,16,36,.72) 100%);
  }
  .hero-copy{padding-top:9vh}
  .hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);max-width:16ch}
  .hero .role{
    font-family:"Space Grotesk",sans-serif;font-size:clamp(1.05rem,2.2vw,1.4rem);
    margin-top:16px;color:var(--ink);
  }
  .hero p.lede{color:#c3cbe9;max-width:56ch;margin-top:18px;text-shadow:0 1px 12px rgba(11,16,36,.6)}
  .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
  .btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.97rem;padding:13px 26px;border-radius:10px}
  .btn-solid{background:linear-gradient(92deg,var(--violet),var(--cyan));color:#070b1c}
  .btn-solid:hover{filter:brightness(1.12)}
  .btn-ghost{color:var(--ink);border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(8px)}
  .btn-ghost:hover{border-color:var(--cyan)}

  /* ---------- hero thumbnail drift ---------- */
  .drift{
    margin-top:7vh;padding:26px 0 40px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .drift-track{
    display:flex;gap:22px;width:max-content;
    animation:drift 48s linear infinite;
  }
  .drift:hover .drift-track{animation-play-state:paused}
  @keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .thumb{
    flex:0 0 auto;width:230px;aspect-ratio:16/10;border-radius:14px;
    border:1px solid var(--glass-line);
    background:linear-gradient(150deg,rgba(124,92,255,.16),rgba(79,216,255,.07)),var(--glass);
    backdrop-filter:blur(6px);
    box-shadow:0 18px 40px rgba(4,7,20,.45);
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--mist);font-size:.8rem;padding:12px;
    overflow:hidden;
  }
  .thumb img{width:100%;height:100%;object-fit:cover;border-radius:13px}
  .thumb strong{color:var(--ink);display:block;font-weight:600;margin-bottom:2px}
  /* staggered heights, repeating every 8 */
  .drift-track .thumb:nth-child(8n+1){transform:translateY(-26px)}
  .drift-track .thumb:nth-child(8n+2){transform:translateY(22px)}
  .drift-track .thumb:nth-child(8n+3){transform:translateY(-8px)}
  .drift-track .thumb:nth-child(8n+4){transform:translateY(34px)}
  .drift-track .thumb:nth-child(8n+5){transform:translateY(-30px)}
  .drift-track .thumb:nth-child(8n+6){transform:translateY(10px)}
  .drift-track .thumb:nth-child(8n+7){transform:translateY(-14px)}
  .drift-track .thumb:nth-child(8n+8){transform:translateY(26px)}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .drift-track{animation:none}
  }

  /* ---------- sections ---------- */
  section{padding:100px 0}
  .section-head{max-width:62ch;margin-bottom:48px}
  .section-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem)}
  .section-head p{color:var(--mist);margin-top:12px}

  /* ---------- case studies ---------- */
  .case{
    display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;
    padding:44px 0;border-top:1px solid var(--line);
  }
  .case:last-of-type{border-bottom:1px solid var(--line)}
  .case:nth-of-type(even){grid-template-columns:.85fr 1.15fr}
  .case:nth-of-type(even) .case-media{order:2}
  .case h3{font-size:1.5rem;margin-bottom:12px}
  .case p{color:var(--mist)}
  .case .fact{
    color:var(--ink);font-size:.92rem;margin-top:16px;padding-left:14px;
    border-left:3px solid;border-image:linear-gradient(180deg,var(--violet),var(--cyan)) 1;
  }
  .pull{font-family:"Space Grotesk",sans-serif;font-size:1.1rem;margin-top:18px;color:#c9d2f2}

  /* placeholder frames — swap for real renders */
  .ph{
    position:relative;overflow:hidden;
    aspect-ratio:16/9;border-radius:14px;
    border:1.5px dashed rgba(79,216,255,.4);
    background:linear-gradient(150deg,rgba(124,92,255,.12),rgba(79,216,255,.05)),var(--glass);
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--mist);font-size:.88rem;padding:16px;
  }
  .ph strong{color:var(--ink);display:block;margin-bottom:4px;font-weight:600}

  /* ---------- galleries ---------- */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .grid .ph{aspect-ratio:4/3}
  .gallery-note{color:var(--mist);font-size:.9rem;margin-top:18px;max-width:62ch}

  /* ---------- about: holo drafting grid ---------- */
  .about{
    background:
      repeating-linear-gradient(0deg, transparent 0 43px, rgba(79,216,255,.10) 43px 44px),
      repeating-linear-gradient(90deg, transparent 0 43px, rgba(79,216,255,.10) 43px 44px),
      linear-gradient(160deg,#101736,#0c1128);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .about .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:56px}
  .about h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin-bottom:20px}
  .about p{color:#c3cbe9;margin-bottom:16px;max-width:58ch}
  .toolkit{
    border:1px solid var(--glass-line);border-radius:14px;padding:28px;
    background:var(--glass);backdrop-filter:blur(8px);align-self:start;
  }
  .toolkit h3{font-size:1.15rem;margin-bottom:16px}
  .toolkit ul{list-style:none}
  .toolkit li{
    padding:10px 0;border-bottom:1px solid var(--line);
    color:#c3cbe9;font-size:.95rem;display:flex;justify-content:space-between;gap:12px;
  }
  .toolkit li:last-child{border-bottom:none}
  .toolkit li em{font-style:normal;color:var(--cyan);font-size:.88rem;text-align:right}

  /* ---------- testimonials ---------- */
  .quotes .grid{grid-template-columns:repeat(3,1fr)}
  .quote-card{
    border:1px solid var(--glass-line);border-radius:14px;padding:26px;
    background:var(--glass);color:var(--mist);font-size:.95rem;
  }
  .quote-card .who{margin-top:14px;font-size:.88rem;color:var(--cyan)}

  /* ---------- contact ---------- */
  .contact{text-align:center;padding-bottom:80px;position:relative;overflow:hidden}
  .contact::before{
    content:"";position:absolute;inset:auto 0 -220px 0;height:420px;z-index:-1;
    background:radial-gradient(560px 300px at 50% 100%, rgba(124,92,255,.28), transparent 70%);
  }
  .contact h2{font-size:clamp(1.8rem,4vw,2.6rem)}
  .contact p{color:var(--mist);max-width:48ch;margin:16px auto 0}
  .contact .links{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  footer{border-top:1px solid var(--line);padding:28px 0;color:var(--mist);font-size:.85rem;text-align:center}

  /* ---------- responsive ---------- */
  @media (max-width:860px){
    nav ul{display:none}
    nav ul.open{display:flex;flex-direction:column;position:absolute;top:64px;right:0;left:0;background:#0a0e22;padding:20px 24px;gap:16px;border-bottom:1px solid var(--line)}
    .menu-btn{display:block}
    .case,.case:nth-of-type(even){grid-template-columns:1fr}
    .case:nth-of-type(even) .case-media{order:0}
    .about .wrap{grid-template-columns:1fr}
    .grid,.quotes .grid{grid-template-columns:1fr 1fr}
    .thumb{width:180px}
  }
  @media (max-width:560px){
    .grid,.quotes .grid{grid-template-columns:1fr}
    .thumb{width:150px}
    .hero-copy{padding-top:12vh}
  }

/* ================= projects archive page ================= */
.archive-hero{padding:120px 0 40px}
.archive-hero h1{font-size:clamp(2rem,5vw,3.2rem)}
.archive-hero p{color:var(--mist);max-width:58ch;margin-top:14px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 8px}
.filter-btn{
  font:inherit;font-size:.9rem;font-weight:500;color:var(--mist);
  background:var(--glass);border:1px solid var(--glass-line);
  padding:8px 18px;border-radius:999px;cursor:pointer;
}
.filter-btn:hover{color:var(--ink)}
.filter-btn.active{
  color:#070b1c;border-color:transparent;
  background:linear-gradient(92deg,var(--violet),var(--cyan));
}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:32px 0 90px}
.proj-card{
  border:1px solid var(--glass-line);border-radius:14px;overflow:hidden;
  background:var(--panel);cursor:pointer;text-align:left;font:inherit;color:inherit;
  padding:0;display:flex;flex-direction:column;
}
.proj-card:hover{border-color:var(--cyan)}
.proj-cover{
  aspect-ratio:16/10;position:relative;
  background:linear-gradient(150deg,rgba(124,92,255,.22),rgba(79,216,255,.08)),var(--glass);
  display:flex;align-items:center;justify-content:center;
  color:var(--mist);font-size:.82rem;text-align:center;padding:12px;
}
.proj-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj-meta{padding:16px 18px 18px}
.proj-meta h3{font-size:1.02rem;line-height:1.3}
.proj-meta .when{color:var(--cyan);font-size:.82rem;margin-top:4px}
.proj-meta .tags{color:var(--mist);font-size:.82rem;margin-top:8px}
.proj-empty{color:var(--mist);padding:40px 0 90px}

/* modal */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  background:rgba(7,10,24,.8);backdrop-filter:blur(8px);
  overflow-y:auto;padding:5vh 20px;
}
.modal.open{display:block}
.modal-panel{
  max-width:900px;margin:0 auto;background:var(--panel);
  border:1px solid var(--glass-line);border-radius:16px;padding:34px;
  position:relative;
}
.modal-close{
  position:sticky;top:0;float:right;margin:-10px -10px 0 0;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);
  width:40px;height:40px;border-radius:10px;font-size:1.1rem;cursor:pointer;
}
.modal-panel h2{font-size:1.6rem;margin-bottom:6px;max-width:22ch}
.modal-panel .when{color:var(--cyan);font-size:.9rem}
.modal-panel .desc{color:var(--mist);margin-top:16px;max-width:64ch}
.modal-imgs{display:grid;gap:16px;margin-top:26px}
.modal-imgs img{border-radius:10px;width:100%}
.modal-imgs .ph{aspect-ratio:16/9}

@media (max-width:860px){
  .proj-grid{grid-template-columns:1fr 1fr}
  .modal-panel{padding:24px}
}
@media (max-width:560px){
  .proj-grid{grid-template-columns:1fr}
}

/* auto-image slots: real file covers the placeholder when present */
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.thumb{position:relative}
.thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:13px;z-index:1}

/* animation media */
.proj-cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.modal-imgs video{border-radius:10px;width:100%;display:block}
.anim-grid .ph{aspect-ratio:16/9}