:root{
    --bg:#000000; --panel:#0d0d0d; --panel2:#131313; --line:rgba(255,255,255,.14);
    --ink:#ffffff; --ink-dim:#9a9a9a; --yellow:#e9c13e;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Montserrat',sans-serif;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  section{position:relative;}
  a:focus-visible{outline:2px solid var(--yellow);}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--yellow); color:#000;}

  .mono{font-family:'Space Mono',monospace;}
  .eyebrow{
    font-family:'Space Mono',monospace; font-size:12.5px; letter-spacing:.15em; text-transform:uppercase;
    color:var(--ink-dim); margin-bottom:18px; display:block;
  }
  .eyebrow .dot{color:var(--yellow); display:inline-block; animation:pulseDot 2.4s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}

  header{position:sticky; top:0; z-index:100; background:rgba(0,0,0,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
  nav{display:flex; align-items:center; justify-content:space-between; padding:20px 0;}
  .logo-mark img{height:26px;}
  .nav-links{display:flex; gap:32px; list-style:none;}
  .nav-links a{position:relative; font-size:13.5px; font-weight:500; color:var(--ink-dim); text-transform:uppercase; letter-spacing:.04em; transition:color .25s ease;}
  .nav-links a::after{content:''; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--yellow); transition:width .3s ease;}
  .nav-links a:hover{color:var(--ink);}
  .nav-links a:hover::after{width:100%;}
  .nav-cta{background:var(--yellow); color:#000; font-weight:700; padding:11px 24px; border-radius:100px; font-size:13px; text-transform:uppercase; letter-spacing:.04em; transition:background .25s ease, transform .25s ease, box-shadow .25s ease;}
  .nav-cta:hover{background:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(233,193,62,.25);}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer;}
  .burger span{width:22px; height:2px; background:var(--ink);}
  .mobile-menu{position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px; background:var(--panel); z-index:200; transform:translateX(100%); transition:.4s ease; padding:100px 32px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:24px;}
  body.menu-open .mobile-menu{transform:translateX(0);}
  .mobile-menu a{font-size:19px; font-weight:600; text-transform:uppercase;}

  #intro{
    position:relative; min-height:88vh; display:flex; align-items:center; justify-content:center;
    text-align:center; padding:120px 0 80px; border-bottom:1px solid var(--line); overflow:hidden;
  }
  .hero-video{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
    filter:grayscale(.3) brightness(.68) contrast(1.08);
  }
  .hero-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.5) 65%, #000 100%);}
  .hero-glow{position:absolute; z-index:1; border-radius:50%; filter:blur(90px); pointer-events:none; opacity:.35; background:radial-gradient(circle, var(--yellow) 0%, transparent 70%); animation:floatGlow 12s ease-in-out infinite;}
  .hero-glow.g1{width:420px; height:420px; top:-10%; left:-8%;}
  .hero-glow.g2{width:340px; height:340px; bottom:-12%; right:-6%; animation-delay:-6s;}
  @keyframes floatGlow{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-20px) scale(1.08);}}
  #intro > .wrap{position:relative; z-index:2;}
  .hero-eyebrow{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:26px;}
  .hero-title{font-size:clamp(34px,6vw,72px); font-weight:700; letter-spacing:-.02em; line-height:1.12; max-width:920px; margin:0 auto;}
  .hero-title .accent{color:var(--yellow);}
  .hero-actions{margin-top:42px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
  .btn-solid-yellow{background:var(--yellow); color:#000; font-weight:700; padding:16px 32px; border-radius:100px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; transition:background .25s ease, transform .25s ease, box-shadow .25s ease; display:inline-block;}
  .btn-solid-yellow:hover{background:#fff; transform:translateY(-3px); box-shadow:0 10px 26px rgba(233,193,62,.3);}
  .btn-outline-white{border:1px solid rgba(255,255,255,.35); color:#fff; font-weight:700; padding:16px 32px; border-radius:100px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; transition:border-color .25s ease, background .25s ease, transform .25s ease;}
  .btn-outline-white:hover{border-color:#fff; background:rgba(255,255,255,.06); transform:translateY(-3px);}

  #facts{padding:90px 0; border-bottom:1px solid var(--line); text-align:center;}
  #facts h2{font-size:clamp(24px,3.4vw,38px); font-weight:700; max-width:760px; margin:0 auto 60px; line-height:1.3;}
  .facts-grid{display:grid; grid-template-columns:repeat(3,1fr);}
  .fact{padding:0 24px; border-right:1px solid var(--line);}
  .fact:last-child{border-right:none;}
  .fact .mono{display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:14px;}
  .fact .num{font-size:clamp(30px,4.4vw,54px); font-weight:700; color:var(--yellow);}

  #glimpse{position:relative; height:56vh; min-height:400px; overflow:hidden; border-bottom:1px solid var(--line);}
  #glimpse img{width:100%; height:100%; object-fit:cover; object-position:center 15%; filter:grayscale(1) contrast(1.05) brightness(.65);}
  #glimpse .cap{position:absolute; left:0; right:0; bottom:36px; text-align:center; z-index:2;}
  #glimpse .cap p{font-size:clamp(18px,2.4vw,26px); font-weight:600; color:#fff;}
  #glimpse .cap .eyebrow{justify-content:center; text-align:center; margin-bottom:10px;}

  #about{padding:100px 0; border-bottom:1px solid var(--line);}
  .about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
  .about-grid h2{font-size:clamp(24px,3vw,34px); font-weight:700; line-height:1.3; margin-bottom:4px;}
  .about-copy p{color:var(--ink-dim); font-size:15px; line-height:1.8; margin-top:18px;}
  .process-list{border-top:1px solid var(--line);}
  .process-row{display:grid; grid-template-columns:50px 1fr; gap:20px; padding:24px 0; border-bottom:1px solid var(--line);}
  .process-row .mono{color:var(--yellow); font-size:13px;}
  .process-row h3{font-size:17px; font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em;}
  .process-row p{color:var(--ink-dim); font-size:14px; line-height:1.65;}

  #services{padding:100px 0; border-bottom:1px solid var(--line);}
  #services > .wrap > .reveal{text-align:center; margin-bottom:56px;}
  #services h2{font-size:clamp(24px,3.2vw,36px); font-weight:700; max-width:700px; margin:0 auto; line-height:1.3;}
  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
  .service-card{background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;}
  .service-card:hover{border-color:var(--yellow); transform:translateY(-5px); box-shadow:0 16px 32px rgba(0,0,0,.4);}
  .service-card .thumb{height:170px; overflow:hidden;}
  .service-card .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05) brightness(.8); transition:transform .5s ease, filter .5s ease;}
  .service-card:hover .thumb img{transform:scale(1.07); filter:grayscale(.4) contrast(1.05) brightness(.85);}
  .service-card .body{padding:26px 28px 32px;}
  .service-card h3{font-size:18px; font-weight:700; margin-bottom:12px; text-transform:uppercase; letter-spacing:.01em;}
  .service-card p{color:var(--ink-dim); font-size:14px; line-height:1.7; margin-bottom:18px;}
  .service-tags{display:flex; flex-wrap:wrap; gap:8px;}
  .service-tags span{font-family:'Space Mono',monospace; font-size:11px; color:var(--ink-dim); border:1px solid var(--line); border-radius:100px; padding:5px 12px;}

  #folio{padding:100px 0; border-bottom:1px solid var(--line);}
  #folio > .wrap > .reveal{text-align:center; margin-bottom:56px;}
  #folio h2{font-size:clamp(24px,3.2vw,36px); font-weight:700; max-width:700px; margin:0 auto; line-height:1.3;}
  .folio-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; text-align:left !important;}
  .folio-arrows{display:flex; gap:12px; flex-shrink:0;}
  .arrow-btn{width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .3s ease, background .3s ease, color .3s ease;}
  .arrow-btn svg{width:19px; height:19px;}
  .arrow-btn:hover{border-color:var(--yellow); background:var(--yellow); color:#000;}
  .work-grid{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:4px;}
  .work-grid::-webkit-scrollbar{display:none;}
  .work-grid .work-card{flex:0 0 320px; scroll-snap-align:start;}
  .work-card{background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;}
  .work-card:hover{border-color:var(--yellow); transform:translateY(-5px); box-shadow:0 16px 32px rgba(0,0,0,.4);}
  .work-card .thumb{height:260px; overflow:hidden;}
  .work-card .thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .work-card:hover .thumb img{transform:scale(1.06);}
  .work-card .body{padding:24px 26px;}
  .work-card .mono{color:var(--yellow); font-size:11.5px; letter-spacing:.1em;}
  .work-card h3{font-size:20px; font-weight:700; margin:10px 0 14px; text-transform:uppercase;}
  .work-card .link{font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:8px;}
  .work-card .link .arrow{transition:transform .3s ease;}
  .work-card:hover .link .arrow{transform:translateX(5px);}

  #clients{
    position:relative; padding:110px 0; border-bottom:1px solid var(--line); text-align:center;
    overflow:hidden;
  }
  #clients .clients-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
    filter:grayscale(.5) brightness(.32) contrast(1.05);
  }
  #clients .clients-scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.55) 60%, #000 100%);}
  #clients > .wrap{position:relative; z-index:2;}
  .clients-marquee{
    margin-top:28px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .clients-track{display:inline-flex; gap:20px; animation:clientScroll 26s linear infinite;}
  .clients-marquee:hover .clients-track{animation-play-state:paused;}
  @keyframes clientScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .client-chip{
    background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:6px; padding:20px 34px;
    display:flex; align-items:center; justify-content:center; flex:0 0 auto;
    transition:border-color .3s ease, transform .3s ease, background .3s ease;
  }
  .client-chip:hover{border-color:var(--yellow); transform:translateY(-3px); background:rgba(255,255,255,.08);}
  .client-chip img{height:38px; width:auto; opacity:.85; filter:grayscale(1) brightness(1.6); transition:opacity .3s ease;}
  .client-chip:hover img{opacity:1;}

  #footer{padding:110px 0 0;}
  .contact-head{font-size:clamp(26px,4vw,48px); font-weight:700; letter-spacing:-.02em; max-width:820px; line-height:1.3; text-align:center; margin:0 auto;}
  .contact-head .accent{color:var(--yellow); border-bottom:2px solid var(--yellow);}
  #footer > .wrap > .reveal{text-align:center;}
  .contact-actions{margin-top:34px; display:flex; justify-content:center;}
  .contact-grid{margin-top:80px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-top:1px solid var(--line); padding-top:44px;}
  .contact-block .mono{color:var(--yellow); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; display:block;}
  .contact-block p, .contact-block a{color:var(--ink-dim); font-size:14.5px; line-height:1.85; display:block;}
  .contact-block a:hover{color:var(--ink);}
  .foot-bottom{margin-top:56px; padding:26px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  .foot-bottom .mono{font-size:12px; color:var(--ink-dim);}
  .foot-socials{display:flex; gap:12px;}
  .foot-socials a{width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .foot-socials a:hover{border-color:var(--yellow); color:var(--yellow);}
  .foot-socials svg{width:15px; height:15px; fill:currentColor;}

  .reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media(max-width:900px){
    .facts-grid{grid-template-columns:1fr; gap:30px;} .fact{border-right:none; border-bottom:1px solid var(--line); padding-bottom:24px;}
    .fact:last-child{border-bottom:none;}
    .about-grid{grid-template-columns:1fr; gap:36px;}
    .services-grid{grid-template-columns:1fr 1fr;} .work-grid .work-card{flex:0 0 84vw;}
    .contact-grid{grid-template-columns:1fr; gap:26px;}
  }
  @media(max-width:720px){
    .nav-links,.nav-cta{display:none;} .burger{display:flex;}
    .services-grid{grid-template-columns:1fr;}
  }


  #blog{padding:90px 0; border-bottom:1px solid var(--line); text-align:center;}
  #blog h2{font-size:clamp(22px,3vw,32px); font-weight:700; max-width:640px; margin:0 auto; line-height:1.35;}
