/* ============ DESIGN TOKENS ============ */
:root{
  --ink:#14181C;
  --ink-soft:#1D2329;
  --paper:#F3EEE3;
  --paper-soft:#EAE3D3;
  --amber:#C17F3A;
  --rust:#8A4B32;
  --teal:#1F3B3E;
  --cream-text:#F3EEE3;
  --ink-text:#14181C;
  --muted:#6b6558;
  --radius:2px;
  --maxw:1240px;
  --ff-display:'Fraunces', serif;
  --ff-body:'Work Sans', sans-serif;
  --ff-mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink-text);
  background:var(--paper);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block; height:auto;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{font-family:var(--ff-display); margin:0 0 .5em; line-height:1.1; font-weight:600;}
.container-w{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem;}
.eyebrow{
  font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.eyebrow::before{content:''; width:26px; height:1px; background:var(--amber);}
.section{padding:6.5rem 0; position:relative;}
.section--dark{background:var(--ink); color:var(--cream-text);}
.section--dark .eyebrow{color:var(--amber);}
.section--dark h2{color:var(--cream-text);}
.italic{font-style:italic; font-weight:500; color:var(--amber);}
.section--dark .italic{color:var(--amber);}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink); padding:.6rem 1rem; z-index:999;}
.skip-link:focus{left:1rem; top:1rem;}

/* Buttons */
.btn-signature{
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.9rem 1.8rem; border:1px solid var(--amber); border-radius:var(--radius);
  display:inline-flex; align-items:center; gap:.6rem; transition:.25s ease; background:transparent; color:inherit; cursor:pointer;
}
.btn-signature.filled{background:var(--amber); border-color:var(--amber); color:var(--ink);}
.btn-signature:hover{background:var(--amber); color:var(--ink); transform:translateY(-2px);}
.btn-signature.filled:hover{background:var(--rust); border-color:var(--rust); color:var(--cream-text);}

/* ============ HEADER / FILM-STRIP NAV ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(20,24,28,.92); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(243,238,227,.08);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.5rem; max-width:var(--maxw); margin:0 auto;}
.brand{font-family:var(--ff-display); font-weight:600; font-size:1.25rem; color:var(--cream-text); letter-spacing:.01em;}
.brand span{color:var(--amber); font-style:italic; font-weight:500;}
.main-nav ul{display:flex; gap:1.6rem; list-style:none; margin:0; padding:0;}
.main-nav a{
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-text); opacity:.75; position:relative; padding:.3rem 0;
}
.main-nav a:hover, .main-nav a.active{opacity:1; color:var(--amber);}
.nav-cta{font-family:var(--ff-mono); font-size:.76rem; color:var(--ink); background:var(--amber); padding:.55rem 1rem; border-radius:var(--radius); letter-spacing:.06em; text-transform:uppercase;}
.nav-toggle{display:none; background:none; border:1px solid rgba(243,238,227,.3); color:var(--cream-text); padding:.4rem .6rem; border-radius:var(--radius);}

/* filmstrip scroll progress rail */
.filmstrip-rail{
  position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; gap:10px; align-items:center;
}
.filmstrip-rail .sprocket{
  width:9px; height:9px; border-radius:50%; border:1px solid rgba(20,24,28,.35);
  background:transparent; cursor:pointer; transition:.2s;
}
.filmstrip-rail .sprocket.active{background:var(--amber); border-color:var(--amber); transform:scale(1.3);}
@media (max-width:991px){.filmstrip-rail{display:none;}}

@media (max-width:860px){
  .main-nav{position:fixed; top:64px; left:0; right:0; background:var(--ink); padding:1.2rem 1.5rem 2rem; display:none; border-bottom:1px solid rgba(243,238,227,.1);}
  .main-nav.open{display:block;}
  .main-nav ul{flex-direction:column; gap:1.1rem;}
  .nav-toggle{display:inline-block;}
  .nav-cta{display:none;}
}

/* ============ HERO ============ */
.hero{
  min-height:100vh; display:flex; align-items:center; background:var(--ink); color:var(--cream-text);
  position:relative; overflow:hidden; padding-top:6rem;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(155deg, rgba(20,24,28,.55), rgba(20,24,28,.92)), var(--ink);
}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.55; filter:sepia(.35) saturate(1.1) contrast(1.05);}
.light-leak{
  position:absolute; inset:0; z-index:1; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at 85% 10%, rgba(193,127,58,.35), transparent 45%);
  animation:leakSweep 12s ease-in-out infinite;
}
@keyframes leakSweep{
  0%,100%{opacity:.5; transform:translateX(0);}
  50%{opacity:.85; transform:translateX(-4%);}
}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 1.5rem; width:100%;}
.hero h1{font-size:clamp(2.6rem, 6vw, 4.6rem); max-width:820px;}
.hero p.lead{font-size:1.15rem; max-width:520px; opacity:.85; margin-bottom:2rem;}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3.5rem;}
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; border-top:1px solid rgba(243,238,227,.15); padding-top:1.8rem; max-width:720px;}
.stat-strip .num{font-family:var(--ff-display); font-size:2.1rem; color:var(--amber); font-weight:600;}
.stat-strip .lbl{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7;}
@media (max-width:700px){.stat-strip{grid-template-columns:repeat(2,1fr);}}

/* ============ O MNIE ============ */
.about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:3.5rem; align-items:center;}
.about-photo{position:relative;}
.about-photo img{border-radius:var(--radius); aspect-ratio:4/5; object-fit:cover; width:100%;}
.about-photo .badge-years{
  position:absolute; bottom:-1.2rem; left:-1.2rem; background:var(--amber); color:var(--ink);
  font-family:var(--ff-display); text-align:center; width:110px; height:110px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-weight:600;
}
.badge-years .n{font-size:2rem; line-height:1;}
.badge-years .t{font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.05em;}
.credentials{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem;}
.credentials span{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid rgba(20,24,28,.2); padding:.4rem .75rem; border-radius:var(--radius); color:var(--muted);
}
@media (max-width:860px){.about-grid{grid-template-columns:1fr; gap:2.5rem;} .about-photo .badge-years{width:90px; height:90px;}}

/* ============ USŁUGI ============ */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5px; background:rgba(243,238,227,.1); margin-top:2.5rem;}
.service-card{background:var(--ink); padding:2.4rem 1.9rem; transition:.3s;}
.service-card:hover{background:var(--ink-soft);}
.service-card .ico{color:var(--amber); margin-bottom:1.2rem;}
.service-card h3{font-size:1.15rem; color:var(--cream-text);}
.service-card p{opacity:.75; font-size:.94rem; margin:0 0 1rem;}
.service-card a{font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--amber); border-bottom:1px solid rgba(193,127,58,.4);}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.services-grid{grid-template-columns:1fr;}}

/* ============ PORTFOLIO — KONTAKTÓWKA ============ */
.contact-sheet{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:2.5rem;}
.frame{position:relative; overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:#000;}
.frame img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:grayscale(.15) sepia(.12);}
.frame:hover img{transform:scale(1.07); filter:grayscale(0) sepia(0);}
.frame .fnum{
  position:absolute; top:8px; left:8px; font-family:var(--ff-mono); font-size:.68rem; color:#fff;
  background:rgba(20,24,28,.55); padding:.15rem .45rem; opacity:0; transition:.3s;
}
.frame:hover .fnum{opacity:1;}
.frame .sprocket-row{position:absolute; bottom:4px; left:0; right:0; display:flex; justify-content:space-between; padding:0 6px; opacity:0; transition:.3s;}
.frame:hover .sprocket-row{opacity:1;}
.frame .sprocket-row span{width:5px; height:5px; background:#fff; border-radius:50%;}
@media (max-width:860px){.contact-sheet{grid-template-columns:repeat(2,1fr);}}

/* ============ PROCES ============ */
.process-list{margin-top:2.5rem; border-top:1px solid rgba(20,24,28,.12);}
.process-item{display:grid; grid-template-columns:110px 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid rgba(20,24,28,.12); align-items:start;}
.process-item .step-tag{font-family:var(--ff-mono); color:var(--amber); font-size:.85rem; letter-spacing:.08em;}
.process-item h3{font-size:1.3rem; margin-bottom:.4rem;}
.process-item p{color:var(--muted); max-width:620px; margin:0;}
@media (max-width:640px){.process-item{grid-template-columns:1fr; gap:.5rem;}}

/* ============ CENNIK ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem;}
.price-card{border:1px solid rgba(243,238,227,.15); padding:2.4rem 2rem; position:relative; display:flex; flex-direction:column;}
.price-card.featured{border-color:var(--amber); background:var(--ink-soft);}
.price-card .tag{font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); position:absolute; top:-1px; right:-1px; background:var(--amber); color:var(--ink); padding:.35rem .7rem;}
.price-card h3{color:var(--cream-text); font-size:1.3rem;}
.price-card .price{font-family:var(--ff-display); font-size:2.4rem; color:var(--amber); margin:.4rem 0 1.2rem;}
.price-card .price small{font-family:var(--ff-mono); font-size:.85rem; color:var(--cream-text); opacity:.6;}
.price-card ul{list-style:none; padding:0; margin:0 0 1.8rem; flex:1;}
.price-card li{padding:.5rem 0; border-bottom:1px solid rgba(243,238,227,.08); font-size:.92rem; opacity:.85;}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}}

/* ============ OPINIE ============ */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem;}
.testi-card{background:var(--paper-soft); padding:2rem; border-left:2px solid var(--amber);}
.testi-card .stars{color:var(--amber); font-family:var(--ff-mono); font-size:.85rem; margin-bottom:.8rem;}
.testi-card p{font-style:italic; margin:0 0 1.2rem; font-size:.96rem;}
.testi-card .who{font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.03em; color:var(--muted);}
@media (max-width:900px){.testi-grid{grid-template-columns:1fr;}}

/* ============ FAQ (bootstrap accordion re-skin) ============ */
.accordion-item{background:transparent; border:none; border-bottom:1px solid rgba(20,24,28,.15);}
.accordion-button{
  font-family:var(--ff-display); font-weight:600; font-size:1.1rem; background:transparent; color:var(--ink-text);
  padding:1.3rem 0; box-shadow:none !important;
}
.accordion-button:not(.collapsed){color:var(--rust); background:transparent;}
.accordion-button::after{filter:sepia(1) saturate(3) hue-rotate(-10deg);}
.accordion-body{padding:0 0 1.5rem; color:var(--muted); max-width:760px;}

/* ============ ZASIĘG ============ */
.area-tags{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem;}
.area-tags span{font-family:var(--ff-mono); font-size:.8rem; padding:.5rem 1rem; border:1px solid rgba(20,24,28,.18); border-radius:var(--radius);}

/* ============ KONTAKT ============ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-top:2.5rem;}
.form-control-signature{
  background:transparent; border:none; border-bottom:1px solid rgba(243,238,227,.3); color:var(--cream-text);
  border-radius:0; padding:.7rem .2rem; font-family:var(--ff-body);
}
.form-control-signature:focus{background:transparent; color:var(--cream-text); border-color:var(--amber); box-shadow:none;}
.form-control-signature::placeholder{color:rgba(243,238,227,.4);}
label.form-label-signature{font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.7; margin-bottom:.3rem;}
.honeypot-field{position:absolute; left:-9999px; opacity:0;}
.info-list{list-style:none; padding:0; margin:0;}
.info-list li{display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid rgba(243,238,227,.12);}
.info-list .ico{color:var(--amber);}
.form-note{font-size:.8rem; opacity:.55; margin-top:1rem;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr; gap:2.5rem;}}

/* ============ FOOTER ============ */
.site-footer{background:var(--ink); color:var(--cream-text); padding:3.5rem 0 1.5rem; border-top:1px solid rgba(243,238,227,.08);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;}
.footer-grid h4{font-family:var(--ff-mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--amber); margin-bottom:1rem;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem;}
.footer-grid a{opacity:.75; font-size:.92rem;}
.footer-grid a:hover{opacity:1; color:var(--amber);}
.footer-bottom{max-width:var(--maxw); margin:2.5rem auto 0; padding:1.5rem 1.5rem 0; border-top:1px solid rgba(243,238,227,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.78rem; opacity:.55; font-family:var(--ff-mono);}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr; gap:2rem;}}

/* Lightbox */
.lb-overlay{position:fixed; inset:0; background:rgba(20,24,28,.96); z-index:2000; display:none; align-items:center; justify-content:center; padding:2rem;}
.lb-overlay.open{display:flex;}
.lb-overlay img{max-width:90vw; max-height:85vh; object-fit:contain; border:1px solid rgba(243,238,227,.15);}
.lb-close{position:absolute; top:1.5rem; right:1.8rem; color:#fff; font-size:1.8rem; cursor:pointer; background:none; border:none;}

/* Section image lazy fade */
img[loading="lazy"]{background:#e7e0d0;}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--amber); outline-offset:2px;
}