:root {
  --black:#090909;
  --black-soft:#101010;
  --card:#141414;
  --red:#ff1452;
  --red-dark:#d9003b;
  --cream:#fffdf6;
  --white:#f7f6f2;
  --muted:#b7b4b7;
  --heading:'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --body:'DM Sans',Arial, sans-serif;
  --marker:'Permanent Marker','Comic Sans MS',cursive;
  --container:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;color:var(--white);background:var(--black);font-family:var(--body);font-size:16px;line-height:1.5;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E")}
::selection{background:var(--red);color:white}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
.container{width:min(var(--container),calc(100% - 96px));margin-inline:auto}
.skip-link{position:fixed;top:-99px;left:16px;background:white;color:black;padding:12px 20px;z-index:1002}.skip-link:focus{top:12px}
.site-header{position:absolute;top:0;left:0;right:0;z-index:50}
.nav-wrap{min-height:120px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:block;flex:none;width:135px;line-height:0;transition:transform .2s}
.brand img{width:100%;height:auto}
.brand:hover{transform:rotate(-3deg)}
.main-nav{display:flex;align-items:center;gap:30px}
.main-nav>a:not(.button){font:700 16px/1 var(--heading);letter-spacing:.07em;transition:color .2s;white-space:nowrap}
.main-nav>a:not(.button):hover,.main-nav>a:not(.button):focus-visible{color:var(--red)}
.menu-toggle{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;gap:15px;text-align:center;font:800 17px/1.1 var(--heading);letter-spacing:.06em;padding:17px 28px;min-height:50px;border:0;text-transform:uppercase;white-space:nowrap;position:relative;isolation:isolate;transition:transform .2s,background .2s,color .2s}
.button:hover,.button:focus-visible{transform:translateY(-3px)}
.button--paint{background:var(--red);color:white;clip-path:polygon(1% 7%,96% 0%,98% 13%,100% 11%,97% 31%,100% 61%,98% 82%,100% 98%,3% 93%,1% 100%,2% 70%,0 50%,2% 23%)}
.button--outline{background:transparent;color:white;border:1.5px solid white}
.button--outline:hover{background:white;color:black}
.button--light{color:#0a0a0a;background:white;clip-path:polygon(1% 4%,96% 0,99% 15%,98% 80%,100% 100%,4% 96%,0 92%,2% 40%)}
.nav-contact{margin-left:12px}
.hero{position:relative;min-height:735px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 83% 67%,rgba(255,20,82,.25),transparent 43%),linear-gradient(125deg,#0a0a0a 26%,#111 85%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.27;background-image:radial-gradient(#fff 0.7px,transparent .7px);background-size:21px 26px}
.hero::after{content:"";z-index:3;pointer-events:none;position:absolute;right:-9%;bottom:0;width:57%;height:24%;background:var(--red);filter:blur(7px);transform:rotate(-12deg) skewX(-16deg);clip-path:polygon(0 67%,19% 39%,31% 63%,45% 41%,70% 47%,100% 0,100% 16%,66% 59%,33% 74%,15% 100%,0 80%);opacity:.8}
.hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);align-items:center;min-height:735px;padding-top:115px;padding-bottom:70px;gap:12px}
.hero-copy{position:relative;z-index:6;padding-bottom:5px}
.eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:12px;font:800 16px/1.1 var(--heading);letter-spacing:.14em;color:var(--red)}
.eyebrow-dash{width:26px;height:3px;background:var(--red);transform:rotate(-6deg)}
.hero h1{font:900 clamp(66px,7.2vw,113px)/.85 var(--heading);font-stretch:condensed;letter-spacing:-.018em;white-space:nowrap;margin:0 0 26px;text-transform:uppercase}
.hero h1 span{color:var(--red)}
.hero h1 .terminal-dot{color:white}
.hero-description{max-width:450px;font-size:19px;line-height:1.55;color:#ececec;margin:0 0 28px}
.hero-description strong{color:var(--red)}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-art{position:absolute;z-index:1;width:min(60vw,720px);height:620px;right:-58px;bottom:0;pointer-events:none}
.chimp{position:absolute;right:0;bottom:-3px;width:100%;height:100%;object-fit:contain;object-position:bottom right;-webkit-mask-image:linear-gradient(to right,transparent 0%,black 18%,black 100%),linear-gradient(to top,black 87%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,black 18%,black 100%);filter:contrast(1.12) saturate(1.2)}
.hero-art-glow{position:absolute;right:-22%;bottom:2%;height:450px;width:550px;border-radius:60%;background:var(--red);filter:blur(110px);opacity:.32}
.hero-art-stamp{position:absolute;right:5%;bottom:17%;font:18px/1.05 var(--marker);color:white;transform:rotate(-10deg);text-align:center;text-shadow:1px 2px 5px black;opacity:.92;display:none}
.hero-edge{position:absolute;z-index:6;bottom:-1px;height:15px;left:0;right:0;background:var(--cream);clip-path:polygon(0 32%,3% 45%,6% 14%,10% 38%,15% 13%,18% 39%,22% 26%,24% 44%,29% 14%,33% 38%,36% 19%,39% 44%,45% 18%,48% 41%,53% 20%,57% 46%,63% 23%,68% 42%,73% 16%,78% 45%,81% 19%,87% 39%,92% 12%,98% 39%,100% 21%,100% 100%,0 100%)}
.services{background:var(--cream);color:#101010;padding:61px 0 64px}
.section-header{display:flex;justify-content:space-between;gap:30px;align-items:flex-end}
.section-header .eyebrow{font-size:15px;margin-bottom:12px}
.rock-heading{font:900 clamp(54px,6vw,94px)/.87 var(--heading);text-transform:uppercase;letter-spacing:-.012em;margin:0}
.rock-heading em{font-style:normal;color:var(--red)}
.section-lead{max-width:340px;margin:0 0 5px;color:#3d3b3b;font-size:16px;line-height:1.55}
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:33px}
.service-card{min-width:0;padding:12px 25px 9px 0;position:relative}
.service-card:not(:first-child){padding-left:25px}
.service-card:not(:first-child)::before{content:"";position:absolute;left:0;top:10px;bottom:5px;width:1px;background:#f11b4e}
.service-icon{width:55px;height:55px;color:var(--red);margin-bottom:8px}
.service-card h3{font:900 29px/.95 var(--heading);margin:0 0 10px}
.service-card p{font-size:14px;line-height:1.5;color:#3d3b3b;max-width:244px;margin:0}
.work{background:#090909;padding:70px 0 82px;position:relative;isolation:isolate}
.work::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.5}
.work-header{align-items:center;margin-bottom:33px}
.work .rock-heading{font-size:clamp(58px,6.2vw,101px)}
.work-title-sub{font-size:.62em;display:block;letter-spacing:0}
.work-aside{font:22px/.95 var(--marker);color:#f6f6f6;transform:rotate(8deg);opacity:.8}
.work-swipe-hint{display:none}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.project{display:block;min-width:0;border:1px solid #383838;overflow:hidden;background:#090909;transition:transform .25s,border-color .25s}
.project:hover,.project:focus-visible{transform:translateY(-6px);border-color:var(--red);outline:none}
.project-visual{aspect-ratio:1.6;overflow:hidden;background:#242424}
.project-visual img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.project:hover .project-visual img,.project:focus-visible .project-visual img{transform:scale(1.06)}
.project-caption{min-height:77px;display:flex;align-items:center;justify-content:space-between;padding:12px 17px;gap:14px}
.project-caption strong{display:block;font:900 22px/1 var(--heading);letter-spacing:.01em}
.project-caption small{display:block;margin-top:5px;font:700 12px/1.2 var(--heading);color:#a09c9c;letter-spacing:.075em}
.project-arrow{font-size:28px;line-height:1;color:var(--red)}
.about{background:var(--cream);color:var(--black);overflow:hidden}
.about-grid{display:grid;grid-template-columns:40% 60%;gap:20px;align-items:center;min-height:350px}
.about-shout{position:relative;font:900 clamp(60px,7.1vw,110px)/.78 var(--heading);letter-spacing:-.01em;transform:rotate(-8deg);padding:22px 30px 22px 0}
.about-shout>span{display:block}.about-shout .red{color:var(--red)}
.about-shout i{color:var(--red);position:absolute;right:16%;top:0;font:70px/.8 var(--marker);transform:rotate(20deg)}
.about-copy{padding:55px 8% 50px 0}
.about .rock-heading{font-size:clamp(54px,5.5vw,81px);margin-bottom:20px}
.about-copy p:not(.eyebrow){font-size:17px;line-height:1.6;max-width:570px;margin:0 0 9px}
.about-copy .about-manifesto{font:700 24px/1.35 var(--marker);color:var(--red);margin:12px 0 0}
.contact{position:relative;isolation:isolate;overflow:hidden;background:var(--red);color:var(--black);padding:56px 0 55px}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 90%,rgba(255,255,255,.16),transparent 35%),repeating-linear-gradient(-19deg,transparent 0,transparent 31px,rgba(0,0,0,.055) 32px,transparent 33px)}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:end;gap:8%}
.eyebrow--dark{color:#0b0b0b}
.contact .rock-heading{font-size:clamp(65px,7vw,106px);line-height:.84}
.contact .rock-heading span{color:white}
.contact-subtitle{font-size:17px;max-width:480px;margin:21px 0 22px}
.contact-details{border-left:2px solid #101010;padding:10px 0 0 35px}
.contact-email{display:block;font:900 clamp(25px,3.1vw,44px)/1.2 var(--heading);overflow-wrap:anywhere;border-bottom:1px solid rgba(0,0,0,.3);padding-bottom:11px}
.contact-email:hover{text-decoration:underline}
.contact-phone{display:block;margin:12px 0 27px;font:800 28px/1.1 var(--heading)}
.contact-phone:hover{text-decoration:underline}
.company-details{display:flex;flex-direction:column;font-size:14px;gap:4px}.company-details strong{font-weight:800}.company-details address{font-style:normal}
.site-footer{background:#080808;border-top:1px solid #313131}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:111px}
.footer-brand{width:91px;flex:none}.footer-brand img{height:auto;width:100%}
.footer-grid>span{font:700 14px/1.2 var(--heading);letter-spacing:.07em;color:#bfbfbf}
.footer-grid>a:last-child{font:800 15px/1 var(--heading);letter-spacing:.1em}
.footer-grid>a:last-child:hover{color:var(--red)}
.lightbox{padding:0;border:0;background:transparent;color:white;max-width:min(1040px,calc(100vw - 45px));max-height:calc(100vh - 36px);overflow:visible}
.lightbox::backdrop{background:rgba(0,0,0,.94);backdrop-filter:blur(7px)}
.lightbox-inner{position:relative;background:#111;border:1px solid #555;padding:12px}
.lightbox-inner img{width:100%;max-height:calc(100vh - 175px);object-fit:contain;background:black}
.lightbox-close{z-index:2;position:absolute;right:-14px;top:-17px;width:46px;height:46px;background:var(--red);color:white;border:0;font-size:22px;font-weight:700;display:grid;place-items:center}
.lightbox-meta{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:13px 4px 4px}
.lightbox-meta strong{font:900 28px/1 var(--heading)}.lightbox-meta span{color:#aaa;font-size:13px}
@media (min-width:1500px){.hero h1{font-size:117px}}
@media (max-width:1100px){.container{width:min(var(--container),calc(100% - 64px))}.main-nav{gap:20px}.nav-contact{margin-left:0}.brand{width:115px}.hero h1{font-size:clamp(68px,8.3vw,98px)}.hero-art{width:60vw;right:-36px}.service-card{padding-right:16px}.service-card:not(:first-child){padding-left:16px}}
@media (max-width:820px){
 .container{width:calc(100% - 42px)}
 .nav-wrap{min-height:92px}.brand{width:107px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;background:#151515;border:1px solid #454545;border-radius:0;width:48px;height:44px;padding:10px;z-index:60}.menu-toggle span{display:block;height:2px;background:white;width:100%;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(8px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-8px) rotate(-45deg)}
 .main-nav{display:none;position:absolute;left:0;right:0;top:85px;padding:20px 24px 25px;background:#141414;box-shadow:0 15px 22px rgba(0,0,0,.5);flex-direction:column;align-items:stretch;gap:20px;border-top:2px solid var(--red)}
 .main-nav.is-open{display:flex}.main-nav>a:not(.button){font-size:23px}.nav-contact{width:100%}
 .hero{min-height:720px}.hero-layout{display:block;min-height:720px;padding-top:135px;padding-bottom:68px}.hero-copy{z-index:5}.hero h1{font-size:clamp(67px,11vw,95px)}.hero-description{max-width:410px;font-size:18px}.hero-art{width:62vw;min-width:460px;right:-105px;height:575px;opacity:.72}.chimp{filter:contrast(1.25) saturate(1.2);-webkit-mask-image:linear-gradient(to right,transparent,black 39%);mask-image:linear-gradient(to right,transparent,black 39%)}.hero-actions{max-width:440px}
 .services{padding:50px 0}.services-grid{grid-template-columns:repeat(2,1fr);row-gap:30px}.service-card:nth-child(3){padding-left:0}.service-card:nth-child(3)::before{display:none}.service-card:nth-child(2n){padding-left:25px}
 .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-caption{min-height:68px}.about-grid{grid-template-columns:40% 60%}.about-shout{font-size:clamp(45px,7vw,70px)}.about-copy{padding-right:0}.contact-grid{grid-template-columns:1fr 1fr;gap:5%}.contact-email{font-size:28px}
}
@media(max-width:590px){
 html{scroll-padding-top:60px}.container{width:calc(100% - 36px)}.nav-wrap{min-height:80px}.brand{width:94px}.main-nav{top:75px}
 .hero{min-height:730px}.hero-layout{min-height:730px;padding-top:124px;padding-bottom:38px}
 .hero .eyebrow{font-size:13px;margin-bottom:22px}.hero h1{font-size:clamp(62px,14.5vw,91px);margin-bottom:19px;white-space:normal}.hero-description{font-size:16px;max-width:330px;margin-bottom:23px}.hero-actions{align-items:flex-start;gap:11px;flex-direction:column}.hero-actions .button{min-width:214px;padding:14px 20px;min-height:46px;font-size:16px}
 .hero-art{min-width:0;width:103vw;height:430px;bottom:0;right:-95px;opacity:.79}.chimp{-webkit-mask-image:linear-gradient(to right,transparent 1%,black 25%);mask-image:linear-gradient(to right,transparent 1%,black 25%)}
 .services{padding:43px 0 49px}.section-header{display:block}.rock-heading{font-size:clamp(51px,12vw,77px)}.section-lead{margin-top:17px;font-size:15px}
 .services-grid{margin-top:25px;gap:19px 0}.service-card{padding:0 15px 0 0}.service-card:not(:first-child){padding-left:14px}.service-card:nth-child(3){padding-left:0}.service-card:nth-child(2n){padding-left:14px}.service-icon{width:45px;height:45px;margin-bottom:8px}.service-card h3{font-size:23px}.service-card p{font-size:13px}.service-card:not(:first-child)::before{top:0;bottom:0}
 .work{padding:48px 0 55px}.work .rock-heading{font-size:clamp(49px,10.7vw,75px)}.work-title-sub{font-size:.69em}.work-aside{display:none}.work-header{margin-bottom:20px}.work-swipe-hint{display:flex;gap:12px;justify-content:flex-end;color:var(--red);font:800 13px/1 var(--heading);letter-spacing:.06em;margin:-2px 0 12px}
 .project-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:thin;scrollbar-color:var(--red) #181818;padding-bottom:12px;margin-right:-18px;overscroll-behavior-x:contain}.project{min-width:79vw;max-width:79vw;scroll-snap-align:start;flex-shrink:0}.project-visual{aspect-ratio:1.5}.project-caption{min-height:73px}
 .about-grid{grid-template-columns:1fr;gap:0;padding-top:41px;padding-bottom:44px}.about-shout{display:none}.about-copy{padding:0}.about .rock-heading{font-size:65px}.about-copy p:not(.eyebrow){font-size:16px}.about-copy .about-manifesto{font-size:22px}
 .contact{padding:42px 0 43px}.contact-grid{grid-template-columns:1fr;gap:35px}.contact .rock-heading{font-size:clamp(65px,14vw,95px)}.contact-subtitle{font-size:16px}.contact-details{padding:22px 0 0;border-left:0;border-top:2px solid #101010}.contact-email{font-size:31px}.contact-phone{font-size:26px}.company-details{font-size:14px}
 .footer-grid{min-height:92px;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:16px 0}.footer-brand{width:72px}.footer-grid>span{order:3;width:100%;text-align:center;font-size:12px}
 .lightbox{max-width:calc(100vw - 20px)}.lightbox-inner{padding:6px}.lightbox-close{right:0;top:-44px}.lightbox-meta{display:block}.lightbox-meta span{display:block;margin-top:5px}
}
@media(max-width:365px){.hero h1{font-size:58px}.hero-actions .button{font-size:14px}.project{min-width:85vw;max-width:85vw}.contact-email{font-size:27px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* KMA | HERO 2026-11-03 — akceptowana małpa wtopiona w tło, bez ramki.
   Zmieniona wyłącznie sekcja HERO. Portfolio, copy, menu i kontakt bez zmian. */
.hero {
  background:radial-gradient(ellipse at 78% 68%,rgba(255,20,82,.14),transparent 48%),
    linear-gradient(125deg,#0a0a0a 28%,#101010 100%);
}
.hero::after{opacity:.48;z-index:2}
.hero-art {
  width:min(64vw,1150px);
  height:auto;
  aspect-ratio:1114 / 634;
  right:min(-48px,calc((1220px - 100vw)/2));
  bottom:0;
  pointer-events:none;
  z-index:1;
}
.hero-art .chimp {
  position:relative;
  right:auto;
  bottom:auto;
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:bottom right;
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
}
.hero-copy {z-index:6}
@media(max-width:1100px){
  .hero-art{width:82vw;right:-17vw;bottom:0;opacity:.83}
}
@media(max-width:820px){
  .hero-art{width:99vw;right:-24vw;bottom:0;min-width:0;height:auto;opacity:.57}
  .hero-art .chimp{filter:none;-webkit-mask-image:none;mask-image:none}
}
@media(max-width:590px){
  .hero-art{width:132vw;right:-51vw;bottom:0;opacity:.46}
  .hero{background:radial-gradient(ellipse at 80% 85%,rgba(255,20,82,.20),transparent 47%),#0a0a0a}
  .hero::after{opacity:.36}
}
