@font-face{font-family:'Inter Tight';src:url('assets/inter-tight-light-italic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Inter Tight';src:url('assets/inter-tight-bold-italic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
.type-bold{font-style:italic;font-weight:700}
.type-outline{color:transparent;-webkit-text-stroke:1px var(--white)}
#kontakt .type-outline{-webkit-text-stroke-color:#10231c}
@media(forced-colors:active){.type-outline{color:CanvasText;-webkit-text-stroke:0}}
body{letter-spacing:-.01em}
h1,h2,.hero h1{font-weight:500;letter-spacing:-.045em}
.type-light{font-weight:300;font-style:italic}
.service h3,.project-name,.process-list h3{font-weight:500;letter-spacing:-.035em}
.desktop-nav a{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.045em}
.marquee{background:var(--accent);border:0;padding-block:30px}
.marquee-track>span,.marquee i{color:#10251e}
.marquee-track>span{font-style:italic;font-weight:500}
.motion-toggle{color:var(--accent)}
#oferta,#kontakt{background:#f6f7f4;max-width:none}
#oferta,#realizacje,#kontakt{--white:#10231c;--muted:#52645b;--line:#bdccc3;color:var(--white)}
#realizacje{background:#e4eee7;border-block:0}
#oferta .section-number,#realizacje .section-number,#kontakt .section-number{color:#226650}
#oferta .service-body>p{color:#52645b}
#oferta .service[open] h3,#oferta .service[open] .service-number,#oferta .service summary:hover h3{color:#226650}
#oferta .service-body li:before{color:#226650}
#oferta .text-link:hover,#kontakt .text-link:hover{color:#226650;border-color:#226650}
#oferta :focus-visible,#realizacje :focus-visible,#kontakt :focus-visible{outline-color:#226650}
#oferta .plus{border-color:#91a89b}
#realizacje .project-view{background:#10231c;color:#fff}
#realizacje .project-caption .eyebrow{color:#42594c}
#realizacje .button{background:#10231c;border-color:#10231c;color:#fff}
#realizacje .button span{color:#5be7c3}
#realizacje .button:hover{background:#24503e}
#realizacje .round-link{background:#10231c;color:#5be7c3}
#kontakt .accent,#kontakt .contact-arrow,#kontakt .contact-email span{color:#226650}
#kontakt .contact-email:hover,#kontakt .contact-phone:hover,#kontakt .socials a:hover{color:#226650}
#kontakt .field select,#kontakt .field option{background:#f6f7f4}
#kontakt .form-note{background:#e1eee5;color:#385647;border-color:#226650}
#kontakt .form-note .eyebrow{color:#226650}
#kontakt input::placeholder,#kontakt textarea::placeholder{color:#65776c}
#kontakt .field input:focus,#kontakt .field select:focus,#kontakt .field textarea:focus{border-color:#226650;box-shadow:0 2px 0 -1px #226650}
#kontakt .error{color:#a62e25}
#kontakt .field [aria-invalid=true]{border-color:#a62e25}
#kontakt .service-option input:focus-visible+span{outline-color:#226650}
#kontakt .service-option:hover>span{border-color:#226650}
#kontakt .form-result{background:#e1eee5;border-color:#226650}
#kontakt .form-result h3{color:#226650}
#kontakt .form-result p{color:#385647}
#kontakt .status-dot{background:#226650}
@media(max-width:760px){.hero h1{letter-spacing:-.04em}.marquee{padding-block:23px}}
.about-section{background:#e4eee7;color:#10231c}
.about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:center}
.about-portrait{position:relative;margin:0;max-width:620px}
.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.about-portrait figcaption{position:absolute;bottom:20px;left:20px;right:20px;padding:14px 18px;background:#5be7c3;color:#10231c;font-size:10px}
.about-copy .about-kicker{font:11px/1.6 var(--mono);color:#226650;margin:0 0 32px;letter-spacing:.09em}
.about-copy h2{font-size:clamp(44px,5.3vw,82px);margin-bottom:32px}
.about-copy .about-lead{font-size:clamp(21px,2vw,28px);line-height:1.35;color:#10231c;letter-spacing:-.02em;margin-bottom:18px}
.about-copy p{color:#42594c;font-size:17px}
.about-copy .button{margin-top:14px;background:#10231c;color:#fff;border-color:#10231c}
.about-copy .button span{color:#5be7c3}
.about-copy .button:hover{background:#24503e}
.about-copy .about-location{font:10px/1.6 var(--mono);margin:28px 0 0;color:#52645b;letter-spacing:.07em}
@media(max-width:760px){.about-grid{grid-template-columns:1fr;gap:38px}.about-portrait{max-width:none}.about-copy h2{font-size:clamp(44px,10vw,66px)}.about-copy .about-kicker{margin-bottom:20px}.about-copy p{font-size:16px}.about-portrait figcaption{left:14px;right:14px;bottom:14px;padding:12px;font-size:9px}}

/* Fixed geometry independent of font metrics; #top belongs to the page, not the sticky header. */
.back-top{width:52px;height:52px;flex:0 0 52px;box-sizing:border-box;padding:0;line-height:1;color:var(--accent);border-color:var(--accent);transition:background .2s,color .2s,border-color .2s}
.back-top svg{display:block;width:24px;height:24px;transition:transform .2s ease}
.back-top:hover,.back-top:focus-visible{background:var(--accent);color:#10231c}
.back-top:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.back-top:hover svg{transform:translateY(-3px)}
.back-top:active svg{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.back-top,.back-top svg{transition:none}.back-top:hover svg,.back-top:active svg{transform:none}}
html.motion-paused .back-top,html.motion-paused .back-top svg{transition:none}

/* Two identical, non-shrinking groups: the loop always moves exactly one group. */
.marquee-track{width:max-content;display:flex;gap:0;animation:plasticz-marquee 38s linear infinite;will-change:transform}
.marquee-track>.marquee-group{flex:0 0 auto;min-width:100vw;box-sizing:border-box;justify-content:space-around;gap:48px;padding:0 48px 0 0}
.marquee-group>span,.marquee-group>i{flex-shrink:0}
.marquee:hover .marquee-track{animation-play-state:running}
@keyframes plasticz-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:760px){.marquee-track>.marquee-group{gap:27px;padding-right:27px}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;transform:none;will-change:auto}.marquee-track>.marquee-group{min-width:100vw;gap:16px;white-space:normal;flex-wrap:wrap;justify-content:center;padding-inline:20px;width:100vw}.marquee-group>span{font-size:22px}.marquee-track>.marquee-group+ .marquee-group{display:none}}

/* Original client PNGs retain their alpha channel and brand colour. */
.clients-section{background:#fff;color:#10231c;padding:54px 0 46px}
.clients-title{font:500 13px/1.5 var(--font, 'Inter Tight',sans-serif);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin:0 0 22px}
.clients-logos{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding:0;margin:0;align-items:center}
.clients-logos li{display:flex;align-items:center;justify-content:center;min-width:0}
.clients-logos img{display:block;width:150px;height:150px;max-width:100%;object-fit:contain;filter:brightness(0)}
@media(max-width:760px){.clients-section{padding:38px 0 30px}.clients-logos{grid-template-columns:repeat(6,minmax(0,1fr));gap:0 16px}.clients-logos li{grid-column:span 2}.clients-logos li:nth-child(4){grid-column:2/span 2}.clients-logos img{width:130px;height:130px}.clients-title{font-size:12px;margin-bottom:12px}}

/* Header logo: one short entrance, then motion only on deliberate interaction. */
.header .brand{display:inline-flex;align-items:center;min-height:44px;flex-shrink:0;animation:brand-arrive .75s cubic-bezier(.2,.7,.2,1) backwards}
.header .brand img{display:block;transform-origin:30% 50%;transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s ease}
@keyframes brand-arrive{from{opacity:0;transform:translateY(7px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(hover:hover) and (pointer:fine){.header .brand:hover img{transform:translateY(-2px) rotate(-1deg) scale(1.025);filter:drop-shadow(0 0 10px rgba(91,231,195,.35))}}
.header .brand:focus-visible img{transform:translateY(-2px);filter:drop-shadow(0 0 10px rgba(91,231,195,.35))}
.header .brand:active img{transform:scale(.98);filter:none}
html.motion-paused .header .brand{animation:none!important}
html.motion-paused .header .brand img{transition:none;transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.header .brand{animation:none!important}.header .brand img{transition:none!important;transform:none!important;filter:none!important}}