*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b0b0b;color:#f3f1eb;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}.nav{height:86px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252525;position:sticky;top:0;background:rgba(11,11,11,.94);backdrop-filter:blur(12px);z-index:5}.brand{font-weight:800;letter-spacing:.16em;font-size:20px}.nav nav{display:flex;gap:32px;align-items:center;font-size:14px}.contact-link{border:1px solid #4a4a4a;padding:11px 18px;border-radius:99px}.hero{min-height:calc(100vh - 86px);padding:11vh 5vw 7vh;display:flex;flex-direction:column;justify-content:center}.eyebrow,.section-head span,.cta>span{font-size:12px;letter-spacing:.2em;color:#aaa}.hero h1{font-size:clamp(58px,10vw,150px);line-height:.83;letter-spacing:-.065em;margin:28px 0 38px;max-width:1400px}.hero h1 span{color:#8e8e8e}.hero p{max-width:630px;font-size:clamp(18px,2vw,26px);line-height:1.45;color:#bbb}.actions{display:flex;gap:12px;margin-top:28px}.button{padding:15px 22px;border-radius:99px;font-size:14px}.primary{background:#f3f1eb;color:#0b0b0b}.secondary{border:1px solid #444}.statement{padding:12vh 5vw;border-top:1px solid #252525}.statement p{color:#888;font-size:14px}.statement h2{font-size:clamp(32px,5vw,70px);font-weight:500;letter-spacing:-.04em;line-height:1.05;max-width:1250px}.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #252525;border-bottom:1px solid #252525}.services article{padding:55px 5vw;min-height:330px;border-right:1px solid #252525}.services article:last-child{border-right:0}.services span{color:#777}.services h3{font-size:34px;margin-top:80px;margin-bottom:15px}.services p{color:#999;line-height:1.6;max-width:350px}.work{padding:12vh 5vw}.section-head{display:flex;justify-content:space-between;margin-bottom:45px}.section-head p{margin:0;color:#777}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#171717}.video-frame video{width:100%;height:100%;display:block;object-fit:cover}.video-frame span{position:absolute;left:18px;bottom:16px;color:rgba(255,255,255,.72);letter-spacing:.15em;font-size:11px;text-shadow:0 1px 8px rgba(0,0,0,.65)}.project p{font-size:14px;color:#aaa}.note{color:#666;font-size:12px;margin-top:35px}.cta{padding:15vh 5vw;border-top:1px solid #252525}.cta h2{font-size:clamp(65px,10vw,145px);line-height:.83;letter-spacing:-.065em;margin:35px 0 55px}.cta a{font-size:clamp(20px,2.5vw,34px);border-bottom:1px solid #777;padding-bottom:5px}footer{padding:35px 5vw;border-top:1px solid #252525;display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;color:#777}footer strong{color:#eee;letter-spacing:.15em}footer div{display:flex;gap:22px;justify-content:center}footer span{text-align:right}@media(max-width:760px){
  .nav{height:72px;padding:0 24px}
  .brand{font-size:18px}
  .nav nav{gap:12px}
  .nav nav a:not(.contact-link){display:none}
  .contact-link{padding:10px 17px;font-size:13px}

  .hero{min-height:auto;padding:72px 24px 64px}
  .hero h1{font-size:clamp(50px,15vw,78px);line-height:.88;margin:24px 0 30px}
  .hero p{font-size:19px;line-height:1.5}
  .actions{flex-wrap:wrap;margin-top:24px}

  .statement{padding:64px 24px}
  .statement h2{font-size:38px;line-height:1.08;margin-bottom:0}

  .services,.grid{grid-template-columns:1fr}
  .services article{min-height:0;padding:36px 24px 40px;border-right:0;border-bottom:1px solid #252525}
  .services article:last-child{border-bottom:0}
  .services h3{font-size:30px;margin:28px 0 12px}
  .services p{margin:0;max-width:none;font-size:17px;line-height:1.55}

  .work{padding:68px 24px}
  .section-head{display:block;margin-bottom:26px}
  .section-head p{margin-top:10px}
  .grid{gap:34px}
  .video-frame{aspect-ratio:4/5;border-radius:2px}
  .project p{margin:10px 0 0}

  .cta{padding:82px 24px}
  .cta h2{font-size:clamp(58px,17vw,86px);line-height:.88;margin:28px 0 42px}
  .cta a{font-size:24px}

  footer{grid-template-columns:1fr;gap:20px;padding:30px 24px}
  footer div{justify-content:flex-start}
  footer span{text-align:left}
}


/* Mobile service-to-demo pairing */
.mobile-demo { display: none; }

@media (max-width: 760px) {
  .mobile-demo {
    display: block;
    margin-top: 28px;
  }
  .mobile-demo video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: #151515;
  }
  .mobile-demo small {
    display: block;
    margin-top: 10px;
    color: #8d8d8d;
    font-size: 12px;
    letter-spacing: .04em;
  }

  /* On phones the examples live directly below each service. */
  .work {
    display: none;
  }

  .services article {
    padding-bottom: 34px;
  }
}