.portfolio-page { background: #f6f7f5; }
.site-header nav .current { color: var(--red); }
.portfolio-hero { padding: 106px 5.7vw 100px; background: #f6f7f5; }
.portfolio-hero > div { display: grid; grid-template-columns: 1.2fr .65fr; gap: 10vw; align-items: end; }
.portfolio-hero h1, .product-map h2, .product-list h2, .detail-hero h1, .detail-body h2, .next-step h2 { margin: 0; font-size: clamp(48px, 5.6vw, 86px); line-height: .97; letter-spacing: -.07em; }
.portfolio-hero h1 em, .product-map h2 em, .product-list h2 em, .detail-body h2 em, .next-step h2 em { font-family: var(--serif); font-weight: 500; }
.portfolio-hero p:last-child { max-width: 360px; margin: 0 0 8px; color: #52606a; font-size: 15px; line-height: 1.8; }
.product-map { padding: 90px 5.7vw 120px; background: #dce5e2; }
.map-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 45px; }
.map-heading h2, .product-list h2 { font-size: clamp(39px, 4.2vw, 65px); }
.map-legend { display: flex; gap: 20px; color: #607078; font: 500 9px var(--mono); }
.map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.lab-dot { background: var(--blue); }.industry-dot { background: var(--red); }
.map-controls { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 25px; }
.map-controls button { padding: 10px 13px; border: 1px solid #bfcac9; background: transparent; color: #43515a; cursor: pointer; font: 500 10px var(--mono); transition: .2s ease; }
.map-controls button b { margin-left: 10px; color: var(--red); }.map-controls button:hover,.map-controls button.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }.map-controls button.is-active b { color: #87e2ff; }
.map-canvas { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 103px; gap: 1px; min-height: 520px; padding: 42px; overflow: hidden; background-image: linear-gradient(rgba(49,82,90,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(49,82,90,.14) 1px, transparent 1px); background-size: 57px 57px; background-color: #edf2ef; }
.map-axis { position: absolute; color: #789098; font: 500 8px var(--mono); letter-spacing: .13em; }.axis-v { top: 15px; left: 18px; }.axis-h { right: 20px; bottom: 15px; }
.map-node { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 142px; padding: 18px; color: #fff; overflow: hidden; transition: transform .25s, opacity .25s; }
.map-node:hover { transform: translateY(-6px); }.map-node.is-hidden { display: none; }.map-node strong { position: relative; z-index: 1; max-width: 240px; font-size: 17px; line-height: 1.12; letter-spacing: -.055em; }.map-node .node-index { position: absolute; top: 15px; left: 18px; z-index: 1; color: #cce1ed; font: 500 8px var(--mono); letter-spacing: .08em; }.map-node i { position: absolute; right: 17px; bottom: 13px; z-index: 1; color: #9cf0ff; font-style: normal; font-size: 18px; }.map-node::before { content: ''; position: absolute; inset: 0; opacity: .95; }
.node-suszenie { grid-column: span 4; grid-row: span 2; }.node-suszenie::before { background: #075edc; }.node-utrwalanie { grid-column: span 4; grid-row: span 2; }.node-utrwalanie::before { background: #151f2b; }.node-reaktory { grid-column: span 4; grid-row: span 2; }.node-reaktory::before { background: #0c877c; }.node-przemysl { grid-column: span 4; grid-row: span 2; }.node-przemysl::before { background: #e54235; }
.product-list { padding: 130px 5.7vw; background: #fff; }.product-list > div:first-child { display: flex; align-items: end; justify-content: space-between; margin-bottom: 56px; }.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }.product-card { background: #f2f4f2; transition: transform .25s; }.product-card.is-hidden { display:none; }.product-card:hover { transform: translateY(-5px); }.product-card img { display: block; width: 100%; height: 220px; object-fit: cover; filter: saturate(.74) contrast(1.05); }.product-card-body { min-height: 260px; padding: 23px; }.product-card-body > span { color: #76838b; font: 500 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; }.product-card h3 { margin: 12px 0; font-size: 22px; line-height: 1.08; letter-spacing: -.055em; }.product-card p { min-height: 56px; margin: 0 0 20px; color: #596770; font-size: 12px; line-height: 1.6; }.product-card a { border-bottom: 1px solid var(--ink); padding-bottom: 4px; font-size: 10px; font-weight: 700; }.product-card a b { margin-left: 6px; font-size: 14px; }
.detail-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; background: #dce5e2; }.detail-copy { padding: 85px 5.7vw; align-self: center; }.back-link { display: inline-block; margin-bottom: 70px; border-bottom: 1px solid #65737a; padding-bottom: 4px; color: #53626a; font: 500 9px var(--mono); letter-spacing: .08em; }.detail-hero h1 { max-width: 680px; margin-bottom: 28px; font-size: clamp(44px, 4.35vw, 70px); }.detail-copy > p:not(.eyebrow) { max-width: 500px; color: #4d5a63; font-size: 15px; line-height: 1.8; }.detail-copy .button { margin-top: 18px; }.detail-hero > img { width: 100%; height: 100%; min-height: 650px; object-fit: cover; filter: saturate(.75) contrast(1.1); }.detail-body { display: grid; grid-template-columns: .85fr 1.15fr; gap: 10vw; padding: 125px 14vw 125px 5.7vw; background: #fff; }.detail-description { max-width: 550px; margin: 0 0 55px; color: #37454f; font-size: 17px; line-height: 1.8; }.facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid #d4dbdb; }.facts div { padding: 18px 13px 0 0; border-right: 1px solid #d4dbdb; }.facts div + div { padding-left: 17px; }.facts dt { color: #6b7981; font: 500 8px var(--mono); letter-spacing: .08em; }.facts dd { margin: 9px 0 0; font-size: 18px; font-weight: 700; letter-spacing: -.045em; }.next-step { padding: 105px 5.7vw; background: #081e33; color: #fff; }.next-step .eyebrow { color: #a8c3cf; }.next-step h2 { max-width: 650px; font-size: clamp(46px, 4.6vw, 74px); }.next-step > p:not(.eyebrow) { max-width: 390px; margin: 30px 0; color: #bbced8; font-size: 14px; line-height: 1.8; }
@media (max-width: 950px) { .portfolio-hero,.product-map,.product-list { padding-left: 4vw; padding-right: 4vw; }.portfolio-hero > div,.detail-hero,.detail-body { grid-template-columns: 1fr; }.portfolio-hero > div { gap: 28px; }.map-canvas { grid-template-columns: repeat(2,1fr); grid-auto-rows: auto; padding: 35px; }.map-node,.node-suszenie,.node-utrwalanie,.node-reaktory,.node-przemysl { grid-column: span 1; grid-row: span 1; min-height: 165px; }.product-grid { grid-template-columns: repeat(2,1fr); }.detail-copy { padding: 70px 4vw; }.detail-hero > img { min-height: 360px; }.detail-body { padding: 80px 4vw; gap: 45px; } }