:root{
    --ink:#26313D;
    --ink-soft:#57626C;
    --canvas:#F1F3F4;
    --canvas-alt:#E3E8E9;
    --navy:#34455E;
    --navy-deep:#283548;
    --turq:#86C9C7;
    --turq-deep:#3F7A78;
    --line:rgba(52,69,94,0.16);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope', sans-serif;
    background:var(--canvas);
    color:var(--ink);
    line-height:1.6;
    font-size:16px;
  }
  h1,h2,h3{
    font-family:'LINE Seed JP', sans-serif;
    font-weight:500;
    line-height:1.15;
    color:var(--navy);
  }
  h1{font-size:clamp(1.9rem, 5vw, 2.6rem); font-weight:700;}
  h2{font-size:clamp(1.5rem, 5vw, 2.2rem);}
  h3{font-size:1.15rem; font-weight:600;}
  a{color:inherit; text-decoration:none;}
  img,.ph{display:block; width:100%;}
  .wrap{max-width:1100px; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem;}
  section{padding-top:4.5rem; padding-bottom:4.5rem;}

  /* placeholder photo blocks */
  .ph{
    background:linear-gradient(135deg, var(--canvas-alt), #D6E8E7);
    border:1px solid var(--line);
    border-radius:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; color:var(--ink-soft); text-align:center;
    aspect-ratio:4/5;
  }
  .ph.wide{aspect-ratio:16/9;}
  .ph.square{aspect-ratio:1/1;}
  .ph svg{width:34px; height:34px; opacity:.55;}
  .ph img{width:100%; height:100%; object-fit:cover; display:block;}
  .ph span{font-size:.75rem; letter-spacing:.02em;}
  .bleed{border-left:none; border-right:none;}

  /* header */
  header{position:sticky; top:0; z-index:20; background:#FFFFFF; border-bottom:1px solid var(--line);}
  header .wrap{display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.25rem;}
  .logo{display:flex; align-items:center;}
  .logo img{height:38px; width:auto; display:block;}
  .btn{
    display:inline-block; padding:.75rem 1.5rem; border-radius:0;
    font-weight:500; font-size:.9rem; border:1px solid var(--navy);
  }
  .btn-solid{background:var(--navy); color:var(--canvas);}
  .btn-solid:active{background:var(--navy-deep);}
  .btn-ghost{color:var(--navy);}

  .header-right{display:flex; align-items:center; gap:1.25rem;}
  .navtoggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem;
  }
  .navtoggle span{width:22px; height:2px; background:var(--navy); display:block;}
  nav.menu{
    position:fixed; inset:0; top:68px; background-color:var(--canvas); z-index:19;
    transform:translate3d(100%,0,0); transition:transform .25s ease;
    padding:2rem 1.25rem; border-top:1px solid var(--line);
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    will-change:transform;
  }
  nav.menu.open{transform:translate3d(0,0,0);}
  nav.menu ul{list-style:none; display:flex; flex-direction:column; gap:1.5rem;}
  nav.menu a{font-family:'LINE Seed JP', sans-serif; font-size:1.4rem; color:var(--navy);}

  /* hero */
  .hero{padding:2.5rem 0 3rem;}
  .hero .ph{aspect-ratio:3/4; margin:0 -1.25rem 1.75rem; width:calc(100% + 2.5rem);}
  .hero .eyebrow{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--turq-deep); font-weight:600; margin-bottom:.75rem;}
  .hero p.lead{color:var(--ink-soft); font-size:1.05rem; margin:1rem 0 1.75rem; max-width:32rem;}
  .hero .actions{display:flex; flex-direction:column; gap:.75rem;}

  /* credentials plaque - signature element */
  .plaque{background:var(--navy-deep); color:var(--canvas);}
  .plaque .wrap{
    display:flex; flex-direction:column; gap:1.25rem; padding:2.25rem 1.25rem;
    text-align:center;
  }
  .plaque .item p{font-family:'LINE Seed JP', sans-serif; font-size:1.6rem; font-weight:500;}
  .plaque .item span{
    display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
    color:#AFCDCB; margin-top:.25rem;
  }

  /* intro */
  .intro .grid{display:flex; flex-direction:column; gap:2rem;}
  .intro .ph{aspect-ratio:5/4;}
  .intro p{color:var(--ink-soft); margin-top:1rem;}

  /* offer band */
  .offer{background:var(--canvas);}
  .offer .card{
    border:1px solid var(--line); border-radius:0; background:#FFFFFF;
    padding:1.75rem; text-align:left;
    display:flex; flex-direction:column; gap:1.25rem;
  }
  .offer .card .ph{
    aspect-ratio:4/3; margin:0;
  }
  .offer .card .ph svg{width:26px; height:26px;}
  .offer .tag{
    display:inline-block; background:var(--turq); color:var(--navy-deep); font-size:.7rem;
    letter-spacing:.1em; text-transform:uppercase; padding:.3rem .75rem; border-radius:0;
    margin-bottom:1rem; font-weight:600;
  }
  .offer p{color:var(--ink-soft); margin:.75rem 0 1.5rem;}

  @media (min-width:640px){
    .offer .card{flex-direction:row; align-items:stretch;}
    .offer .card .ph{width:220px; flex-shrink:0; aspect-ratio:auto; height:auto;}
    .offer .card .text{flex:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;}
  }

  /* services teaser */
  .services{background:var(--canvas-alt);}
  .services p{color:var(--ink-soft); margin:1rem 0 1.5rem; max-width:36rem;}

  /* gallery - masonry: each photo keeps its natural proportions, no forced cropping.
     Click a real photo to open it enlarged (lightbox). */
  .gallery .grid.masonry{
    display:block; columns:2; column-gap:.5rem; margin:2rem 0 0;
  }
  .gallery .ph{
    width:100%; display:inline-block; break-inside:avoid; margin:0 0 .5rem;
    border:1px solid var(--line); overflow:hidden; background:none;
    aspect-ratio:auto; border-radius:0;
  }
  .gallery .ph img{width:100%; height:auto; object-fit:unset; display:block; cursor:zoom-in;}
  .gallery .ph-placeholder{
    aspect-ratio:4/3; background:linear-gradient(135deg, var(--canvas-alt), #D6E8E7);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:.5rem; color:var(--ink-soft); text-align:center; padding:1rem;
  }
  .gallery .ph-placeholder svg{width:34px; height:34px; opacity:.55;}
  .gallery .ph-placeholder span{font-size:.75rem; letter-spacing:.02em;}

  /* lightbox */
  .lightbox{
    position:fixed; inset:0; background:rgba(21,29,26,0.94); z-index:200;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .2s ease; padding:2rem;
  }
  .lightbox.open{opacity:1; pointer-events:auto;}
  .lightbox img{max-width:100%; max-height:100%; object-fit:contain;}
  .lightbox-close{
    position:absolute; top:1.25rem; right:1.25rem; background:none; border:none;
    color:#fff; font-size:1.5rem; cursor:pointer; line-height:1; padding:.5rem;
  }

  /* testimonials */
  .testimonials-track{overflow:hidden; margin-top:2rem; -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);}
  .testimonials-scroll{display:flex; gap:1.5rem; width:max-content; animation:marquee 38s linear infinite;}
  .testimonials-track:hover .testimonials-scroll{animation-play-state:paused;}
  .testimonials blockquote{
    font-family:'LINE Seed JP', sans-serif; font-size:1.15rem; font-weight:400;
    color:var(--navy); border-left:3px solid var(--turq); padding-left:1.25rem;
    width:340px; flex-shrink:0;
  }
  .testimonials cite{display:block; margin-top:.75rem; font-family:'Manrope'; font-style:normal; font-size:.85rem; color:var(--ink-soft);}
  .testimonials-count{margin-top:2rem; font-weight:600; color:var(--navy);}
  .testimonials-more{display:inline-block; margin-top:.35rem; color:var(--turq-deep); font-weight:600; font-size:.9rem;}
  @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){
    .testimonials-scroll{animation:none; flex-wrap:wrap; width:auto;}
    .testimonials-track{overflow:visible; mask-image:none; -webkit-mask-image:none;}
  }

  /* footer */
  footer{background:var(--navy-deep); color:var(--canvas); padding:3rem 0 2rem;}
  .footer-cta{display:flex; flex-direction:column; gap:.75rem; margin-bottom:2rem;}
  .footer-cta .btn-solid{background:var(--turq); color:var(--navy-deep); border-color:var(--turq);}
  .btn-ghost-light{
    display:inline-block; padding:.75rem 1.5rem; border-radius:0;
    font-weight:500; font-size:.9rem; border:1px solid rgba(255,255,255,0.4); color:var(--canvas);
  }
  footer h3{color:var(--canvas); font-size:1.3rem; margin-bottom:1rem;}
  footer p{color:#AFCDCB; font-size:.9rem; margin-bottom:.4rem;}
  footer p a{color:#AFCDCB; text-decoration:underline; text-underline-offset:2px;}
  footer .cols{display:flex; flex-direction:column; gap:2rem; margin-top:2rem;}

  /* desktop */
  @media (min-width:820px){
    .hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;}
    .hero .ph{aspect-ratio:4/5; margin:0; width:100%;}
    .gallery .grid.masonry{columns:3; column-gap:.75rem;}
    .gallery .ph{margin:0 0 .75rem;}
    .footer-cta{flex-direction:row;}
    .hero .actions{flex-direction:row;}
    .plaque .wrap{flex-direction:row; justify-content:space-between; text-align:left;}
    .intro .grid{flex-direction:row; align-items:center; gap:3rem;}
    .intro .ph{flex:1; aspect-ratio:4/3;}
    .intro .text{flex:1;}
    footer .cols{flex-direction:row; justify-content:space-between;}
    .navtoggle{display:none;}
    nav.menu{
      position:static; inset:auto; transform:none; padding:0; border:none; background:none;
    }
    nav.menu ul{flex-direction:row; gap:2rem;}
    nav.menu a{font-family:'Manrope', sans-serif; font-size:.95rem; font-weight:500;}
  }

/* cennik page */
.page-header{padding:6rem 0 1rem; text-align:center;}
.page-header p{color:var(--ink-soft); max-width:36rem; margin:.75rem auto 0;}
.price-category{margin-bottom:1rem;}
.price-category h2{margin-bottom:1rem;}
.price-row{
  display:flex; flex-direction:column; gap:.15rem;
  border-top:1px solid var(--line); padding:1rem 0;
}
.price-row .top{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;}
.price-row .name{font-weight:500; color:var(--navy);}
.price-row .price{font-family:'LINE Seed JP', sans-serif; font-weight:500; white-space:nowrap;}
.price-row .desc{color:var(--ink-soft); font-size:.9rem;}
.price-row .time{color:var(--ink-soft); font-size:.8rem;}

/* team page */
.team-grid{display:flex; flex-direction:column; gap:2.5rem; margin-top:2rem;}
.team-card{display:flex; flex-direction:column; gap:1rem;}
.team-card .ph{aspect-ratio:1/1;}
.team-card h3{font-size:1.875rem; margin-bottom:.15rem;}
.team-card .role{color:var(--turq-deep); font-size:.85rem; font-weight:600; margin-bottom:.5rem;}
.team-card p{color:var(--ink-soft); font-size:.95rem;}

/* generic content page (kontakt, blog) */
.content-page .wrap{padding-top:1rem;}
.content-page p{color:var(--ink-soft); margin-bottom:1rem;}

@media (min-width:820px){
  .team-grid{flex-direction:row; flex-wrap:wrap;}
  .team-card{flex:1 1 28%;}
}

/* reveal-on-scroll: elementy startują niewidoczne TYLKO gdy JS faktycznie
   animuje (klasa dodawana przez reveal.js) — bez JS treść jest zawsze widoczna */
.js-anim-ready .reveal{opacity:0;}

/* kontakt page */
.kontakt-main{display:flex; flex-direction:column; gap:2rem; padding-top:1rem;}
.kontakt-main .ph{aspect-ratio:4/5;}
.kontakt-details p{color:var(--ink-soft); margin-bottom:1rem;}
.kontakt-facts p a{color:var(--navy); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.kontakt-actions{display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem;}

@media (min-width:820px){
  .kontakt-main{flex-direction:row; align-items:flex-start; gap:3rem;}
  .kontakt-main .ph{flex:0 0 38%;}
  .kontakt-details{flex:1;}
  .kontakt-actions{flex-direction:row;}
}

/* extra breathing room between page hero and main content on subpages */
.page-header{padding-bottom:2rem;}
.price-category:not(:first-child){margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line);}

/* services icons row */
.services-inner{display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem;}
.services-icons{display:flex; gap:1rem; order:-1;}
.kf-icon{width:44px; height:44px; color:var(--turq-deep); flex-shrink:0;}
@media (min-width:640px){
  .services-icons{gap:1.5rem; order:0;}
  .kf-icon{width:60px; height:60px;}
  .services-inner{flex-direction:row; align-items:center; justify-content:space-between; gap:1.5rem;}
}

/* team bio collapse */
.bio-collapse{
  max-height:2.9em; overflow:hidden; position:relative;
  transition:max-height .35s ease;
}
.bio-collapse:not(.open)::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:1.6em;
  background:linear-gradient(180deg, transparent, var(--canvas));
}
.bio-collapse.open{max-height:30em;}
.bio-toggle{
  background:none; border:none; color:var(--turq-deep); font-weight:600; font-size:.85rem;
  cursor:pointer; padding:.5rem 0 0; font-family:'Manrope', sans-serif;
}

/* ScrollSmoother — CSS aktywne TYLKO gdy JS potwierdzi że biblioteka się wczytała
   (klasa dodawana w reveal.js). Bez tego zabezpieczenia strona przestałaby się
   scrollować, gdyby GSAP z jakiegoś powodu się nie wczytał. */
.smooth-scroll-ready #smooth-wrapper{
  position:fixed; top:0; left:0; width:100%; height:100%; overflow:hidden;
}
.smooth-scroll-ready #smooth-content{overflow:visible; width:100%;}