:root{
  --blue: #5BC0FF;
  --black: #0A0A0A;
  --white: #FFFFFF;
  --max-width: 1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif;margin:0;background:var(--black);color:var(--white);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh}
.nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:rgba(10,10,10,0.3);backdrop-filter:blur(4px);z-index:100;transition:background .3s ease,backdrop-filter .3s ease}
.nav.scrolled{background:rgba(17, 17, 17, 0.8);backdrop-filter:blur(12px)}
.nav__brand{font-weight:700;color:var(--white);font-size:1.1rem}
.nav__links{display:flex;gap:24px}
.nav__links a{color:rgba(255,255,255,0.85);text-decoration:none}
.nav__cta{background:var(--blue);color:var(--black);padding:10px 22px;border-radius:26px;font-weight:600;border:none;cursor:pointer;font-size:1rem}
.nav__cta--mobile{display:none}
.nav__burger{display:none;background:none;border:0;color:var(--white);font-size:1.25rem}

#main-content{flex:1}

.main{max-width:var(--max-width);margin:36px auto;padding:0 20px}

.category-view > .main{display:flex;flex-direction:column;flex:1;width:100%;max-width:100%;margin:0;padding:0}
.hero{padding:48px 0;text-align:center}
.hero h1{font-size:2.25rem;margin-bottom:8px;color:var(--white)}
.hero p{color:rgba(255,255,255,0.85);max-width:900px;margin:0 auto}

.gallery{margin-top:0;padding:0;width:100%;display:flex;flex-direction:column;flex:1}
.gallery h2{display:none}
.gallery__list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;padding:40px 20px;list-style:none;width:100%;margin:0;flex:1;grid-auto-rows:minmax(180px, calc((100vh - 220px) / 5))}
.gallery__list li{aspect-ratio:auto;overflow:hidden;border-radius:12px}
.gallery__list img{width:100%;height:100%;object-fit:cover;cursor:pointer;border:none;transition:transform .2s ease;display:block}
.gallery__list img:hover{transform:scale(1.03)}

/* Lazy image wrapper + spinner (ensures images fill the grid cell) */
.img-wrap{position:relative;overflow:hidden;display:block;width:100%;height:100%}
.img-wrap img{display:block;width:100%;height:100%;object-fit:cover}
.img-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);border-top-color:var(--blue);animation:spin 1s linear infinite;opacity:0.95}
.img-wrap .img-spinner.hidden{display:none}
.lazy-img{filter:blur(24px);transform:scale(1.02);opacity:0;transition:filter .6s ease,transform .6s ease,opacity .4s ease}
.lazy-img.loaded{filter:none;transform:none;opacity:1}


/* thumbnail label overlay with blurred background */
.thumb-link{position:relative;display:block;width:100%;height:100%;overflow:hidden}
.thumb-label{position:absolute;left:12px;bottom:12px;padding:8px 12px;border-radius:4px;color:var(--white);font-weight:700;font-size:0.9rem;background:rgba(0,0,0,0.5);backdrop-filter:blur(8px)}

.contact__form{display:grid;gap:12px;max-width:900px;width:90%;margin:0 auto}
.contact__form label{display:flex;flex-direction:column;color:rgba(255,255,255,0.9);font-weight:600}
.contact__form input,.contact__form textarea{margin-top:6px;padding:12px;border-radius:6px;border:1px solid rgba(255,255,255,0.08);background:transparent;color:var(--white);font-size:1rem}
.contact__form button{margin-top:12px;padding:14px 24px;background:var(--blue);color:var(--black);border:0;border-radius:6px;font-weight:700;cursor:pointer;font-size:1.05rem;width:100%;transition:opacity .2s}
.contact__form button:hover{opacity:0.9}

/* Contact Modal */
.contact-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .3s ease;z-index:300}
.contact-modal[aria-hidden="false"]{visibility:visible;opacity:1}
.contact-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)}
.contact-modal__box{position:relative;background:linear-gradient(135deg, rgba(91,192,255,0.08), rgba(10,10,10,0.95));border:1px solid rgba(91,192,255,0.2);border-radius:12px;padding:40px;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;animation:slideIn .3s ease}
.contact-modal__box h2{color:var(--white);margin-top:0;margin-bottom:24px;font-size:1.5rem}
.contact-modal__close{position:absolute;right:16px;top:16px;background:transparent;border:2px solid rgba(255,255,255,0.2);color:var(--white);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:1.2rem}
.contact-modal__close:hover{border-color:var(--blue);color:var(--blue)}

@keyframes slideIn{
  from{transform:translateY(-20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* modal - full screen image viewer (no thumbnail strip) */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.95);visibility:hidden;opacity:0;transition:opacity .2s ease;z-index:200}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal__viewer{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.modal__img{max-width:95%;max-height:95%;object-fit:contain}
.modal__nav{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--white);font-size:1.5rem;cursor:pointer;padding:20px;opacity:0.3;transition:opacity .2s}
.modal__nav:hover{opacity:0.7}
.modal__prev{left:20px}
.modal__next{right:20px}
.modal__close{position:fixed;right:20px;top:20px;background:transparent;border:2px solid rgba(255,255,255,0.12);color:var(--white);padding:8px 10px;border-radius:10px;cursor:pointer;z-index:201}

/* Category view pages */
.category-view{padding:0;display:flex;flex-direction:column;width:100%;margin:0;background:var(--black);flex:1}
.category-view h2{color:var(--white);margin:0;font-size:2rem;width:100%;text-align:center;padding:40px 20px;background:var(--black);flex-shrink:0}
#contact{justify-content:center;align-items:center}
#contact .main{justify-content:center;align-items:center;flex:none;height:auto;max-width:90%;width:90%}
#contact .category-grid{display:none}
.category-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:40px 20px;list-style:none;width:100%;margin:0;flex:1;grid-auto-rows:1fr;padding-bottom:120px}
.category-grid li{aspect-ratio:auto;overflow:hidden;border-radius:8px;cursor:pointer}
.category-grid img{width:100%;height:100%;object-fit:cover;border:none;transition:transform .2s ease;display:block}
.category-grid img:hover{transform:scale(1.02)}

/* Footer */
.footer{background:var(--black);border-top:1px solid rgba(91,192,255,0.15);padding:40px 20px 20px;margin-top:auto;position:static;z-index:100}
.footer__content{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-bottom:24px;border-bottom:1px solid rgba(91,192,255,0.1)}
.footer__logo{font-weight:700;font-size:1rem;color:var(--white)}
.footer__social{display:flex;gap:20px;align-items:center}
.social-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--blue);text-decoration:none;transition:color .2s,transform .2s}
.social-icon svg{width:24px;height:24px}
.social-icon:hover{color:rgba(91,192,255,0.8);transform:scale(1.1)}
.footer__bottom{max-width:var(--max-width);margin:16px auto;padding:0 20px;text-align:center;color:rgba(255,255,255,0.5);font-size:0.9rem}
.footer__bottom p{margin:0}

/* Focus styles for keyboard users */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(91,192,255,0.6);outline-offset:3px}

button, a, input, textarea{
  -webkit-tap-highlight-color: transparent;
}

/* Centered homepage gallery (2-column) with larger 16:9 tiles */
.hero.homepage{display:block}
.home-social{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.home-social__links{display:flex;gap:22px;align-items:center;justify-content:center}
.home-social .social-icon svg{width:34px;height:34px}
.home-social__line{width:120px;height:3px;background:var(--blue);border-radius:3px}
.gallery.homepage{width:100%;margin:0 auto;padding:0 20px;display:flex;justify-content:center}
.gallery.homepage .gallery__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:64px;row-gap:32px;padding:48px 0 80px;align-items:stretch;justify-items:stretch;width:min(1200px, 100%);margin:0 auto;grid-auto-rows:auto;grid-auto-flow:row}
.gallery.homepage .gallery__list li{aspect-ratio:16/9;border-radius:14px;overflow:hidden;min-height:260px}
.gallery.homepage .gallery__list img{width:100%;height:100%;object-fit:cover}

/* Slightly larger on wide screens */
@media (min-width:1400px){
  .gallery.homepage .gallery__list li{min-height:320px}
}

@media (max-width:900px){
  .nav{padding:14px 20px}
  .nav__burger{display:block}
  .nav__cta{display:none}
  .nav__links{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:12px;padding:16px 20px;background:rgba(10,10,10,0.98);backdrop-filter:blur(12px);border-bottom:1px solid rgba(91,192,255,0.15)}
  .nav__links a{padding:8px 0}
  .nav__cta--mobile{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;width:fit-content}
  .gallery.homepage{width:100%;margin:0 auto;padding:0 16px}
  .gallery.homepage .gallery__list{grid-template-columns:1fr;gap:24px;padding:24px 0}
  .gallery.homepage .gallery__list li{aspect-ratio:16/9;min-height:220px}
}