@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('https://fonts.gstatic.com/s/manrope/v14/xn7gYHE41ni1AdIRggexSg.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('https://fonts.gstatic.com/s/manrope/v14/xn7gYHE41ni1AdIRggexw.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('https://fonts.gstatic.com/s/manrope/v14/xn7gYHE41ni1AdIRggexSg.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('https://fonts.gstatic.com/s/manrope/v14/xn7gYHE41ni1AdIRggexSg.woff2') format('woff2')}

:root{--bg:#0b0b0c;--card:#141416;--text:#eaeaea;--muted:#a1a1aa;--accent:#ffffff;}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Manrope',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--text);text-decoration:none}
a:hover{opacity:.85}
.container{max-width:1100px;margin:0 auto;padding:20px}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.nav .brand{font-weight:700;letter-spacing:.02em;font-size:20px}
.nav .menu{display:flex;gap:36px}
.nav .menu a{font-size:18px}
.nav .menu a[aria-current="page"]{opacity:1;font-weight:700}
.btn,.btn:visited{display:inline-block;padding:12px 16px;border-radius:999px;border:1px solid #2a2a2e;background:linear-gradient(180deg,#1a1a1d,#121214);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;color:#f4f4f4;font-weight:600;transition:background .2s ease,color .2s ease,transform .12s ease,box-shadow .2s ease}
.btn.primary{border-color:#2f2f35;background:linear-gradient(180deg,#1f1f23,#151518);color:#ffffff}
.btn:active{transform:translateY(1px);background:linear-gradient(180deg,#232327,#16161a)}
.btn.primary:active{background:linear-gradient(180deg,#26262b,#19191d);color:#ffdff6;box-shadow:0 0 0 1px rgba(255,255,255,.1) inset}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed}
.hero{display:grid;grid-template-columns:1fr 1.2fr;gap:28px;align-items:center;padding:24px 0}
.hero-about{grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.hero-about figure{margin:0;text-align:center}
.hero-about figure img{max-width:380px;margin:0 auto;display:block}
.hero-about figcaption{margin-top:8px}
.hero img{width:100%;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.35);transform-origin:center;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s cubic-bezier(.2,.7,.2,1),filter .6s cubic-bezier(.2,.7,.2,1);will-change:transform,box-shadow,filter}
.hero img:hover{transform:perspective(900px) rotateX(.6deg) rotateY(.6deg) scale(1.03);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.badge{display:inline-block;padding:6px 10px;border:1px solid #2a2a2e;border-radius:999px;font-size:12px;color:var(--muted);}
.h1{font-size:44px;line-height:1.1;margin:10px 0 8px;font-weight:800}
.h2{font-size:28px;margin:28px 0 12px;font-weight:700}
.lead{color:var(--muted);font-size:16px;line-height:1.6}
.grid{display:grid;gap:18px}
.grid.cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid #222227;border-radius:16px;padding:18px}
.card img{width:100%;height:280px;object-fit:cover;border-radius:12px}
.chips{margin:10px 0 4px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:6px 10px;border:1px solid #2a2a2e;border-radius:999px;background:#141416;color:var(--muted);font-size:12px}
.footer{margin-top:60px;padding:24px 0;border-top:1px solid #222227;color:var(--muted);font-size:14px}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;margin:10px 0}
.section{padding:6px 0 8px}
.gallery{columns: 1; column-gap: 16px}
@media (min-width: 640px){.gallery{columns:2}}
@media (min-width: 1024px){.gallery{columns:3}}
.gallery img{width:100%;margin:0 0 16px;border-radius:12px;break-inside: avoid;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.gallery img{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1);will-change:transform,box-shadow}
.gallery a:hover img,.gallery a:focus img{transform:translateY(-4px) perspective(900px) rotateX(.4deg) rotateY(.4deg) scale(1.02);box-shadow:0 12px 28px rgba(0,0,0,.45)}
.headerbar{position:sticky;top:0;background:rgba(11,11,12,.7);backdrop-filter: blur(6px);z-index:50;border-bottom:1px solid #16161a}
.small{font-size:13px;color:var(--muted)}
ul.clean{padding-left:18px;margin:8px 0}
kbd{background:#1e1e22;border:1px solid #2a2a2e;border-bottom-color:#202024;border-radius:6px;padding:2px 6px;font-size:12px}


/* --- Mobile-first tweaks --- */
.headerbar{position:sticky;top:0;background:rgba(11,11,12,.7);backdrop-filter: blur(6px);z-index:50;border-bottom:1px solid #16161a}
.nav .brand img{height:300px;display:block;max-width:100%;width:auto}
#nav-toggle{display:none;border:1px solid #2a2a2e;background:#141416;color:#eaeaea;border-radius:10px;padding:12px 16px;cursor:pointer}
#nav-toggle .bar{display:block;width:28px;height:3px;margin:5px 0;background:#eaeaea}
.nav .menu{display:flex;gap:18px;align-items:center}
@media (max-width: 820px){
  .hero{grid-template-columns:1fr}
  .nav{gap:10px;padding:6px 0}
  #nav-toggle{display:inline-block}
  .nav .menu{display:none;position:absolute;right:24px;top:60px;flex-direction:column;background:#141416;border:1px solid #222227;border-radius:12px;padding:14px;min-width:280px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .nav .menu.open{display:flex}
  .nav .menu a{padding:12px 14px;border-radius:8px}
  .nav .menu a:hover{background:#1a1a1d}
  .hero-about{grid-template-columns:1fr;text-align:left}
  .hero-about figure{margin-top:16px}
  .hero-about figure img{max-width:100%}
  .nav .menu a{font-size:17px}
}
/* Mobile container side padding + safe-area guards */
@media (max-width: 480px){
  .container{padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right))}
}
/* accessible focus */
a:focus, button:focus{outline:2px solid #3a3a3f;outline-offset:2px}

/* Lightbox cursor hint */
.gallery a[data-lightbox]{cursor:zoom-in}

/* bigger logo mobile */
@media (max-width: 820px){
  .nav .brand img{height:clamp(150px, 42vw, 210px)}
}

/* contact mobile fixes */
@media (max-width: 640px){
  .kv{grid-template-columns:1fr;gap:4px}
  .kv .small{opacity:.85}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero img,.gallery img{transition:none}
  .hero img:hover,.gallery a:hover img,.gallery a:focus img{transform:none}
}

/* Home hero image: grayscale to color on hover */
.home-hero{filter:grayscale(100%) contrast(1.05)}
.home-hero:hover{filter:none}

/* Skip link */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 14px;background:#ffffff;color:#000;border-radius:8px;z-index:10000;outline:2px solid #3a3a3f;outline-offset:2px}

/* Lightbox controls */
#lightbox-overlay{font-family:inherit}
#lightbox-overlay .lightbox-close{position:absolute;top:20px;right:26px;font-size:32px;line-height:32px;border:0;background:transparent;color:#fff;cursor:pointer}
#lightbox-overlay .lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.35);color:#fff;font-size:36px;line-height:1;width:52px;height:52px;border-radius:50%;align-items:center;justify-content:center;display:flex;cursor:pointer;transition:background .2s ease}
#lightbox-overlay .lightbox-arrow:hover{background:rgba(0,0,0,.55)}
#lightbox-overlay .lightbox-arrow--prev{left:32px}
#lightbox-overlay .lightbox-arrow--next{right:32px}

@media (max-width: 640px){
  #lightbox-overlay .lightbox-arrow{display:none !important}
}