@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--black:#080808;--white:#fff;--paper:#f5f5f3;--muted:#777;--line:#dededb;--max:1240px;--header:170px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 18px)}
body{margin:0;background:var(--white);color:var(--black);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-header{height:var(--header);position:sticky;top:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);background:rgba(255,255,255,.74);backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.08)}
.brand{display:flex;align-items:center;width:200px;height:140px;overflow:hidden}
.brand-logo{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px);font-size:15px;font-weight:600}
.main-nav a{transition:opacity .2s}.main-nav a:hover{opacity:.55}
.nav-contact{border:1px solid var(--black);padding:12px 15px}.nav-contact span{margin-left:12px}
.menu-toggle{display:none;background:none;border:0;padding:10px}
.hero{min-height:650px;max-width:var(--max);margin:auto;padding:105px 5vw 80px;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:5vw;position:relative}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0 0 24px}
.eyebrow-line{width:26px;height:1px;background:currentColor}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Manrope,Arial,sans-serif;letter-spacing:-.065em;font-weight:500}
h1{font-size:clamp(58px,5.8vw,96px);line-height:.98;margin:0 0 28px}
h1 span,h2 span{color:#8b8b88}
.hero-lead{font-size:17px;line-height:1.8;max-width:540px;color:#555;margin-bottom:32px}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.button{display:inline-flex;gap:28px;align-items:center;padding:17px 20px;font-size:12px;font-weight:700}
.button-dark{background:var(--black);color:var(--white)}
.text-link{display:inline-flex;gap:16px;align-items:center;font-size:12px;font-weight:700;border-bottom:1px solid var(--black);padding-bottom:8px}
.hero-mark{width:min(100%,380px);aspect-ratio:1;justify-self:end;position:relative;display:grid;place-items:center;background:var(--paper)}
.hero-mark-frame{width:76%;height:76%;border:1px solid #c9c9c5;padding:28px;display:flex;flex-direction:column;justify-content:center}
.hero-number{font:500 clamp(80px,11vw,145px)/.85 Manrope,sans-serif;letter-spacing:-.1em}
.hero-number-label{font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-top:16px}
.mark-rule{width:100%;height:1px;background:#bcbcb8;margin:24px 0}
.hero-mark-frame p{font:500 24px/1.15 Manrope,sans-serif;letter-spacing:-.04em;margin:0}
.hero-corner{position:absolute;width:16px;height:16px;border-color:#111}
.corner-a{top:12px;left:12px;border-top:1px solid;border-left:1px solid}.corner-b{top:12px;right:12px;border-top:1px solid;border-right:1px solid}.corner-c{bottom:12px;left:12px;border-bottom:1px solid;border-left:1px solid}.corner-d{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid}
.scroll-cue{position:absolute;bottom:28px;left:5vw;display:flex;align-items:center;gap:12px;color:#777;font-size:10px;letter-spacing:.06em}
.scroll-dot{width:6px;height:6px;border-radius:50%;background:#111}
.intro-strip{background:var(--black);color:white;display:flex;align-items:center;justify-content:space-between;padding:22px max(5vw,24px);gap:20px}
.intro-strip p{font:500 15px Manrope,sans-serif;margin:0}.intro-strip span{font-size:10px;color:#aaa;letter-spacing:.08em}
.section{max-width:var(--max);margin:0 auto;padding:110px 5vw}
.section-heading{max-width:700px;margin-bottom:52px}
.section-heading h2,.about-section h2,.contact-section h2{font-size:clamp(42px,6vw,72px);line-height:1.04;margin:0 0 24px}
.section-intro{font-size:14px;line-height:1.8;color:#666;max-width:440px;margin:0}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service-card{padding:30px 28px 34px;min-height:255px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;transition:background .25s}
.service-card:hover{background:var(--paper)}
.icon-circle{width:52px;height:52px;border:1px solid #111;border-radius:50%;display:grid;place-items:center;margin-bottom:24px}
.icon-circle svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-index{position:absolute;right:26px;top:34px;color:#aaa;font-size:10px}
.service-card h3{font:600 18px Manrope,sans-serif;letter-spacing:-.04em;margin-bottom:12px}
.service-card p{font-size:12px;line-height:1.8;color:#666;margin:0;max-width:280px}
.portfolio-section{max-width:none;background:var(--paper)}
.portfolio-section>.section-heading,.portfolio-tabs,.portfolio-grid{max-width:var(--max);margin-left:auto;margin-right:auto}
.section-heading-row{display:flex;justify-content:space-between;align-items:end;gap:40px}
.section-heading-row .section-intro{max-width:330px;margin-bottom:8px}
.portfolio-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px!important}
.portfolio-tab{border:1px solid #d4d4d0;background:transparent;padding:11px 16px;font-size:11px;cursor:pointer}
.portfolio-tab:hover,.portfolio-tab.is-active{background:var(--black);color:white;border-color:var(--black)}
.portfolio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.portfolio-item{position:relative;border:0;padding:0;background:#e7e7e4;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;text-align:left}
.portfolio-item[hidden]{display:none}
.portfolio-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s}
.portfolio-item:hover img{transform:scale(1.04)}
.portfolio-item-overlay{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;padding:22px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:white;font-size:11px;opacity:0;transition:opacity .2s}
.portfolio-item:hover .portfolio-item-overlay,.portfolio-item:focus-visible .portfolio-item-overlay{opacity:1}
.portfolio-item-overlay b{font-size:18px}
.portfolio-empty{grid-column:1/-1;min-height:250px;border:1px dashed #c7c7c2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}
.empty-icon{font-size:32px;margin-bottom:14px}.portfolio-empty h3{font:600 20px Manrope,sans-serif;margin-bottom:10px}.portfolio-empty p{font-size:12px;line-height:1.8;color:#666;max-width:540px}.portfolio-empty code{background:#e6e6e2;padding:3px 5px}
.experience-section{background:var(--black);color:white;padding:95px max(8vw,30px);display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center}
.experience-number{font:500 clamp(100px,18vw,220px)/.8 Manrope,sans-serif;letter-spacing:-.1em}.experience-number span{font-size:.35em;vertical-align:top;letter-spacing:0}
.experience-copy{max-width:580px}.experience-copy .eyebrow{color:#aaa}.experience-copy h2{font:500 clamp(35px,5vw,58px)/1.08 Manrope,sans-serif;letter-spacing:-.06em;margin-bottom:24px}.experience-copy p:last-child{font-size:13px;line-height:1.9;color:#bdbdbd;margin:0}
.about-section{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;align-items:center}
.about-symbol{aspect-ratio:1;background:var(--paper);display:flex;align-items:center;justify-content:center;font:500 clamp(90px,13vw,160px)/1 Manrope,sans-serif;letter-spacing:-.14em}
.about-symbol span+span{color:#999;margin-left:-.04em}
.about-section>div:last-child{max-width:570px}.about-section h2{font-size:clamp(38px,5vw,62px)}.about-section p:not(.eyebrow){font-size:14px;line-height:1.9;color:#666;margin-bottom:26px}
.contact-section{max-width:none;background:var(--paper);display:grid;grid-template-columns:1.1fr .9fr;gap:8vw;align-items:center}
.contact-section>.contact-copy,.contact-panel{max-width:var(--max);width:100%;margin:auto}
.contact-copy>p:not(.eyebrow){max-width:430px;color:#666;font-size:14px;line-height:1.8}
.contact-panel{background:white;padding:35px;max-width:480px}
.contact-note{font-size:11px;color:#777;margin-bottom:24px}.contact-line{display:flex;justify-content:space-between;gap:12px;padding:17px 0;border-bottom:1px solid var(--line);font:500 18px Manrope,sans-serif;overflow-wrap:anywhere}.contact-line span{font-size:15px}
.small-note{font-size:10px;color:#888;line-height:1.6;margin:20px 0 0}
.site-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px max(5vw,24px);background:white;font-size:10px;color:#777}
.footer-brand{font:600 20px Manrope,sans-serif;letter-spacing:-.07em;color:#111}.footer-brand span{font-size:9px;vertical-align:top;margin-left:3px}.back-top{color:#111}
.lightbox{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.94);align-items:center;justify-content:center;padding:60px 80px}
.lightbox.is-open{display:flex}.lightbox img{max-width:100%;max-height:100%;object-fit:contain}.lightbox button{position:absolute;border:1px solid #777;background:rgba(0,0,0,.2);color:white;width:44px;height:44px;cursor:pointer;font-size:22px}.lightbox-close{top:20px;right:20px}.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
@media(max-width:900px){:root{--header:74px}.main-nav{gap:13px;font-size:11px}.brand{width:130px}.hero{min-height:560px;padding-top:80px}.hero-mark{width:300px}.service-grid{grid-template-columns:repeat(2,1fr)}.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.site-header{padding:0 20px}.brand{width:155px;height:75px}.menu-toggle{display:flex;flex-direction:column;gap:6px}.menu-toggle span{display:block;width:25px;height:1px;background:#111}.main-nav{display:none;position:absolute;top:var(--header);left:0;right:0;background:white;border-bottom:1px solid var(--line);padding:18px 22px 24px;flex-direction:column;align-items:stretch;gap:0}.main-nav.is-open{display:flex}.main-nav a{padding:14px 0;border-bottom:1px solid #eee;font-size:13px}.main-nav .nav-contact{padding:14px;margin-top:12px;border:1px solid #111}.hero{display:flex;flex-direction:column;align-items:stretch;padding:70px 24px 85px;gap:42px}.hero h1{font-size:clamp(58px,15vw,86px)}.hero-lead{font-size:15px}.hero-mark{width:100%;max-width:360px;align-self:center}.scroll-cue{left:24px;bottom:25px}.intro-strip{align-items:flex-start;flex-direction:column;padding:22px 24px;gap:7px}.intro-strip span{line-height:1.7}.section{padding:75px 24px}.section-heading{margin-bottom:34px}.section-heading h2,.about-section h2,.contact-section h2{font-size:clamp(40px,11vw,58px)}.service-grid{grid-template-columns:1fr}.service-card{min-height:220px;padding:25px}.section-heading-row{display:block}.section-heading-row .section-intro{margin-top:20px}.portfolio-grid{grid-template-columns:1fr;gap:10px}.portfolio-item{aspect-ratio:4/3}.portfolio-item-overlay{opacity:1}.experience-section{grid-template-columns:1fr;gap:35px;padding:70px 24px}.experience-number{font-size:145px}.about-section{grid-template-columns:1fr;gap:35px}.about-symbol{max-width:360px;width:100%;margin:auto}.contact-section{grid-template-columns:1fr;gap:25px;padding:75px 24px}.contact-panel{padding:24px}.contact-line{font-size:16px}.site-footer{padding:24px;flex-wrap:wrap}.site-footer>span{order:3;width:100%}.lightbox{padding:60px 18px}.lightbox-prev{left:8px}.lightbox-next{right:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}


/* BESTGRAF — sekcja druku: style odizolowane od reszty strony */
.experience-section {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(76px, 8vw, 124px) max(5vw, calc((100vw - 1320px) / 2));
  background: #080808;
  color: #fff;
  overflow: hidden;
}
.experience-section .print-layout {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.experience-section .print-display,
.experience-section .print-copy { min-width: 0; }
.experience-section .print-display .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #c8c8c8;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 38px;
}
.experience-section .print-accent-line { display: inline-block; flex: 0 0 34px; width: 34px; height: 2px; background: #fff; }
.experience-section .print-bigword {
  font: 700 clamp(100px, 12vw, 176px)/.9 Manrope, Arial, sans-serif;
  letter-spacing: -.095em;
  margin: 0 0 34px;
  color: #fff;
  white-space: nowrap;
}
/* Kolory CMYK w dużym napisie DRUK */
.experience-section .print-bigword .cmyk-c { color: #00AEEF; }
.experience-section .print-bigword .cmyk-m { color: #EC008C; }
.experience-section .print-bigword .cmyk-y { color: #FFF200; }
.experience-section .print-bigword .cmyk-k { color: #fff; }
.experience-section .print-bigword .print-dot { color: #999; }
.experience-section .print-display h2 {
  font: 500 clamp(36px, 3.8vw, 60px)/1.04 Manrope, Arial, sans-serif;
  letter-spacing: -.06em;
  margin: 0;
}
.experience-section .print-display h2 span { color: #777; }
/* Cztery wyeksponowane kafle usług drukarskich */
.experience-section .print-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 620px;
  margin-top: 36px;
}
.experience-section .print-tags span {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 62px;
  box-sizing: border-box;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #080808;
  font-size: clamp(10px, .9vw, 13px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.experience-section .print-tags span:hover { transform: translateY(-3px); filter: brightness(1.06); }
.experience-section .print-tags .tag-folie { background: #00AEEF; }
.experience-section .print-tags .tag-banery { background: #EC008C; }
.experience-section .print-tags .tag-plansze { background: #FFF200; }
.experience-section .print-tags .tag-uv { background: #fff; }
.experience-section .print-copy { width: 100%; max-width: 600px; justify-self: end; }
.experience-section .print-kicker { color: #aaa; font-size: 11px; line-height: 1.6; letter-spacing: .16em; font-weight: 700; margin: 0 0 22px; }
.experience-section .print-copy h3 {
  font: 500 clamp(32px, 3.4vw, 48px)/1.1 Manrope, Arial, sans-serif;
  letter-spacing: -.05em;
  margin: 0 0 24px;
  color: #fff;
}
.experience-section .print-copy > p:not(.print-kicker) { color: #c5c5c5; font-size: 17px; line-height: 1.85; margin: 0 0 30px; max-width: 600px; }
.experience-section .print-detail { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; border-top: 1px solid #383838; padding: 23px 0; }
.experience-section .print-detail-number { color: #888; font-size: 12px; letter-spacing: .08em; padding-top: 3px; }
.experience-section .print-detail h4 { color: #fff; font-size: 19px; line-height: 1.35; font-weight: 600; margin: 0 0 8px; }
.experience-section .print-detail p { color: #aaa; font-size: 15px; line-height: 1.8; margin: 0; }
.experience-section .print-cta { display: inline-flex; align-items: center; gap: 24px; margin-top: 22px; padding: 0 0 10px; border-bottom: 1px solid #fff; color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; }
.experience-section .print-cta span { font-size: 17px; transition: transform .2s ease; }
.experience-section .print-cta:hover span { transform: translate(3px, -3px); }
@media (max-width: 760px) {
  .experience-section { padding: 68px 24px; }
  .experience-section .print-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .experience-section .print-display .eyebrow { margin-bottom: 28px; }
  .experience-section .print-bigword { font-size: clamp(86px, 20vw, 140px); margin-bottom: 28px; }
  .experience-section .print-display h2 { font-size: clamp(36px, 8.5vw, 50px); }
  .experience-section .print-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; gap: 8px; margin-top: 28px; }
  .experience-section .print-tags span { min-height: 58px; padding: 12px; font-size: 12px; }
  .experience-section .print-copy h3 { font-size: 32px; }
  .experience-section .print-copy > p:not(.print-kicker) { font-size: 16px; }
}


/* Sekcja cięcia ploterowego — jasnoszary pas między drukiem a sekcją O mnie */
.plotter-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(72px, 8vw, 116px) max(5vw, calc((100vw - 1320px) / 2));
  background: #f1f1ef;
  color: #080808;
}
.plotter-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
.plotter-intro { min-width: 0; }
.plotter-intro .eyebrow { display: flex; align-items: center; gap: 12px; color: #555; margin-bottom: 30px; }
.plotter-line { display: inline-block; width: 32px; height: 2px; background: #080808; }
.plotter-intro h2 {
  font: 500 clamp(48px, 6.2vw, 82px)/.98 Manrope, Arial, sans-serif;
  letter-spacing: -.075em;
  margin: 0 0 28px;
}
.plotter-intro h2 span { color: #8c8c88; }
.plotter-lead { max-width: 440px; font: 500 clamp(20px, 2vw, 26px)/1.35 Manrope, Arial, sans-serif; letter-spacing: -.035em; margin: 0 0 16px; }
.plotter-description { max-width: 460px; color: #666; font-size: 14px; line-height: 1.85; margin: 0 0 28px; }
.plotter-cta { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 9px; border-bottom: 1px solid #080808; font-size: 12px; font-weight: 700; }
.plotter-cta span { font-size: 17px; transition: transform .2s ease; }
.plotter-cta:hover span { transform: translate(3px, -3px); }
.plotter-services { border-top: 1px solid #d2d2ce; }
.plotter-service { display: grid; grid-template-columns: 34px minmax(0, 1fr) 58px; align-items: start; gap: 18px; padding: 26px 0; border-bottom: 1px solid #d2d2ce; }
.plotter-index { padding-top: 3px; color: #888; font-size: 11px; letter-spacing: .08em; }
.plotter-service h3 { margin: 0 0 8px; font: 600 19px/1.3 Manrope, Arial, sans-serif; letter-spacing: -.035em; }
.plotter-service p { max-width: 520px; margin: 0; color: #666; font-size: 14px; line-height: 1.8; }
.plotter-swatch { display: block; width: 54px; height: 54px; border: 1px solid rgba(0,0,0,.12); }
.swatch-economy { background: linear-gradient(135deg,#e9e9e6 0 49%,#d4d4d0 50% 100%); }
.swatch-premium { background: linear-gradient(135deg,#222 0 49%,#444 50% 100%); }
.swatch-frost { background: repeating-linear-gradient(135deg,#e5e5e2 0 5px,#f8f8f6 5px 10px); }
@media (max-width: 760px) {
  .plotter-section { padding: 68px 24px; }
  .plotter-inner { grid-template-columns: minmax(0,1fr); gap: 42px; }
  .plotter-intro h2 { font-size: clamp(50px, 13vw, 72px); }
  .plotter-service { grid-template-columns: 28px minmax(0,1fr) 42px; gap: 12px; padding: 22px 0; }
  .plotter-swatch { width: 40px; height: 40px; }
  .plotter-service h3 { font-size: 17px; }
  .plotter-service p { font-size: 13px; }
}
.plotter-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 0;
}

.plotter-service {
    grid-template-columns: 34px minmax(0, 1fr) 180px;
    align-items: center;
}

@media (max-width: 760px) {
    .plotter-service {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .plotter-image {
        grid-column: 2;
        width: 100%;
        max-height: 220px;
    }
}
.plotter-image {
    display: block;
    width: 180px;
    height: 135px;
    object-fit: cover;
    pointer-events: none;
    border: 0;
}
/* Sekcja O mnie — większy odstęp między wierszami */
.about-section p:not(.eyebrow) {
    line-height: 1.9;
}

.about-section .process-item p {
    line-height: 1.8;
}


/* BESTGRAF — subtelne separatory CMYK, 2 px wysokości */
/* Celowo pomijamy .hero, aby nie ingerować w grafikę sekcji głównej. */
.section:not(.hero),
.intro-strip,
.experience-section,
.plotter-section {
  position: relative;
}

.section:not(.hero)::before,
.intro-strip::before,
.experience-section::before,
.plotter-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background: linear-gradient(to right,
    #00AEEF 0%, #00AEEF 25%,
    #EC008C 25%, #EC008C 50%,
    #FFF200 50%, #FFF200 75%,
    #111111 75%, #111111 100%);
  pointer-events: none;
  z-index: 1;
}


/* BESTGRAF — wspólna szerokość układu (uzupełnienie reguł bazowych). */
:root{--content-width:1240px}
@media(min-width:761px){
  .site-header,.site-footer,.intro-strip{padding-left:max(5vw,calc((100vw - var(--content-width))/2));padding-right:max(5vw,calc((100vw - var(--content-width))/2))}
  .hero.section,.section.services-section,.about-section.section,.plotter-section,.experience-section,.portfolio-section,.druk-dtp-section{padding-left:max(5vw,calc((100vw - var(--content-width))/2));padding-right:max(5vw,calc((100vw - var(--content-width))/2))}
  .experience-section .print-layout,.plotter-section .plotter-inner{max-width:var(--content-width)}
}

/* ===== Styles previously embedded in index.php (original order preserved) ===== */

/* Tło hero rozciągnięte na całą szerokość okna przeglądarki.
       Pliki graficzne: backgrounds/*.jpg */
    .hero {
      position: relative;
      isolation: isolate;
      background: transparent;
      box-sizing: border-box;
      height: 750px;
    }
    /* Biały nagłówek dla ciemnego zdjęcia w tle; wyróżniony drugi wiersz pozostaje szary. */
    .hero-copy h1 {
      color: #fff !important;
    }
    .hero-copy h1 span {
      color: #c4c4c4 !important;
      /* Trzymaj „robi różnicę.” w jednym wierszu przy zmianie szerokości okna. */
      white-space: nowrap;
    }
    /* Jasne teksty pomocnicze, czytelne na ciemnym zdjęciu hero. */
    .hero-copy .eyebrow {
      color: #f0f0f0 !important;
    }
    .hero-copy .eyebrow-line {
      background-color: #f0f0f0 !important;
    }
    .hero-copy .hero-lead {
      color: #e5e5e5 !important;
    }
    .hero-copy .text-link {
      color: #ffffff !important;
      border-color: rgba(255, 255, 255, 0.7) !important;
    }
    .hero-copy .scroll-cue,
    .hero .scroll-cue {
      color: #dedede !important;
    }
    .hero .scroll-dot {
      background-color: #ffffff !important;
    }
    .hero-bg-rotator {
      position: absolute;
      z-index: -1;
      top: 0;
      bottom: 0;
      left: calc((100% - 100vw) / 2);
      width: 100vw;
      overflow: hidden;
      pointer-events: none;
      background: #171717;
    }
    .hero-bg-slide {
      position: absolute;
      inset: 0;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1.015);
      transition: opacity 2400ms ease-in-out;
      will-change: opacity, transform;
    }
    .hero-bg-slide.is-visible {
      opacity: 1;
    }
    .hero-bg-slide.is-zooming {
      /* Zoom trwa dłużej niż samo wyświetlanie; nie kończy się w trakcie przejścia. */
      animation: heroCinematicZoom 12400ms linear forwards;
    }
    @keyframes heroCinematicZoom {
      from { transform: scale(1.015); }
      to { transform: scale(1.22); }
    }
    .hero-bg-rotator::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.48) 48%, rgba(0,0,0,.52) 100%), rgba(0,0,0,.18);
      pointer-events: none;
    }
    @media (max-width: 760px) {
      .hero {
        height: auto;
        min-height: 760px;
      }
      .hero-bg-slide { background-position: center center; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-bg-slide { transition: none; }
      .hero-bg-slide.is-visible { opacity: 1; }
      .hero-bg-slide.is-zooming { animation: none; transform: scale(1.05); }
    }

    /* BESTGRAF — kinetyczna typografia 23+ na półprzezroczystym białym polu */
    .hero-mark { perspective: 900px; }
    .hero-mark-frame {
      position: relative;
      box-sizing: border-box;
      min-height: 100%;
      background: rgba(255, 255, 255, .9);
      transform-style: preserve-3d;
      overflow: hidden;
    }
    .hero-number {
      position: relative;
      display: inline-block;
      width: max-content;
      max-width: 100%;
      color: #111;
      letter-spacing: -.085em !important;
      line-height: .9 !important;
      transform: translate3d(var(--num-x, 0px), var(--num-y, 0px), 0) rotateX(var(--num-rx, 0deg)) rotateY(var(--num-ry, 0deg));
      transition: transform 100ms cubic-bezier(.2,.7,.2,1), text-shadow 120ms ease;
      z-index: 2;
      will-change: transform;
      isolation: isolate;
    }
    .hero-number::before,
    .hero-number::after {
      content: attr(data-text);
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: transform 100ms cubic-bezier(.16,.8,.25,1), opacity 100ms ease;
      z-index: 3;
      mix-blend-mode: multiply;
    }
    .hero-number::before { color: #00AEEF; transform: translate(-8px, 0); }
    .hero-number::after { color: #EC008C; transform: translate(8px, 0); }
    .hero-mark.is-active .hero-number::before { opacity: .86; transform: translate(calc(var(--chrom-x, -8px)), calc(var(--chrom-y, 2px))); }
    .hero-mark.is-active .hero-number::after { opacity: .82; transform: translate(calc(var(--chrom-x2, 8px)), calc(var(--chrom-y2, -2px))); }
    .hero-mark.is-active .hero-number {
  text-shadow: none !important;
}
    .hero-number-label {
      position: absolute;
      left: 0;
      right: 0;
      bottom: clamp(22px, 4%, 42px);
      width: 100%;
      margin: 0;
      text-align: center;
      z-index: 4;
    }
    .hero-mark-frame .mark-rule,
    .hero-mark-frame > p { display: none !important; }
    /* Trzecia warstwa CMYK — żółty, odsunięty niezależnie od cyjanu i magenty. */
    .hero-number-yellow {
      position: absolute;
      inset: 0;
      color: #FFF200;
      opacity: 0;
      pointer-events: none;
      z-index: -1;
      transform: translate(var(--yellow-x, 0px), var(--yellow-y, 0px));
      transition: transform 220ms ease, opacity 220ms ease;
      mix-blend-mode: multiply;
    }
    .hero-mark.is-active .hero-number-yellow {
      opacity: .9;
      transform: translate(var(--yellow-x, -2px), var(--yellow-y, 8px));
    }
    @media (hover: none), (prefers-reduced-motion: reduce) {
      .hero-number, .hero-number::before, .hero-number::after { transition: none; }
      .hero-number::before, .hero-number::after { display: none; }
    }

/* Projektowanie graficzne — odrębna, redakcyjna kompozycja */
    .design-section {
      display: grid;
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
      gap: clamp(48px, 8vw, 132px);
      align-items: start;
      padding-top: clamp(76px, 10vw, 150px);
      padding-bottom: clamp(76px, 10vw, 150px);
      background: #fff;
      color: #080808;
    }
    .design-intro { min-width: 0; }
    .design-intro h2 {
      margin: 26px 0 30px;
      font-size: clamp(56px, 7vw, 104px);
      line-height: .91;
      letter-spacing: -.075em;
      font-weight: 500;
    }
    .design-intro h2 span { color: #999; }
    .design-lead {
      max-width: 540px;
      margin: 0 0 20px;
      font-size: clamp(20px, 2vw, 27px);
      line-height: 1.45;
      letter-spacing: -.035em;
    }
    .design-description {
      max-width: 520px;
      color: #777;
      font-size: 14px;
      line-height: 1.95;
    }
    .design-gallery-link {
      display: inline-flex;
      margin-top: 26px;
    }
.design-services {
      min-width: 0;
      border-top: 1px solid #d9d9d9;
    }
    .design-service {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 20px;
      gap: 18px;
      align-items: start;
      padding: 27px 0 29px;
      border-bottom: 1px solid #d9d9d9;
    }
    .design-service-number {
      padding-top: 4px;
      color: #999;
      font-size: 11px;
      letter-spacing: .04em;
    }
    .design-service h3 {
      margin: 0 0 9px;
      font-size: clamp(17px, 1.5vw, 21px);
      line-height: 1.3;
      letter-spacing: -.025em;
      font-weight: 500;
    }
    .design-service p {
      max-width: 500px;
      margin: 0;
      color: #777;
      font-size: 13px;
      line-height: 1.85;
    }
    .design-service-mark {
      padding-top: 2px;
      color: #999;
      font-size: 17px;
    }
    @media (max-width: 760px) {
      .design-section { grid-template-columns: 1fr; gap: 44px; }
      .design-intro h2 { font-size: clamp(58px, 15vw, 88px); }
      .design-service { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 12px; padding: 22px 0; }
    }

/* O mnie — style ograniczone wyłącznie do tej sekcji */
.about-full {
      display: grid;
      grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.6fr);
      gap: clamp(36px, 6vw, 100px);
      align-items: start;
      background: #fff;
      color: #080808;
      padding-top: clamp(64px, 8vw, 120px);
      padding-bottom: clamp(64px, 8vw, 120px);
    }
    .about-profile { min-width: 0; }
    .about-photo {
      display: block;
      width: 150px;
      height: 150px;
      object-fit: cover;
      object-position: center;
      border: 0;
      pointer-events: none;
      background: #f0f0f0;
    }
    .about-experience { margin-top: 22px; }
    .about-experience-number {
      display: block;
      font-size: clamp(76px, 10vw, 142px);
      line-height: .82;
      letter-spacing: -.075em;
      font-weight: 500;
      color: #080808;
    }
    .about-experience-number > span { color: #999; }
    .about-experience-label {
      display: block;
      margin-top: 16px;
      font-size: 11px;
      letter-spacing: .22em;
      line-height: 1.6;
    }
    .about-content { min-width: 0; }
    .about-content h2 {
      max-width: 900px;
      margin: 22px 0 28px;
      font-size: clamp(38px, 5.2vw, 76px);
      line-height: .99;
      letter-spacing: -.065em;
      font-weight: 500;
    }
    .about-content h2 span { color: #999; }
    .about-content .about-lead {
      max-width: 900px;
      font-size: clamp(18px, 1.7vw, 25px);
      line-height: 1.65;
      letter-spacing: -.025em;
    }
    .about-content .about-description {
      max-width: 900px;
      margin-top: 18px;
      color: #686868;
      font-size: 15px;
      line-height: 1.9;
    }
@media (max-width: 760px) {
      .about-full { grid-template-columns: 1fr; gap: 32px; }
      .about-profile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: end; }
      .about-experience { margin-top: 0; }
      .about-experience-number { font-size: clamp(56px, 13vw, 90px); }
      .about-experience-label { font-size: 9px; letter-spacing: .12em; }
      .about-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .about-process-item,
      .about-process-item:first-child,
      .about-process-item:last-child {
        padding: 20px 14px;
        border-right: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
      }
      .about-process-item:nth-child(2n) { border-right: 0; }
      .about-process-item:nth-last-child(-n + 1) { border-bottom: 0; }
      .about-process-icon { margin-bottom: 14px; }
    }
    @media (max-width: 420px) {
      .about-profile { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
      .about-photo { width: 110px; height: 110px; }
      .about-experience-number { font-size: 58px; }
    }

/* Etykiety w kolorowych prostokątach — większy tekst i ciemniejsze odcienie */
    .print-tags > span {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .045em;
    }
    .print-tags .tag-folie { color: #8f3f59; }
    .print-tags .tag-banery { color: #285b8d; }
    .print-tags .tag-plansze { color: #806713; }
    .print-tags .tag-uv { color: #4f5358; }
    @media (max-width: 760px) {
      .print-tags > span { font-size: 12px; }
    }

/* BESTGRAF — spokojniejsza galeria: monochromatyczna, kolor pojawia się na hover */
    .portfolio-section {
      background: #f7f7f5;
    }
    .portfolio-grid {
      display: grid !important;
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      gap: clamp(6px, .7vw, 10px) !important;
    }
    /* Responsywność: mniej kolumn na węższych ekranach, bez ściskania zdjęć. */
    @media (max-width: 1100px) {
      .portfolio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    }
    @media (max-width: 820px) {
      .portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    }
    @media (max-width: 560px) {
      .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }
    .portfolio-item {
      position: relative;
      overflow: hidden;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      isolation: isolate;
    }
    .portfolio-item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: grayscale(1) saturate(.75);
      opacity: .88;
      transform: scale(1);
      transition: filter 650ms cubic-bezier(.2,.65,.3,1), opacity 450ms ease, transform 700ms cubic-bezier(.2,.65,.3,1);
      will-change: filter, transform;
    }
    @media (hover: hover) and (pointer: fine) {
      .portfolio-item:hover img,
      .portfolio-item:focus-visible img {
        filter: grayscale(0) saturate(1);
        opacity: 1;
        transform: scale(1.035);
      }
    }
    .portfolio-item:focus-visible {
      outline: 1px solid #111;
      outline-offset: 3px;
    }
    .portfolio-item-overlay {
      background: linear-gradient(0deg, rgba(0,0,0,.58), rgba(0,0,0,0) 72%) !important;
      color: #fff;
      opacity: 0;
      transition: opacity 350ms ease;
      pointer-events: none;
    }
    .portfolio-item:hover .portfolio-item-overlay,
    .portfolio-item:focus-visible .portfolio-item-overlay {
      opacity: 1;
    }
    .portfolio-tabs {
      gap: 8px !important;
    }
    /* Galeria zwija się do dwóch rzędów; rozwijanie jest animowane. */
    .portfolio-grid {
      overflow: hidden;
      transition: max-height 520ms cubic-bezier(.2,.65,.3,1);
      will-change: max-height;
    }
    /* Atrybut hidden musi ukrywać przycisk, gdy w kategorii jest maksymalnie 10 zdjęć. */
    .portfolio-more-wrap[hidden] {
      display: none !important;
    }
    .portfolio-more-wrap {
      display: flex;
      justify-content: center;
      padding-top: 28px;
      text-align: center;
    }
    .portfolio-more {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 0;
      border: 0;
      outline-offset: 6px;
      background: transparent;
      color: #111;
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      transition: color 220ms ease;
    }
    .portfolio-more:hover,
    .portfolio-more:focus-visible {
      background: transparent;
      border: 0;
      color: #EC008C;
    }
    .portfolio-more-chevron {
      display: block;
      width: 100px;
      height: 11px;
      object-fit: contain;
      transform: rotate(0deg);
      transform-origin: center;
      transition: transform 260ms ease;
    }
    .portfolio-more[aria-expanded="true"] .portfolio-more-chevron {
      transform: rotate(180deg);
    }
    @media (prefers-reduced-motion: reduce) {
      .portfolio-grid, .portfolio-more, .portfolio-more-chevron { transition: none !important; }
    }
    .portfolio-tab {
      border-radius: 0 !important;
      transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
    }
    @media (prefers-reduced-motion: reduce) {
      .portfolio-item img,
      .portfolio-item-overlay,
      .portfolio-tab { transition: none !important; }
    }
    @media (hover: none), (pointer: coarse) {
      .portfolio-item img { filter: grayscale(.35); opacity: 1; }
      .portfolio-item-overlay { opacity: 1; }
    }

/* Kontakt: tło na pełną szerokość, zawartość w tej samej osi co pozostałe sekcje. */
    .contact-section {
      width: 100%;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box;
    }
    .contact-section > .contact-inner {
      width: min(1240px, calc(100% - 10vw));
      max-width: 1240px;
      margin-inline: auto;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .75fr);
      align-items: center;
      gap: clamp(36px, 7vw, 110px);
      box-sizing: border-box;
    }
    .contact-section .contact-copy,
    .contact-section .contact-panel { min-width: 0; }
    .contact-section .contact-panel { width: 100%; box-sizing: border-box; }
    @media (max-width: 760px) {
      .contact-section > .contact-inner {
        width: calc(100% - 48px);
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
      }
    }

/* HERO 23+ — idealny kwadrat, jednolite białe tło 90%, bez bocznych paneli */
    .hero-mark {
      width: min( min(100%, 380px), 34vw) !important;
      aspect-ratio: 1 / 1 !important;
      height: auto !important;
      min-height: 0 !important;
      align-self: center;
      position: relative;
      background: transparent !important;
      border: 0 !important;
      perspective: none !important;
    }
    .hero-mark::before,
    .hero-mark::after { content: none !important; display: none !important; }
    .hero-mark-frame {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      box-sizing: border-box !important;
      display: grid !important;
      place-items: center !important;
      background: rgba(255, 255, 255, 0.75) !important;
      border: 0 !important;
      box-shadow: none !important;
      outline: 0 !important;
      overflow: hidden !important;
      transform: none !important;
      transform-style: flat !important;
    }
    .hero-mark-frame::before,
    .hero-mark-frame::after { content: none !important; display: none !important; }
    .hero-number {
      position: relative !important;
      z-index: 1 !important;
      display: inline-block !important;
      max-width: 90% !important;
      white-space: nowrap !important;
      transform: translate3d(var(--num-x, 0px), var(--num-y, 0px), 0) !important;
      rotate: none !important;
      isolation: isolate !important;
    }
    /* Kolorowe kopie są pod czarnym napisem — nie zasłaniają już cyfr ani plusa. */
    .hero-number::before,
    .hero-number::after {
      z-index: -1 !important;
      mix-blend-mode: multiply;
    }
    .hero-number-label {
      position: absolute !important;
      left: 0 !important; right: 0 !important;
      bottom: 22px !important;
      width: 100% !important;
      text-align: center !important;
      z-index: 2 !important;
    }
    .hero-number-yellow {
      position: absolute !important;
      inset: 0 !important;
      color: #FFF200 !important;
      opacity: 0 !important;
      z-index: -1 !important;
      pointer-events: none !important;
      transform: translate(var(--yellow-x, 0px), var(--yellow-y, 0px)) !important;
      transition: transform 220ms ease, opacity 220ms ease !important;
      mix-blend-mode: multiply;
    }
    .hero-mark.is-active .hero-number-yellow {
      opacity: .9 !important;
      transform: translate(var(--yellow-x, -2px), var(--yellow-y, 8px)) !important;
    }
    /* Zachowaj wyłącznie cztery delikatne narożniki. */
    .hero-corner { background: transparent !important; border-color: #111 !important; }
    @media (max-width: 900px) {
      .hero-mark { width: min( min(100%, 340px), 40vw) !important; }
    }
    @media (max-width: 650px) {
      .hero-mark { width: min(82vw, 340px) !important; }
    }

/* Finalna poprawka: sekcja kontaktu nie może odziedziczyć siatki głównej sekcji.
       Pełna szerokość tła, a zawartość w wyśrodkowanym kontenerze. */
    section.contact-section.section {
      display: block !important;
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      box-sizing: border-box !important;
    }
    section.contact-section.section > .contact-inner {
      display: grid !important;
      width: min(1240px, calc(100% - 10vw)) !important;
      max-width: 1240px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      grid-template-columns: minmax(0, 1.15fr) minmax(280px, .75fr) !important;
      gap: clamp(36px, 7vw, 110px) !important;
      box-sizing: border-box !important;
    }
    @media (max-width: 760px) {
      section.contact-section.section > .contact-inner {
        width: calc(100% - 48px) !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
      }
    }

/* Pusta sekcja Druk DTP — przygotowana do późniejszego uzupełnienia. */
    .druk-dtp-section {
      display: block;
      position: relative;
      width: 100%;
      min-height: 650px;
      background: #454545;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    /* Separator CMYK 2 px, taki sam układ jak przy pozostałych sekcjach. */
    .druk-dtp-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 100vw;
      height: 2px;
      background: linear-gradient(to right,
        #00AEEF 0%, #00AEEF 25%,
        #EC008C 25%, #EC008C 50%,
        #FFF200 50%, #FFF200 75%,
        #111111 75%, #111111 100%);
      pointer-events: none;
      z-index: 1;
    }
    @media (max-width: 760px) {
      .druk-dtp-section { min-height: 480px; }
    }

/* DTP — większa, nieco jaśniejsza ciemnoszara sekcja. */
    .druk-dtp-section { min-height: 650px !important; background: #454545 !important; }
    @media (max-width: 760px) {
      .druk-dtp-section { min-height: 480px !important; }
    }

    /* Kontakt — czarne tło i jasna typografia dla wysokiego kontrastu. */
    section.contact-section.section {
      background: #080808 !important;
      color: #fff !important;
    }
    section.contact-section.section .contact-copy,
    section.contact-section.section .contact-copy h2,
    section.contact-section.section .contact-copy p,
    section.contact-section.section .contact-copy .eyebrow,
    section.contact-section.section .contact-copy h2 span {
      color: #fff !important;
    }
    section.contact-section.section .contact-copy h2 span { color: #bdbdbd !important; }
    section.contact-section.section .contact-panel {
      background: #171717 !important;
      color: #fff !important;
      border: 1px solid #333 !important;
    }
    section.contact-section.section .contact-note,
    section.contact-section.section .contact-line,
    section.contact-section.section .contact-line span {
      color: #fff !important;
    }
    section.contact-section.section .contact-line {
      border-color: #444 !important;
      transition: color 250ms ease, border-color 250ms ease;
    }
    section.contact-section.section .contact-line:hover,
    section.contact-section.section .contact-line:hover span,
    section.contact-section.section .contact-line:focus-visible,
    section.contact-section.section .contact-line:focus-visible span {
      color: #EC008C !important;
    }
    section.contact-section.section .contact-line:hover,
    section.contact-section.section .contact-line:focus-visible {
      border-color: #EC008C !important;
    }

/* Jednolity ruch strzałek przy wszystkich odnośnikach — myszą i klawiaturą. */
    a span[aria-hidden="true"] {
      display: inline-block;
      transition: transform 240ms cubic-bezier(.2,.65,.3,1);
    }
    @media (hover: hover) and (pointer: fine) {
      a:hover span[aria-hidden="true"] {
        transform: translate(3px, -3px);
      }
    }
    a:focus-visible span[aria-hidden="true"] {
      transform: translate(3px, -3px);
    }
    /* Główny przycisk: magenta oraz ruch strzałki w dół, zgodnie z jej kierunkiem. */
    .hero .hero-actions a.button-dark {
      background: #EC008C !important;
      border-color: #EC008C !important;
      color: #fff !important;
      transition: background-color 240ms ease, border-color 240ms ease;
    }
    .hero .hero-actions a.button-dark span[aria-hidden="true"] {
      transition: transform 240ms cubic-bezier(.2,.65,.3,1);
    }
    @media (hover: hover) and (pointer: fine) {
      .hero .hero-actions a.button-dark:hover span[aria-hidden="true"] {
        transform: translate(3px, 3px);
      }
      .hero .hero-actions a.button-dark:hover {
        background: #d9007f !important;
        border-color: #d9007f !important;
      }
    }
    .hero .hero-actions a.button-dark:focus-visible span[aria-hidden="true"] {
      transform: translate(3px, 3px);
    }
    /* Mocniejsze przyciemnienie magentowego przycisku po najechaniu. */
    @media (hover: hover) and (pointer: fine) {
      .hero .hero-actions a.button-dark:hover {
        background: #a90063 !important;
        border-color: #a90063 !important;
      }
    }
    .hero .hero-actions a.button-dark:focus-visible {
      background: #a90063 !important;
      border-color: #a90063 !important;
    }

    /* Przycisk Kontakt w menu — cyan, z ciemniejszym stanem hover. */
    .site-header .main-nav a.nav-contact {
      background: #00AEEF !important;
      border-color: #00AEEF !important;
      color: #fff !important;
      opacity: 1 !important; /* Nadpisuje ogólny efekt .main-nav a:hover, który rozjaśniał przycisk. */
      transition: background-color 240ms ease, border-color 240ms ease, color 240ms ease;
    }
    .site-header .main-nav a.nav-contact span[aria-hidden="true"] {
      transition: transform 240ms cubic-bezier(.2,.65,.3,1);
    }
    @media (hover: hover) and (pointer: fine) {
      .site-header .main-nav a.nav-contact:hover {
        background: #006b91 !important;
        border-color: #006b91 !important;
        color: #fff !important;
        opacity: 1 !important;
      }
    }
    .site-header .main-nav a.nav-contact:focus-visible {
      background: #006b91 !important;
      border-color: #006b91 !important;
      color: #fff !important;
      opacity: 1 !important;
    }
    @media (prefers-reduced-motion: reduce) {
      a span[aria-hidden="true"] { transition: none !important; }
    }

/* Galeria: nagłówek i filtry wyśrodkowane, lekkie przyciski bez ramek. */
    .portfolio-section {
      background: #f2f2f0 !important;
    }
    .portfolio-section .section-heading-row {
      display: flex;
      justify-content: flex-start;
    }
    .portfolio-section .section-heading-row .section-intro { display: none !important; }
    .portfolio-section .portfolio-tabs {
      display: flex !important;
      justify-content: center !important;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px !important;
      width: 100%;
      margin: 30px auto 26px !important;
    }
    .portfolio-section .portfolio-tab {
      border: 0 !important;
      background: transparent !important;
      color: #222 !important;
      border-radius: 0 !important;
      padding: 12px 20px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      transition: background-color 220ms ease, color 220ms ease, transform 220ms ease !important;
    }
    .portfolio-section .portfolio-tab:hover,
    .portfolio-section .portfolio-tab:focus-visible {
      background: #e9e9e6 !important;
      color: #111 !important;
      transform: translateY(-1px);
    }
    .portfolio-section .portfolio-tab.is-active,
    .portfolio-section .portfolio-tab[aria-selected="true"] {
      background: #080808 !important;
      color: #fff !important;
    }
    @media (max-width: 560px) {
      .portfolio-section .portfolio-tabs { gap: 5px !important; margin-top: 22px !important; }
      .portfolio-section .portfolio-tab { padding: 10px 14px !important; }
    }

/* Cięcie ploterowe: czyste, białe tło. */
    section.plotter-section { background-color: #ffffff !important; }

/* Numeracja i kolory oznaczeń sekcji według kolejności menu. */
    /* Wszystkie etykiety sekcji mają wspólny układ: kreska, numer i nazwa. */
    .design-section .design-intro > .eyebrow,
    .portfolio-section .section-heading .eyebrow,
    .about-full > .about-section-eyebrow { color: #555555 !important; }
    .design-section .design-intro > .eyebrow .eyebrow-line,
    .portfolio-section .section-heading .eyebrow .eyebrow-line,
    .about-full > .about-section-eyebrow .eyebrow-line { background-color: #555555 !important; }

    /* 02 / Druk DTP — biała etykieta na ciemnym tle. */
    .druk-dtp-section { padding: 1px 5vw 0 !important; }
    .druk-dtp-section .dtp-eyebrow {
      margin: clamp(64px, 8vw, 120px) auto 0 !important;
      max-width: 1240px;
      color: #fff !important;
    }
    .druk-dtp-section .dtp-eyebrow .eyebrow-line { background-color: #fff !important; }

    /* 03 / Druk i realizacja — jasnoszary na ciemnym tle. */
    .experience-section .print-display > .eyebrow { color: #d0d0d0 !important; }
    .experience-section .print-accent-line { background-color: #d0d0d0 !important; }

    /* 04 / Cięcie ploterowe — magenta. */
    .plotter-section .plotter-intro > .eyebrow { color: #EC008C !important; }
    .plotter-section .plotter-line { background-color: #EC008C !important; }

    /* 06 / O mnie — etykieta nad obiema kolumnami, jak w pozostałych sekcjach. */
    .about-full { grid-template-columns: minmax(180px, 0.72fr) minmax(0, 1.6fr); }
    .about-full > .about-section-eyebrow { grid-column: 1 / -1; margin: 0 0 0 !important; }

    /* 07 / Kontakt — biały tekst i biała kreska na czarnym tle. */
    .contact-section .contact-copy > .eyebrow { color: #ffffff !important; }
    .contact-section .contact-copy > .eyebrow .eyebrow-line { background-color: #ffffff !important; }

    @media (max-width: 760px) {
      .druk-dtp-section .dtp-eyebrow { margin-top: 64px !important; }
      .about-full { grid-template-columns: 1fr !important; }
    }

/* BESTGRAF — wspólna szerokość treści we wszystkich sekcjach.
       Tła pozostają pełnoekranowe; treść wyrównuje się do jednej osi 1240 px. */
    :root { --content-width: 1240px; }
    .site-header,
    .site-footer,
    .intro-strip {
      padding-left: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
      padding-right: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
    }
    .hero.section,
    .section,
    .experience-section,
    .plotter-section,
    .portfolio-section,
    .contact-section,
    .druk-dtp-section {
      width: 100% !important;
      max-width: none !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;
    }
    /* Sekcje z treścią bez dodatkowego wewnętrznego wrappera. */
    .hero.section,
    .section.services-section,
    .about-section.section,
    .plotter-section {
      padding-left: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
      padding-right: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
    }
    /* Sekcje z własnym kontenerem: nie dodawaj drugiego poziomego marginesu. */
    .experience-section {
      padding-left: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
      padding-right: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
    }
    .experience-section .print-layout,
    .plotter-section .plotter-inner {
      width: 100% !important;
      max-width: var(--content-width) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }
    .portfolio-section {
      padding-left: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
      padding-right: max(5vw, calc((100vw - var(--content-width)) / 2)) !important;
    }
    .portfolio-section > .section-heading,
    .portfolio-section > .portfolio-tabs,
    .portfolio-section > .portfolio-grid,
    .portfolio-section > .portfolio-more-wrap {
      width: 100% !important;
      max-width: var(--content-width) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }
    .contact-section { padding-left: 0 !important; padding-right: 0 !important; }
    .contact-section > .contact-inner {
      width: min(var(--content-width), calc(100% - 10vw)) !important;
      max-width: var(--content-width) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
    }
    .druk-dtp-section { padding-left: max(5vw, calc((100vw - var(--content-width)) / 2)) !important; padding-right: max(5vw, calc((100vw - var(--content-width)) / 2)) !important; }
    .druk-dtp-section .dtp-eyebrow { width: 100%; max-width: var(--content-width); margin-left: auto !important; margin-right: auto !important; }
    @media (max-width: 760px) {
      .hero.section,
      .section.services-section,
      .about-section.section,
      .plotter-section,
      .experience-section,
      .portfolio-section,
      .druk-dtp-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
      }
      .site-header, .site-footer, .intro-strip { padding-left: 24px !important; padding-right: 24px !important; }
      .contact-section { padding-left: 0 !important; padding-right: 0 !important; }
      .contact-section > .contact-inner { width: calc(100% - 48px) !important; }
    }

/* 02 / DRUK DTP — typograficzna kompozycja w stylistyce sekcji DRUK. */
    .druk-dtp-section {
      min-height: 0 !important;
      padding: 1px 0 0 !important;
      background: #454545 !important;
      color: #fff;
      overflow: hidden;
    }
    .druk-dtp-section .dtp-inner {
      width: min(var(--content-width, 1240px), calc(100% - 10vw));
      margin: 0 auto;
      padding: clamp(64px, 7vw, 100px) 0 clamp(76px, 8vw, 120px);
    }
    .druk-dtp-section .dtp-eyebrow {
      width: 100%;
      max-width: none;
      margin: 0 0 clamp(38px, 5vw, 72px) !important;
      color: #fff !important;
    }
    .druk-dtp-section .dtp-eyebrow .eyebrow-line { background: #fff !important; }
    .dtp-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
      gap: clamp(44px, 7vw, 110px);
      align-items: center;
    }
    .dtp-copy, .dtp-display { min-width: 0; }
    .dtp-kicker {
      margin: 0 0 24px;
      color: #c5c5c5;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .18em;
    }
    .dtp-products { border-top: 1px solid rgba(255,255,255,.25); }
    .dtp-products p {
      margin: 0;
      padding: 8px 0 10px;
      font: 700 clamp(27px, 3.2vw, 47px)/1.06 Manrope, Arial, sans-serif;
      letter-spacing: -.065em;
      color: #fff;
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .dtp-products p:nth-child(2) { padding-left: clamp(12px, 2vw, 30px); color: #d0d0d0; }
    .dtp-products p:nth-child(3) { padding-left: clamp(24px, 4vw, 58px); }
    .dtp-products p:nth-child(4) { padding-left: clamp(12px, 2vw, 30px); color: #d0d0d0; }
    .dtp-products p:nth-child(5) { padding-left: clamp(36px, 5vw, 72px); }
    .dtp-products p span { font-size: .58em; letter-spacing: -.03em; color: #bcbcbc; }
    .dtp-finishes { padding-top: 30px; max-width: 590px; }
    .dtp-finishes h2 {
      margin: 0 0 15px;
      color: #fff;
      font: 500 clamp(27px, 3vw, 40px)/1.05 Manrope, Arial, sans-serif;
      letter-spacing: -.055em;
    }
    .dtp-finishes p {
      margin: 0 0 13px;
      color: #d0d0d0;
      font-size: 13px;
      line-height: 1.85;
    }
    .dtp-finishes strong { color: #fff; font-weight: 600; }
    .dtp-display {
      min-height: 450px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      position: relative;
    }
    .dtp-bigword {
      margin: 0;
      font: 800 clamp(150px, 21vw, 300px)/.78 Manrope, Arial, sans-serif;
      letter-spacing: -.12em;
      white-space: nowrap;
      padding-right: .08em;
    }
    .dtp-bigword .dtp-c { color: #00AEEF; }
    .dtp-bigword .dtp-m { color: #EC008C; }
    .dtp-bigword .dtp-y { color: #FFF200; }
    .dtp-bigword .dtp-dot { color: #fff; letter-spacing: -.08em; }
    .dtp-display-caption {
      margin: 28px 0 0;
      color: #e2e2e2;
      text-align: right;
      font-size: 11px;
      line-height: 1.8;
      font-weight: 700;
      letter-spacing: .2em;
    }
    .dtp-color-bars { display: flex; gap: 0; width: min(100%, 340px); height: 4px; margin-top: 32px; }
    .dtp-color-bars span { flex: 1; }
    .dtp-color-bars span:nth-child(1) { background: #00AEEF; }
    .dtp-color-bars span:nth-child(2) { background: #EC008C; }
    .dtp-color-bars span:nth-child(3) { background: #FFF200; }
    @media (max-width: 760px) {
      .druk-dtp-section .dtp-inner { width: calc(100% - 48px); padding: 64px 0 72px; }
      .dtp-layout { grid-template-columns: 1fr; gap: 42px; }
      .dtp-products p { font-size: clamp(27px, 8vw, 42px); }
      .dtp-display { min-height: 0; align-items: flex-start; padding: 20px 0 0; }
      .dtp-bigword { font-size: clamp(145px, 38vw, 240px); }
      .dtp-display-caption { text-align: left; margin-top: 20px; }
      .dtp-color-bars { margin-top: 22px; }
    }


/* BESTGRAF — nieruchome zdjęcie widoczne przez szarą sekcję Druk DTP.
   Plik zdjęcia: /dtpbackground/dtp-background.jpg (względem katalogu głównego strony). */
.druk-dtp-section {
  position: relative !important;
  isolation: isolate;
  background-color: #454545 !important;
  background-image: linear-gradient(rgba(69, 69, 69, .84), rgba(69, 69, 69, .84)),
                    url('../dtpbackground/dtp-background.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* Zachowujemy czytelność treści nad zdjęciem. */
.druk-dtp-section .dtp-inner {
  position: relative;
  z-index: 2;
}

/* Na urządzeniach mobilnych unikamy problematycznego fixed background w przeglądarkach. */
@media (max-width: 760px) {
  .druk-dtp-section {
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}


/* BESTGRAF — wariant B: nieruchome zdjęcie pod ciemną sekcją Kontakt.
   Plik zdjęcia: /contactbackground/contact-background.jpg (względem katalogu głównego strony).
   Zdjęcie pozostaje nieruchome, a sekcja działa jak półprzezroczysta maska. */
section.contact-section.section {
  position: relative !important;
  isolation: isolate;
  background-color: #292929 !important;
  background-image: linear-gradient(rgba(35, 35, 35, .84), rgba(35, 35, 35, .84)),
                    url('../contactbackground/contact-background.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: #f5f5f5 !important;
}
section.contact-section.section .contact-inner,
section.contact-section.section .contact-copy,
section.contact-section.section .contact-panel {
  position: relative;
  z-index: 2;
}
section.contact-section.section .contact-copy,
section.contact-section.section .contact-copy h2,
section.contact-section.section .contact-copy p,
section.contact-section.section .contact-copy .eyebrow,
section.contact-section.section .contact-copy h2 span {
  color: #f5f5f5 !important;
}
section.contact-section.section .contact-copy h2 span { color: #bdbdbd !important; }
section.contact-section.section .contact-copy .eyebrow .eyebrow-line { background: #f5f5f5 !important; }
section.contact-section.section .contact-panel {
  background: rgba(15, 15, 15, .72) !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  backdrop-filter: blur(8px);
}
section.contact-section.section .contact-note,
section.contact-section.section .contact-line,
section.contact-section.section .contact-line span { color: #f5f5f5 !important; }
section.contact-section.section .contact-line {
  border-color: rgba(255, 255, 255, .25) !important;
  transition: color 250ms ease, border-color 250ms ease;
}
section.contact-section.section .contact-line:hover,
section.contact-section.section .contact-line:hover span,
section.contact-section.section .contact-line:focus-visible,
section.contact-section.section .contact-line:focus-visible span { color: #EC008C !important; }
section.contact-section.section .contact-line:hover,
section.contact-section.section .contact-line:focus-visible { border-color: #EC008C !important; }
@media (max-width: 760px) {
  section.contact-section.section {
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}