/* Alternating surfaces are scoped to the home page sections. */
body main :is(#metoda,#process,#verybrand,#technology){--surface:#f0efe8;--surface-ink:#080808;--surface-copy:#080808;--surface-line:#08080830;--surface-accent:#ffbf00;background:var(--surface);color:var(--surface-ink)}
body main :is(#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice){--surface:#ffbf00;--surface-ink:#080808;--surface-copy:#080808;--surface-line:#08080840;--surface-accent:#080808;background:var(--surface);color:var(--surface-ink)}
body main :is(#metoda,#process,#verybrand,#technology,#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice) :is(h2,h3,a,button){color:var(--surface-ink)}
body main :is(#metoda,#process,#verybrand,#technology,#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice) :is(p,li){color:var(--surface-copy)!important}
body main :is(#metoda,#process,#verybrand,#technology,#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice) :is(.section-label,.section-label>span,.steps article>span,.method-stage-top>span,.workshop-grid article>span){color:var(--surface-copy)!important}
body main :is(#metoda,#process,#verybrand,#technology) em{color:var(--surface-accent)}
body main :is(#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice) em{color:var(--surface-ink)}
#metoda .method-stages:before{background:var(--surface-line)}
#metoda .method-stages article{background:#ffffff40;border-color:var(--surface-line)}
#metoda .method-stages article:before{background:#080808}
#metoda .method-stage-top svg{color:#080808;opacity:1}
#metoda .method-decision{background:none;border-color:var(--surface-line)}
#metoda .method-decision:before{background:#080808}
#process .steps article{background:#ffffff38;border-color:var(--surface-line)}
#process .step-art svg [stroke]{stroke:#080808;stroke-opacity:.65}
#warsztaty .workshop-grid article{border-color:var(--surface-line)}
#warsztaty .text-link{color:#080808;border-color:#08080880}
#warsztaty .text-link:hover{color:#080808;border-color:currentColor}
body main #contact .contact-start{background:#080808;color:#ffbf00;border-color:#080808}
#contact .contact-start .square{background:#ffbf00}
#contact .contact-start:hover{background:#303020;color:#ffffff}
#contact .contact-bottom{border-color:var(--surface-line)}
#contact .copy{border-color:#08080870;color:#080808}
#contact .copy:hover{background:#0808080c}
body main :is(#metoda,#process,#verybrand,#technology,#warsztaty,#contact,#konkretny-zakres,.case-feature,#services,#client-voice) :is(a,button):focus-visible{outline-color:#080808}

/* Surface-specific components and labels. */
body main :is(#verybrand,#technology,#konkretny-zakres,.case-feature,#services,#client-voice) :is(span,strong,blockquote,summary,h3,h2){color:#080808!important}
body main :is(#verybrand,#technology,#konkretny-zakres,.case-feature,#services,#client-voice) .text-link{color:#080808;border-color:#08080880}
#konkretny-zakres :is(article,.scope-bottom,.scope-note),#verybrand .profile-facts article,#technology .technology-refined article,#services :is(details,.service-list){border-color:#08080830;background:transparent}
#konkretny-zakres svg,#verybrand .profile-art svg,#technology .technology-art svg{color:#080808}
#verybrand .profile-art svg [stroke]:not([stroke="none"]){stroke:#080808;stroke-opacity:.65}
#technology .mvp-launch{background:#ffbf0010}
#services .plus:before,#services .plus:after{background:#080808}
#services .tags span{border-color:#08080840}
.case-feature .case-feature-card{background:transparent;border-color:#08080835}
.case-feature .case-feature-copy{background:transparent}
#client-voice .real-voice-credit{border-color:#08080835}
body main #technology h2 em{color:#ffbf00}
/* A compact label stays attached to the animated list. */
#studio .value-phase{min-height:0;padding:0 0 12px;background:#080808}
#studio .value-phase-title{font-size:16px!important;line-height:1.4!important;min-height:0}
#studio .value-phase-hint{display:none!important}
#studio.value-scroll-animation .value-shifts{top:145px}
@media(max-width:700px){#studio .value-phase-title{font-size:15px!important}#studio .value-phase{padding-bottom:10px}#studio.value-scroll-animation .value-shifts{top:107px}}
body main #konkretny-zakres{background:#ffbf00!important}
#konkretny-zakres .scope-item svg{stroke:#080808}
#konkretny-zakres :is(.scope-item,.scope-closing){border-color:#08080830}
/* The scope categories remain distinct dark cards on the yellow surface. */
#konkretny-zakres .scope-grid{gap:18px}
body main #konkretny-zakres article.scope-item{background:#080808;border:1px solid #ffffff38;border-radius:8px;padding:26px 25px 28px}
body main #konkretny-zakres article.scope-item :is(h3,p,span){color:#f4f4ef!important}
#konkretny-zakres article.scope-item svg{stroke:#ffbf00;color:#ffbf00}
@media(max-width:700px){#konkretny-zakres .scope-grid{gap:14px}body main #konkretny-zakres article.scope-item{padding:23px 20px}#konkretny-zakres .scope-item p{padding-left:0}}

/* Scope tip: a quiet annotation, separate from the category cards. */
#konkretny-zakres .scope-closing{display:grid;grid-template-columns:20px minmax(0,1fr) minmax(0,1fr);align-items:start;gap:16px 18px;margin:28px 0 0;padding:0;border:0;background:none;border-radius:0;max-width:900px}
#konkretny-zakres .scope-tip-icon{width:20px;height:20px;stroke:#080808;flex:none;margin-top:2px}
#konkretny-zakres .scope-closing .scope-tip-main{font-size:14px;line-height:1.7;font-weight:500;margin:0}
#konkretny-zakres .scope-closing .scope-tip-detail{font-size:12px;line-height:1.85;font-weight:400;margin:0}
@media(max-width:700px){#konkretny-zakres .scope-closing{grid-template-columns:18px minmax(0,1fr);gap:7px 12px;margin-top:24px}#konkretny-zakres .scope-tip-icon{width:18px;height:18px;grid-row:1/3}#konkretny-zakres .scope-closing .scope-tip-main{font-size:13px}#konkretny-zakres .scope-closing .scope-tip-detail{grid-column:2;font-size:11px}#konkretny-zakres .scope-closing br{display:none}}