/* ==========================================================
   TARG DESIGN SYSTEM — SERVICES INDEX 3.0
   ========================================================== */

/* Ukrycie wizualnego nagłówka RealHomes.
   wp_head() i pozostałe elementy get_header() nadal działają. */

body.page-template-page-uslugi .rh_header,
body.page-template-page-uslugi .rh_header_wrapper,
body.page-template-page-uslugi .rh_mod_sticky_header,
body.page-template-page-uslugi .rh_wrap--topPadding,
body.page-template-page-uslugi .rh_banner,
body.page-template-page-uslugi .rh_page__head,
body.page-template-page-uslugi .rh_temp_header_large_screens,
body.page-template-page-uslugi .rh_temp_header_responsive,
body.page-template-page-uslugi > header:not(.targ-header),
body.page-template-page-uslugi .site-header:not(.targ-header) {
display: none !important;
}

body.page-template-page-uslugi {
margin: 0;
background: #f7f5f1;
}

body.page-template-page-uslugi,
body.page-template-page-uslugi button,
body.page-template-page-uslugi input,
body.page-template-page-uslugi textarea,
body.page-template-page-uslugi select {
font-family: "Satoshi", sans-serif !important;
}

.tds-services-v3 {
--navy: #0d172b;
--gold: #cf9a5d;
--paper: #f7f5f1;
--white: #fff;
--muted: #6d7687;
--border: rgba(13, 23, 43, .10);

overflow: hidden;
background: var(--paper);
color: var(--navy);
}

.tds-services-v3__shell {
width: min(1380px, calc(100% - 80px));
margin-inline: auto;
}

.tds-services-v3__eyebrow,
.tds-services-v3__heading > p {
margin: 0 0 13px;

color: var(--gold);

font-size: 13px;
line-height: 1.2;
font-weight: 700;
letter-spacing: .15em;
text-transform: uppercase;
}

.tds-services-v3 h1,
.tds-services-v3 h2,
.tds-services-v3 h3,
.tds-services-v3 p {
font-family: "Satoshi", sans-serif !important;
}


/* ==========================================================
   HERO
   ========================================================== */

.tds-services-v3__hero {
position: relative;

min-height: 680px;
overflow: hidden;

background: var(--navy);
color: #fff;
}

.tds-services-v3__hero-bg {
position: absolute;
inset: 0;

background-image:
linear-gradient(
90deg,
rgba(4, 9, 19, .96) 0%,
rgba(4, 9, 19, .87) 31%,
rgba(4, 9, 19, .49) 55%,
rgba(4, 9, 19, .08) 82%
),
var(--services-hero-image);

background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

.tds-services-v3__hero-content {
position: relative;
z-index: 3;

padding-top: 225px;
padding-bottom: 92px;
}

.tds-services-v3__hero h1 {
max-width: 710px;
margin: 0;

color: #fff !important;

font-size: clamp(52px, 4.5vw, 76px);
line-height: 1.01;
font-weight: 620;
letter-spacing: -.055em;
text-shadow: 0 3px 24px rgba(0, 0, 0, .25);
}

.tds-services-v3__hero h1 span {
display: block;
color: #fff !important;
}

.tds-services-v3__hero h1 strong {
display: block;

color: var(--gold);

font: inherit;
font-weight: 620;
}

.tds-services-v3__hero-lead {
max-width: 670px;
margin: 28px 0 34px;

color: rgba(255, 255, 255, .9);

font-size: 19px;
line-height: 1.68;
font-weight: 400;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.tds-services-v3__button {
min-height: 56px;
padding: 0 24px;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;

border-radius: 9px;

font-size: 15px;
font-weight: 650;
text-decoration: none;

transition:
transform .18s ease,
box-shadow .18s ease;
}

.tds-services-v3__button:hover {
transform: translateY(-2px);
}

.tds-services-v3__button--gold {
background: var(--gold);
color: #fff;
box-shadow: 0 14px 34px rgba(207, 154, 93, .22);
}

.tds-services-v3__button--dark {
background: var(--navy);
color: #fff;
}


/* ==========================================================
   HEADINGS
   ========================================================== */

.tds-services-v3__heading {
margin-bottom: 43px;
}

.tds-services-v3__heading--center {
text-align: center;
}

.tds-services-v3__heading h2,
.tds-services-v3__ecosystem-copy h2,
.tds-services-v3__cta h2 {
margin: 0;

font-size: clamp(38px, 3.2vw, 54px);
line-height: 1.08;
font-weight: 620;
letter-spacing: -.045em;
}


/* ==========================================================
   CARDS
   ========================================================== */

.tds-services-v3__situations {
padding-top: 94px;
padding-bottom: 105px;
}

.tds-services-v3__cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}

.tds-services-v3__card {
min-width: 0;
overflow: hidden;

display: flex;
flex-direction: column;

border: 1px solid var(--border);
border-radius: 22px;

background: #fff;
color: var(--navy);
text-decoration: none;

box-shadow: 0 14px 42px rgba(13, 23, 43, .04);

transition:
transform .22s ease,
box-shadow .22s ease;
}

.tds-services-v3__card:hover {
transform: translateY(-4px);
box-shadow: 0 25px 70px rgba(13, 23, 43, .09);
}

.tds-services-v3__card-content {
min-height: 345px;
padding: 31px 29px 27px;

display: flex;
flex-direction: column;
align-items: flex-start;
}

.tds-services-v3__round-icon {
width: 58px;
height: 58px;
flex: 0 0 auto;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--navy);
color: var(--gold);
}

.tds-services-v3__round-icon svg,
.tds-services-v3__network-item svg,
.tds-services-v3__process-icon svg {
width: 28px;
height: 28px;

fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

.tds-services-v3__card h3 {
margin: 23px 0 15px;

color: var(--navy);

font-size: 24px;
line-height: 1.18;
font-weight: 650;
letter-spacing: -.035em;
}

.tds-services-v3__card p {
margin: 0;

color: var(--muted);

font-size: 16px;
line-height: 1.65;
}

.tds-services-v3__link {
margin-top: auto;
padding-top: 24px;

display: inline-flex;
gap: 12px;

color: var(--navy);

font-size: 14px;
font-weight: 650;
}

.tds-services-v3__card-image {
aspect-ratio: 1.7 / 1;
overflow: hidden;
background: #eee9e1;
}

.tds-services-v3__card-image img {
width: 100%;
height: 100%;

display: block;
object-fit: cover;

transition: transform .4s ease;
}

.tds-services-v3__card:hover img {
transform: scale(1.035);
}


/* ==========================================================
   ECOSYSTEM
   ========================================================== */

.tds-services-v3__ecosystem {
padding: 104px 0;
background: #fff;
}

.tds-services-v3__ecosystem-layout {
display: grid;
grid-template-columns: minmax(330px, .78fr) minmax(620px, 1.22fr);
align-items: center;
gap: 65px;
}

.tds-services-v3__ecosystem-copy {
max-width: 510px;
}

.tds-services-v3__ecosystem-copy > p:not(.tds-services-v3__eyebrow) {
margin: 26px 0 32px;

color: var(--muted);

font-size: 18px;
line-height: 1.74;
}


/* Stabilna siatka 3 × 3 */

.tds-services-v3__network {
position: relative;

width: min(100%, 720px);
aspect-ratio: 1.45 / 1;
margin-left: auto;

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

align-items: center;
justify-items: center;
}

.tds-services-v3__network-center {
grid-column: 2;
grid-row: 2;
z-index: 3;

color: var(--navy);

font-size: clamp(54px, 5vw, 75px);
line-height: 1;
font-weight: 500;
letter-spacing: .18em;
}

.tds-services-v3__network-item {
z-index: 3;

width: 170px;

display: flex;
flex-direction: column;
align-items: center;
gap: 8px;

color: var(--navy);
text-align: center;
text-decoration: none;
}

.tds-services-v3__network-item > span {
color: var(--gold);
}

.tds-services-v3__network-item strong {
max-width: 155px;

font-size: 13px;
line-height: 1.35;
font-weight: 650;
}

.tds-services-v3__network-item--top-left {
grid-column: 1;
grid-row: 1;
}

.tds-services-v3__network-item--top {
grid-column: 2;
grid-row: 1;
}

.tds-services-v3__network-item--top-right {
grid-column: 3;
grid-row: 1;
}

.tds-services-v3__network-item--left {
grid-column: 1;
grid-row: 2;
}

.tds-services-v3__network-item--right {
grid-column: 3;
grid-row: 2;
}

.tds-services-v3__network-item--bottom-left {
grid-column: 1;
grid-row: 3;
}

.tds-services-v3__network-item--bottom {
grid-column: 2;
grid-row: 3;
}

.tds-services-v3__network-item--bottom-right {
grid-column: 3;
grid-row: 3;
}


/* Linie wyłącznie od TARG do usług.
   Jedna warstwa SVG skaluje się razem z diagramem. */

.tds-services-v3__network-lines {
position: absolute;
inset: 0;
z-index: 1;

width: 100%;
height: 100%;

overflow: visible;
pointer-events: none;
}

.tds-services-v3__network-lines .line {
fill: none;
stroke: rgba(207, 154, 93, .78);
stroke-width: .18;
stroke-dasharray: 1.2 1.35;
stroke-linecap: round;

vector-effect: non-scaling-stroke;
}


/* ==========================================================
   PROCESS
   ========================================================== */

.tds-services-v3__process {
padding-top: 98px;
padding-bottom: 100px;
}

.tds-services-v3__process-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}

.tds-services-v3__process-top {
display: flex;
align-items: center;
gap: 13px;

margin-bottom: 22px;
}

.tds-services-v3__process-icon {
width: 62px;
height: 62px;
flex: 0 0 auto;

display: inline-flex;
align-items: center;
justify-content: center;

border: 1px solid rgba(207, 154, 93, .3);
border-radius: 50%;

background: #fff;
color: var(--gold);

box-shadow: 0 10px 28px rgba(13, 23, 43, .05);
}

.tds-services-v3__process-top > strong {
color: var(--gold);

font-size: 18px;
line-height: 1;
font-weight: 700;
}

.tds-services-v3__process-line {
flex: 1;

border-top: 1px dashed rgba(207, 154, 93, .75);
}

.tds-services-v3__process-item:last-child
.tds-services-v3__process-line {
display: none;
}

.tds-services-v3__process-item h3 {
margin: 0 0 10px;

color: var(--navy);

font-size: 19px;
font-weight: 650;
}

.tds-services-v3__process-item p {
max-width: 260px;
margin: 0;

color: var(--muted);

font-size: 15px;
line-height: 1.62;
}


/* ==========================================================
   VALUES
   ========================================================== */

.tds-services-v3__values {
padding: 68px 0 78px;
background: #fff;
}

.tds-services-v3__values-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}

.tds-services-v3__value {
display: flex;
align-items: flex-start;
gap: 18px;
}

.tds-services-v3__value .tds-services-v3__round-icon {
width: 55px;
height: 55px;
}

.tds-services-v3__value h3 {
margin: 0 0 8px;

color: var(--navy);

font-size: 18px;
line-height: 1.3;
font-weight: 650;
}

.tds-services-v3__value p {
margin: 0;

color: var(--muted);

font-size: 14px;
line-height: 1.6;
}


/* ==========================================================
   CTA
   ========================================================== */

.tds-services-v3__cta {
position: relative;

min-height: 315px;
overflow: hidden;

background-image: var(--services-cta-image);
background-position: center;
background-size: cover;

color: #fff;
}

.tds-services-v3__cta-overlay {
position: absolute;
inset: 0;

background:
linear-gradient(
90deg,
rgba(4, 10, 23, .97) 0%,
rgba(4, 10, 23, .89) 48%,
rgba(4, 10, 23, .61) 100%
);
}

.tds-services-v3__cta-content {
position: relative;
z-index: 2;

min-height: 315px;

display: flex;
align-items: center;
justify-content: space-between;
gap: 70px;
}

.tds-services-v3__cta h2 {
color: #fff !important;

font-size: clamp(38px, 3.2vw, 54px);
text-shadow: 0 3px 20px rgba(0, 0, 0, .32);
}

.tds-services-v3__cta p {
max-width: 650px;
margin: 17px 0 0;

color: rgba(255, 255, 255, .82);

font-size: 17px;
line-height: 1.65;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1100px) {

.tds-services-v3__shell {
width: min(100% - 48px, 1000px);
}

.tds-services-v3__cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tds-services-v3__ecosystem-layout {
grid-template-columns: 1fr;
gap: 60px;
}

.tds-services-v3__ecosystem-copy {
max-width: 650px;
}

.tds-services-v3__network {
margin-inline: auto;
}

.tds-services-v3__values-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

.tds-services-v3__shell {
width: calc(100% - 36px);
}

.tds-services-v3__hero {
min-height: 690px;
}

.tds-services-v3__hero-bg {
background-image:
linear-gradient(
180deg,
rgba(4, 9, 19, .28) 0%,
rgba(4, 9, 19, .74) 42%,
rgba(4, 9, 19, .98) 100%
),
var(--services-hero-image);
}

.tds-services-v3__hero-content {
padding-top: 260px;
padding-bottom: 68px;
}

.tds-services-v3__hero h1 {
font-size: 43px;
}

.tds-services-v3__hero-lead {
font-size: 17px;
}

.tds-services-v3__situations {
padding-top: 74px;
padding-bottom: 76px;
}

.tds-services-v3__heading h2,
.tds-services-v3__ecosystem-copy h2,
.tds-services-v3__cta h2 {
font-size: 35px;
}

.tds-services-v3__cards {
grid-template-columns: 1fr;
}

.tds-services-v3__card-content {
min-height: auto;
padding: 28px 25px 26px;
}

.tds-services-v3__link {
margin-top: 8px;
}

.tds-services-v3__ecosystem {
padding: 76px 0;
}

.tds-services-v3__network {
aspect-ratio: auto;

display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
gap: 13px;
}

.tds-services-v3__network-center {
grid-column: 1 / -1;
grid-row: auto;

margin-bottom: 18px;

font-size: 46px;
text-align: center;
}

.tds-services-v3__network-item,
.tds-services-v3__network-item--top-left,
.tds-services-v3__network-item--top,
.tds-services-v3__network-item--top-right,
.tds-services-v3__network-item--left,
.tds-services-v3__network-item--right,
.tds-services-v3__network-item--bottom-left,
.tds-services-v3__network-item--bottom,
.tds-services-v3__network-item--bottom-right {
grid-column: auto;
grid-row: auto;

width: auto;
min-height: 138px;
padding: 18px 12px;

justify-content: center;

border: 1px solid var(--border);
border-radius: 18px;

background: #fff;
}

.tds-services-v3__network-lines {
display: none;
}

.tds-services-v3__process {
padding-top: 76px;
padding-bottom: 76px;
}

.tds-services-v3__process-grid {
grid-template-columns: 1fr;
gap: 34px;
}

.tds-services-v3__process-line {
display: none;
}

.tds-services-v3__process-item p {
max-width: none;
}

.tds-services-v3__values {
padding: 66px 0;
}

.tds-services-v3__values-grid {
grid-template-columns: 1fr;
}

.tds-services-v3__cta,
.tds-services-v3__cta-content {
min-height: 395px;
}

.tds-services-v3__cta-content {
padding-top: 64px;
padding-bottom: 64px;

flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 28px;
}

}


/* ==========================================================
   SERVICES NETWORK — CENTRAL CLEAN AREA 3.1
   ========================================================== */

.tds-services-v3__network-center {
min-width: 250px;
min-height: 126px;
padding: 0 22px;

display: flex;
align-items: center;
justify-content: center;

background: #fff;
}

@media (max-width: 1100px) {

.tds-services-v3__network-center {
min-width: 220px;
min-height: 110px;
}

}


/* ==========================================================
   TARG DS — SERVICES DIAGRAM AND PROCESS 3.2
   ========================================================== */

/*
 * Linie diagramu.
 *
 * vector-effect powoduje, że grubość pozostaje taka sama
 * niezależnie od szerokości diagramu.
 */
.tds-services-v3__network-lines .line {
fill: none;

stroke: rgba(207, 154, 93, .92);
stroke-width: 1.55px;
stroke-dasharray: 4.5 5.5;
stroke-linecap: round;

vector-effect: non-scaling-stroke;
}

/*
 * Centralny napis TARG.
 */
.tds-services-v3__network-center {
min-width: 270px;
min-height: 126px;
padding: 0 24px;

display: flex;
align-items: center;
justify-content: center;

background: #fff;
color: var(--navy);

font-family: "Satoshi", sans-serif !important;
font-size: clamp(58px, 5.2vw, 82px);
line-height: .95;
font-weight: 700;
letter-spacing: .12em;
text-rendering: geometricPrecision;
}

/*
 * Ikony procesu współpracy.
 */
.tds-services-v3__process-icon {
width: 66px;
height: 66px;

border-color: rgba(207, 154, 93, .34);

background: #fff;
color: var(--gold);

box-shadow:
0 12px 32px rgba(13, 23, 43, .055),
inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.tds-services-v3__process-icon svg {
width: 31px;
height: 31px;

stroke-width: 1.65;
}

/*
 * Numer przy każdym kroku.
 */
.tds-services-v3__process-top > strong {
min-width: 32px;

color: var(--gold);

font-family: "Satoshi", sans-serif !important;
font-size: 19px;
line-height: 1;
font-weight: 700;
}

/*
 * Linie pomiędzy krokami.
 */
.tds-services-v3__process-line {
border-top-width: 1.5px;
border-top-color: rgba(207, 154, 93, .82);
}

/*
 * Delikatne dopasowanie pionowego układu procesu.
 */
.tds-services-v3__process-top {
gap: 14px;
margin-bottom: 24px;
}

@media (max-width: 1100px) {

.tds-services-v3__network-center {
min-width: 240px;
min-height: 112px;

font-size: clamp(54px, 7vw, 72px);
}

.tds-services-v3__network-lines .line {
stroke-width: 1.4px;
}

}

@media (max-width: 767px) {

.tds-services-v3__network-center {
min-width: 0;
min-height: 0;
padding: 0;

font-size: 46px;
}

.tds-services-v3__process-icon {
width: 62px;
height: 62px;
}

.tds-services-v3__process-icon svg {
width: 29px;
height: 29px;
}

}