.home-page{position:relative;height:100vh;overflow:hidden}.video-background{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:-1}.video-background iframe{width:100vw;height:100vh;object-fit:cover}.video-overlay{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:#0000004d}.video-overlay h1{font-size:3rem;letter-spacing:2px;margin-bottom:1rem}.video-overlay p{font-size:1.2rem;max-width:80%}.projects-list{display:grid;grid-template-columns:1fr;grid-auto-flow:dense;padding:20px}.project-item{position:relative;cursor:pointer;overflow:hidden;height:100%;grid-column:1}.project-preview-container{position:relative;width:100%;height:100%;aspect-ratio:16 / 9;overflow:hidden}.project-preview{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.project-title-overlay{position:absolute;bottom:0;left:0;right:0;padding:10px 15px;background:#0009;color:#fff;font-size:1rem}.project-item.large{grid-column:2}.project-item:hover .project-preview{transform:scale(1.1)}.masonry-gallery{column-count:3;column-gap:1.5rem;max-width:1200px;margin:0 auto;padding:2rem 1rem}.masonry-item{break-inside:avoid;margin-bottom:1.5rem;border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .3s ease}.masonry-item img{width:100%;height:auto;display:block;border-radius:8px;object-fit:cover;filter:brightness(.85);transition:transform .3s ease,filter .3s ease;transition:opacity .3s ease;opacity:0}.masonry-item img[src]{opacity:1}.masonry-item:hover img{transform:scale(1.02);filter:brightness(1)}@media (max-width: 1024px){.masonry-gallery{column-count:2}}@media (max-width: 600px){.masonry-gallery{column-count:1}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease-out}.modal-content{position:relative;max-width:90vw;max-height:90vh;overflow:hidden;border-radius:12px;box-shadow:0 0 40px #0009}.modal-content img{width:auto;max-width:100%;max-height:90vh;height:auto;display:block;object-fit:contain;border-radius:12px}.nav-button{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;color:#fff;background:#0000004d;border:none;padding:.5rem 1rem;cursor:pointer;z-index:10;transition:background .2s ease}.nav-button:hover{background:#ffffff1a}.nav-button.prev{left:10px}.nav-button.next{right:10px}.modal-counter{position:absolute;bottom:20px;right:20px;color:#ccc;font-size:1rem;font-family:sans-serif;background:#0006;padding:.3rem .7rem;border-radius:8px;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.about-page{background:#000;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}.about-title{font-size:5rem;font-weight:700;text-transform:uppercase;position:relative;color:#fff;animation:pulse 8s infinite;letter-spacing:8px}.about-subtitle{margin-top:1rem;font-size:1.5rem;color:#ccc}@keyframes pulse{0%{opacity:1;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #fff}50%{opacity:.1;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #fff}to{opacity:1;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 40px #fff}}.about-text{max-width:600px;margin-top:2rem;line-height:1.6;font-size:1.1rem;color:#aaa;text-align:center}.contact-page{padding:120px 1.5rem 2rem;max-width:600px;margin:0 auto;color:#fff;text-align:center}.contact-page h2{font-size:2.5rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px}.contact-text{font-size:1.2rem;color:#ccc;margin-bottom:2rem}.contact-links{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.contact-links a{color:#eee;text-decoration:none;font-size:1.3rem;display:flex;align-items:center;gap:.8rem;transition:color .2s ease}.contact-links a:hover{color:#fff}.icon{width:24px;height:24px;fill:currentColor}body{margin:0;font-family:Anton,sans-serif;background-color:#000;color:#fff;padding:0;width:100%;overflow-x:hidden}a{color:inherit;text-decoration:none}html,body,#root{height:100%;margin:0;display:flex;flex-direction:column}#root{flex:1}main{flex:1}html{scroll-behavior:smooth}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 2rem;background-color:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;position:sticky;top:0;z-index:1000}.logo a{font-size:1.5rem;font-weight:700;color:#fff;text-decoration:none}.desktop-nav{display:flex;gap:1.5rem}.desktop-nav a{color:#ccc;text-decoration:none;font-weight:500;transition:color .2s}.desktop-nav a:hover{color:red}.menu-toggle{display:none;background:none;border:none;color:#fff;font-size:1.8rem;cursor:pointer}.mobile-nav{position:absolute;top:70px;left:0;right:0;background-color:#111;display:flex;flex-direction:column;gap:1.5rem;padding:2rem;text-align:center}.mobile-nav a{color:#fff;text-decoration:none;font-size:1.2rem}@media (max-width: 768px){.desktop-nav{display:none}.menu-toggle{display:block}}.nav-link{color:#ccc;text-decoration:none;font-weight:500;position:relative;padding-bottom:4px;transition:color .2s}.nav-link:hover{color:#fff}.nav-link:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:#fff;transition:width .3s ease}.nav-link.active:hover:after{background-color:red}.nav-link.active{color:#fff}.nav-link.active:after{width:100%}@media only screen and (max-width: 1068px){.nav-link.active:after{width:15%;left:50%;transform:translate(-50%)}}@media only screen and (max-width: 735px){.nav-link.active:after{width:40%}}.projects-dropdown{position:relative;margin-left:1rem}.dropdown-toggle{background:none;border:none;color:#ccc;font-weight:500;cursor:pointer;font-size:1rem;padding:.2rem .5rem}.dropdown-menu{position:absolute;top:130%;right:0;background:#222;border:1px solid #444;border-radius:6px;min-width:180px;z-index:1000;display:flex;flex-direction:column;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.projects-parent{position:relative}.dropdown-menu{position:absolute;top:120%;left:0;background:#222;border:1px solid #444;border-radius:6px;min-width:180px;z-index:1000;display:flex;flex-direction:column;animation:fadeIn .2s ease-out}.dropdown-item{padding:.7rem 1rem;cursor:pointer;color:#ccc;transition:background .2s ease}.projects-wrapper{position:relative}.dropdown-menu{position:absolute;top:100%;left:0;background:#222;border:1px solid #444;border-radius:6px;min-width:180px;display:none;flex-direction:column;z-index:1000}.dropdown-menu.visible{display:flex;animation:dropdownFadeIn .75s ease-out both}.dropdown-item{padding:.7rem 1rem;cursor:pointer;color:#ccc}.dropdown-item:hover{background:#333;color:#fff}.mobile-dropdown{display:flex;flex-direction:column;margin-bottom:.5rem;align-items:center}.mobile-dropdown .dropdown-item{background:none;border:none;color:#ccc;text-align:center;width:100%;padding:.5rem 1rem;font-size:.95rem;cursor:pointer;transition:color .2s ease;animation:mobileDropdownFade .3s ease both}.mobile-dropdown .dropdown-item:hover{color:#fff}@keyframes mobileDropdownFade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes dropdownFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dropdown-menu.visible .dropdown-item{opacity:0;transform:translateY(10px);animation:dropdownItemFade .3s ease-out forwards}.dropdown-menu.visible .dropdown-item:nth-child(1){animation-delay:.1s}.dropdown-menu.visible .dropdown-item:nth-child(2){animation-delay:.15s}.dropdown-menu.visible .dropdown-item:nth-child(3){animation-delay:.2s}@keyframes dropdownItemFade{to{opacity:1;transform:translateY(0)}}.site-footer{background-color:#111;color:#aaa;padding:1rem 2rem;font-size:.75rem;border-top:1px solid #222}.footer-bottom{display:flex;justify-content:space-between;align-items:center;max-width:1200px;width:100%;margin:0 auto;flex-wrap:wrap;gap:.5rem}.project-detail{color:#fff;background:#000;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;text-align:center}.project-detail h1{font-size:2.5rem;margin:1rem 0;text-transform:uppercase;letter-spacing:2px}.project-detail p{max-width:600px;line-height:1.6;color:#ccc;margin-bottom:2rem}.project-detail button{margin-top:2rem;padding:.6rem 1.4rem;background:transparent;border:1px solid white;color:#fff;cursor:pointer;font-size:.9rem;border-radius:4px;transition:background .2s ease}.project-detail button:hover{background:#ffffff1a}.hero-section.horizontal{position:relative;width:100%;padding-top:56.25%;overflow:hidden;margin-bottom:2rem}.hero-section.horizontal .hero-video{position:absolute;top:0;left:0;width:100%;height:100%}.hero-video iframe{width:100%;height:100%;border:none;object-fit:cover}.hero-section.vertical{display:flex;align-items:stretch;gap:1rem;margin-bottom:2rem;width:100%;max-width:1200px;height:100vh}.hero-section.vertical .hero-video{flex:1;height:100%;overflow:hidden;border-radius:8px;display:flex;justify-content:center;align-items:center}.hero-section.vertical .hero-video iframe{width:auto;height:100%;aspect-ratio:9 / 16;border-radius:8px;border:none;object-fit:cover}.hero-section.vertical .hero-side-image{flex:1;height:100%;overflow:hidden;border-radius:8px}.hero-side-image img{width:100%;height:100%;object-fit:cover;border-radius:8px}.gallery{column-count:3;column-gap:0;width:100%;max-width:1200px;padding:0;margin:0}.gallery img{width:100%;display:block;margin:0;break-inside:avoid;cursor:pointer;transition:transform .2s ease;border-radius:4px}.gallery img:hover{transform:scale(1.02)}.gallery-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000f2;display:flex;justify-content:center;align-items:center;z-index:9999;cursor:zoom-out}.gallery-modal img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px}@media (max-width: 1024px){.gallery{column-count:2}.hero-section.vertical{flex-direction:column;height:auto}.hero-section.vertical .hero-side-image,.hero-section.vertical .hero-video{height:50vh}}@media (max-width: 600px){.gallery{column-count:1}.project-detail h1{font-size:1.8rem}}.video-controls{display:flex;flex-direction:row;position:relative;justify-content:center;gap:1rem;z-index:2}.hero-video iframe{z-index:1;position:relative;pointer-events:auto}.video-controls button{margin:0 .5rem;padding:.5rem 1rem}
