@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f7f6f0;color:#0b0b0b}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.sidebar{position:fixed;inset:0 auto 0 0;width:270px;background:#fff;border-right:1px solid #e5e1d8;padding:42px 28px;z-index:10}
.brand strong{display:block;font-family:'Barlow Condensed';font-size:42px;line-height:.85}
.brand span{display:block;margin-top:10px;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:800}
.sidebar nav{margin-top:70px;display:flex;flex-direction:column;gap:6px}
.sidebar nav a{padding:13px 14px;border-left:3px solid transparent;font-weight:800}
.sidebar nav a:hover{background:#f1f0ea;border-left-color:#8bbf35}

main{margin-left:270px}
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:80px 7vw;background:#fff}
.eyebrow{color:#7aa52f;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:900}
h1,h2{margin:0;font-family:'Barlow Condensed';text-transform:uppercase;letter-spacing:-.01em}
h1{font-size:clamp(70px,10vw,140px);line-height:.8;margin:20px 0}
h2{font-size:clamp(46px,6vw,88px);line-height:.9}
p{font-size:19px;line-height:1.62}
.hero-box{min-height:70vh;border:1px dashed #bbb;display:grid;place-content:center;text-align:center;background:linear-gradient(135deg,#f4f3ee,#e6e4da)}
code{display:inline-block;padding:8px 10px;background:#111;color:#fff;border-radius:4px;font-size:13px}

.project{padding:95px 7vw}
.project.light{background:#fff;color:#111}
.project.dark{background:#050505;color:#fff}
.section-title{max-width:900px;margin-bottom:36px}
.section-title p:last-child{color:#666}
.dark .section-title p:last-child{color:#d0d0d0}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;background:#e8e4da;border:1px solid rgba(0,0,0,.08);cursor:pointer}
.gallery img:nth-child(1),.gallery img:nth-child(8),.gallery img:nth-child(15){grid-column:span 2;grid-row:span 2}
.gallery img:nth-child(5),.gallery img:nth-child(11){grid-column:span 2}

.video-box,.video-grid{margin-top:36px}
.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.video-box video,.video-grid video{width:100%;margin-top:14px;background:#000;min-height:260px}

.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:99;padding:32px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh}
.lightbox button{position:absolute;top:22px;right:30px;background:none;color:white;border:0;font-size:46px;cursor:pointer}

@media(max-width:900px){
  .sidebar{position:relative;width:auto;inset:auto}
  .sidebar nav{margin-top:28px}
  main{margin-left:0}
  .hero{grid-template-columns:1fr;padding:56px 24px}
  .project{padding:70px 24px}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .video-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  h1{font-size:62px}
  .gallery{grid-template-columns:1fr;grid-auto-rows:260px}
  .gallery img:nth-child(n){grid-column:auto;grid-row:auto}
}