/* ===================================================================== */
/* HERO — full-bleed photo right, gradient fade to cream left              */
/* ===================================================================== */
.hero {
    position: relative;
    padding: 6rem 0 5rem;
    background: var(--c-bg);
    overflow: hidden;
    min-height: 640px;
}

/* Photo absolutely positioned, takes right ~65% of viewport, bleeds to edge */
.hero__bg {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 70%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 0;
}
.hero__bg--placeholder {
    background-image: repeating-linear-gradient(45deg, var(--c-olive-tint) 0 20px, var(--c-border-soft) 20px 21px);
    display: flex; align-items: center; justify-content: center;
    color: var(--c-graphite-soft); text-align: center; padding: 2rem;
}

/* Gradient overlay: cream solid on left → transparent at ~55%, blending photo into bg */
.hero__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            var(--c-bg) 0%,
            var(--c-bg) 30%,
            color-mix(in srgb, var(--c-bg) 70%, transparent) 45%,
            color-mix(in srgb, var(--c-bg) 25%, transparent) 60%,
            transparent 80%),
        linear-gradient(180deg,
            color-mix(in srgb, var(--c-bg) 30%, transparent) 0%,
            transparent 30%,
            transparent 70%,
            color-mix(in srgb, var(--c-bg) 30%, transparent) 100%);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .hero__gradient {
        background:
            linear-gradient(90deg,
                rgba(243,239,233,1) 0%,
                rgba(243,239,233,1) 30%,
                rgba(243,239,233,0.7) 45%,
                rgba(243,239,233,0.25) 60%,
                rgba(243,239,233,0) 80%);
    }
}

/* Subtle dot/grid pattern overlay on left (cream) side */
.hero__bg-pattern {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 40%;
    background-image: radial-gradient(var(--c-border) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.4) 70%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0.4) 70%, transparent);
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 620px);
    align-items: center;
    min-height: 480px;
}

.hero__content { padding-right: 2rem; max-width: 620px; }
.hero__heading {
    color: var(--c-navy);
    font-size: var(--fs-hero);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    text-wrap: balance;
}
.hero__heading-line {
    display: block;
    text-wrap: balance;
}
.hero__heading-accent { color: var(--c-brass); }
.hero__lead { color: var(--c-graphite); font-size: var(--fs-lead); max-width: 48ch; margin-bottom: 2rem; }
.hero__ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; align-items: center; }

.btn--ghost-dark { background: transparent; color: var(--c-navy); border-color: var(--c-navy); padding-left: 14px; }
.btn--ghost-dark:hover { background: var(--c-navy); color: #fff; }
.btn--ghost-dark .btn__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    background: var(--c-brass); color: #fff;
    border-radius: var(--radius-md);
}
.btn--ghost-dark .btn__icon svg { width: 12px; height: 12px; }

@media (max-width: 960px) {
    /* Mobile: photo TOP, content BELOW on cream — smooth fade between */
    .hero {
        display: flex;
        flex-direction: column;
        padding: 0;
        min-height: auto;
        background: var(--c-bg);
    }
    .hero__bg {
        position: relative;
        top: auto; right: auto; bottom: auto; left: auto;
        width: 100%;
        height: 320px;
        opacity: 1;
        order: 1;
        flex-shrink: 0;
    }
    /* Bottom of photo fades to cream — vertical transition */
    .hero__bg::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 70%;
        background: linear-gradient(180deg,
            transparent 0%,
            color-mix(in srgb, var(--c-bg) 40%, transparent) 50%,
            color-mix(in srgb, var(--c-bg) 90%, transparent) 85%,
            var(--c-bg) 100%);
        pointer-events: none;
    }
    @supports not (background: color-mix(in srgb, red, blue)) {
        .hero__bg::after {
            background: linear-gradient(180deg,
                transparent 0%,
                rgba(243,239,233,0.4) 50%,
                rgba(243,239,233,0.9) 85%,
                rgba(243,239,233,1) 100%);
        }
    }
    .hero__gradient { display: none; }
    .hero__bg-pattern { display: none; }
    .hero__inner {
        order: 2;
        padding: 2rem 1.25rem 3rem;
        min-height: auto;
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    .hero__content {
        padding: 0;
        max-width: 100%;
    }
    @media (max-width: 480px) {
        .hero__bg { height: 260px; }
        .hero__inner { padding: 1.5rem 1rem 2.5rem; }
    }
}

/* ===================================================================== */
/* USŁUGI — DARK NAVY section with floating orange icons                    */
/* ===================================================================== */
.uslugi--dark {
    position: relative;
    background: var(--c-navy);
    color: rgba(255,255,255,0.85);
    overflow: hidden;
}

/* Blueprint grid + radial corner glow */
.uslugi--dark::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background-image:
        /* fine 48px grid — blueprint feel */
        linear-gradient(rgba(200,168,106,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,168,106,0.06) 1px, transparent 1px),
        /* coarser 240px grid — thicker lines for hierarchy */
        linear-gradient(rgba(200,168,106,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,168,106,0.10) 1px, transparent 1px),
        /* warm glow top-right */
        radial-gradient(ellipse 800px 600px at 90% 10%, rgba(200,168,106,0.10), transparent 60%),
        /* cool deepening bottom-left */
        radial-gradient(ellipse 600px 500px at 5% 95%, rgba(31,45,63,0.6), transparent 60%);
    background-size:
        48px 48px,
        48px 48px,
        240px 240px,
        240px 240px,
        100% 100%,
        100% 100%;
    mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Subtle contour-line SVG overlay decoration top-left */
.uslugi--dark::after {
    content: '';
    position: absolute;
    top: -40px; left: -120px;
    width: 480px; height: 480px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 480' fill='none' stroke='%23C8A86A' stroke-width='1.2' opacity='0.18'%3E%3Cpath d='M0 380 Q120 320 240 360 T480 320'/%3E%3Cpath d='M0 340 Q120 280 240 320 T480 280'/%3E%3Cpath d='M0 300 Q120 240 240 280 T480 240'/%3E%3Cpath d='M0 260 Q120 200 240 240 T480 200'/%3E%3Cpath d='M0 220 Q120 160 240 200 T480 160'/%3E%3Cpath d='M0 180 Q120 120 240 160 T480 120'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Container of the 4 large brass + survey crosses in corners */
.uslugi__bg {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
}
.uslugi__cross {
    position: absolute;
    color: var(--c-brass);
    font-size: 64px; font-weight: 200;
    line-height: 1;
    opacity: 0.18;
    font-family: var(--ff-mono);
}
.uslugi__cross--tl { top: 72px;    left: 5%; }
.uslugi__cross--tr { top: 120px;   right: 8%; }
.uslugi__cross--bl { bottom: 100px; left: 12%; }
.uslugi__cross--br { bottom: 60px;  right: 4%; }

.uslugi--dark > .container { position: relative; z-index: 2; }

.uslugi--dark .section__heading,
.uslugi--dark .section__heading--light { color: #fff; }
.uslugi--dark .section__header { margin-bottom: 3.5rem; }

/* On smaller screens hide the contour decoration and large crosses */
@media (max-width: 800px) {
    .uslugi--dark::after { display: none; }
    .uslugi__cross { font-size: 40px; opacity: 0.14; }
}

.uslugi__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
@media (max-width: 960px) { .uslugi__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .uslugi__grid { grid-template-columns: 1fr; } }

.usluga-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0 0 1.75rem;
    overflow: visible;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-base);
    /* No transform on hover — would create containing block trapping modals */
}
.usluga-card:hover { box-shadow: var(--shadow-lg); }

.usluga-card__media {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--c-olive-tint);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.usluga-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-base); }
.usluga-card:hover .usluga-card__media img { transform: scale(1.04); }
.usluga-card__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color: var(--c-graphite-soft); font-size: 0.875rem; padding: 1rem; text-align: center; }

/* Icon sits BETWEEN media and body via negative top margin — no overflow clipping */
.usluga-card__icon {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-brass);
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 6px 16px rgba(44,62,84,0.20);
    margin: -28px auto 0;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}
.usluga-card__icon svg { width: 28px; height: 28px; }

.usluga-card__body {
    padding: 1.25rem 1.75rem 0;
    text-align: center;
    display: flex; flex-direction: column; gap: 0.625rem;
    flex: 1;
}
.usluga-card__title { color: var(--c-navy); font-size: 1.125rem; margin: 0; font-weight: 700; }
.usluga-card__desc { color: var(--c-graphite); font-size: 0.875rem; line-height: 1.55; margin: 0; flex: 1; }

.usluga-card__more {
    align-self: center;
    margin-top: 0.5rem;
    background: transparent; border: 0; padding: 0.5rem;
    color: var(--c-brass);
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    cursor: pointer;
    transition: color var(--t-fast), transform var(--t-fast);
    text-decoration: none;
}
.usluga-card__more:hover { color: var(--c-brass-soft); transform: translateY(-1px); }

.uslugi__more {
    margin-top: 3rem;
    text-align: center;
}
.uslugi__more-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem; font-weight: 600;
}
.uslugi__more-link:hover { color: var(--c-brass); }
.uslugi__more-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--c-brass); color: #fff;
    border-radius: var(--radius-md);
    font-weight: 700;
}

/* ===================================================================== */
/* O NAS — light, text + progress bars + photo + badge                      */
/* ===================================================================== */
.o-nas { background: var(--c-bg); }
.o-nas__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 960px) { .o-nas__inner { grid-template-columns: 1fr; gap: 3rem; } }

.o-nas__body { color: var(--c-graphite); font-size: 1rem; line-height: 1.7; margin-bottom: 2rem; max-width: 52ch; }
.o-nas__body p + p { margin-top: 0.875rem; }

.progress-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.progress { display: flex; flex-direction: column; gap: 0.5rem; }
.progress__head { display: flex; justify-content: space-between; align-items: center; }
.progress__label { color: var(--c-navy); font-size: 0.875rem; font-weight: 600; }
.progress__value { color: var(--c-brass); font-size: 0.875rem; font-weight: 700; }
.progress__track { width: 100%; height: 6px; background: var(--c-border); border-radius: var(--radius-sm); overflow: hidden; }
.progress__fill {
    height: 100%;
    width: var(--p, 0%);
    background: var(--c-brass);
    border-radius: var(--radius-sm);
    transition: width 1200ms cubic-bezier(0.2,0.8,0.2,1);
}

.o-nas__media {
    position: relative;
    border-radius: var(--radius-md);
}
.o-nas__pattern {
    position: absolute;
    top: -24px; right: -24px;
    width: 120px; height: 120px;
    background-image: radial-gradient(var(--c-brass) 2px, transparent 2px);
    background-size: 14px 14px;
    opacity: 0.7;
    z-index: 0;
}
.o-nas__photo {
    position: relative; z-index: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 5/6;
    background: var(--c-olive-tint);
    box-shadow: var(--shadow-md);
}
.o-nas__photo img { width: 100%; height: 100%; object-fit: cover; }
.o-nas__photo .placeholder { min-height: 100%; }

.o-nas__badge {
    position: absolute;
    top: 20px; right: 20px;
    background: #fff;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    z-index: 2;
    min-width: 110px;
}
.o-nas__badge-value {
    display: block;
    color: var(--c-brass);
    font-size: 2rem; font-weight: 800;
    line-height: 1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}
.o-nas__badge-label {
    display: block;
    color: var(--c-graphite);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    line-height: 1.3;
}

/* ===================================================================== */
/* WHY CHOOSE US — photo+caption + content+4 rows                          */
/* ===================================================================== */
.wcu { background: #fff; }
.wcu__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 4rem;
    align-items: stretch;
}
@media (max-width: 960px) {
    .wcu__inner { grid-template-columns: 1fr; gap: 2rem; }
    .wcu__content { order: 1; }
    .wcu__media { order: 2; }
}

.wcu__media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--c-olive-tint);
    min-height: 480px;
}
.wcu__media img { width: 100%; height: 100%; object-fit: cover; }
.wcu__media-placeholder { width:100%; height:100%; min-height:480px; display:flex; align-items:center; justify-content:center; color: var(--c-graphite-soft); padding: 2rem; text-align:center; }

.wcu__caption {
    position: absolute;
    bottom: 24px; left: 24px;
    display: flex; align-items: center; gap: 0.875rem;
    background: var(--c-navy);
    color: #fff;
    padding: 0.875rem 1.25rem 0.875rem 0.875rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--t-fast);
}
.wcu__caption:hover { background: var(--c-brass); color: #fff; }
.wcu__caption-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--c-brass); color: #fff;
    border-radius: var(--radius-md);
}
.wcu__caption:hover .wcu__caption-icon { background: #fff; color: var(--c-brass); }
.wcu__caption-icon svg { width: 14px; height: 14px; }
.wcu__caption-text { font-size: 0.875rem; font-weight: 600; max-width: 22ch; line-height: 1.4; }

.wcu__content { display: flex; flex-direction: column; justify-content: center; }
.wcu__grid {
    list-style: none; padding: 0; margin: 2rem 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem;
}
@media (max-width: 600px) { .wcu__grid { grid-template-columns: 1fr; } }

.wcu-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 0.875rem;
    align-items: start;
}
.wcu-row__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    background: var(--c-orange-tint);
    color: var(--c-brass);
    border-radius: var(--radius-md);
    flex-shrink: 0;
    overflow: hidden;
}
.wcu-row__icon svg { width: 26px; height: 26px; max-width: 100%; max-height: 100%; color: var(--c-brass); }
.wcu-row__icon img { width: 26px; height: 26px; object-fit: contain; }
.wcu-row__title { color: var(--c-navy); font-size: 1rem; margin: 0 0 0.25rem; font-weight: 700; }
.wcu-row__desc { color: var(--c-graphite); font-size: 0.8125rem; line-height: 1.55; margin: 0; }

/* ===================================================================== */
/* STATS — orange full-width bar                                            */
/* ===================================================================== */
.stats { background: var(--c-brass); padding: 2rem 0; }
.stats__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
}
@media (max-width: 800px) { .stats__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
@media (max-width: 400px) { .stats__grid { grid-template-columns: 1fr; } }

.stats__item { display: flex; align-items: center; gap: 1rem; }
.stats__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.stats__icon svg { width: 28px; height: 28px; }
.stats__body { display: flex; flex-direction: column; gap: 0.125rem; }
.stats__value { color: #fff; font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.stats__label { color: rgba(255,255,255,0.9); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ===================================================================== */
/* PROCES — staggered cards on dark photo                                   */
/* ===================================================================== */
/* ===================================================================== */
/* REALIZACJE — portfolio strip (dark steel-blue + blueprint pattern)      */
/* ===================================================================== */
.realizacje {
    position: relative;
    padding: 6rem 0;
    overflow: hidden;
    background: var(--c-navy);
    color: rgba(255,255,255,0.85);
}
.realizacje::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(200,168,106,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,168,106,0.05) 1px, transparent 1px),
        radial-gradient(ellipse 700px 500px at 5% 0%, rgba(200,168,106,0.10), transparent 60%),
        radial-gradient(ellipse 600px 500px at 95% 100%, rgba(31,45,63,0.6), transparent 60%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.realizacje__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.realizacje__cross {
    position: absolute;
    color: var(--c-brass);
    font-family: var(--ff-mono);
    font-size: 56px; font-weight: 200;
    line-height: 1; opacity: 0.18;
}
.realizacje__cross--tl { top: 80px;    left: 6%; }
.realizacje__cross--br { bottom: 80px; right: 5%; }
.realizacje .container { position: relative; z-index: 2; }
.realizacje__header { margin-bottom: 3.5rem; }

.realizacje__grid {
    list-style: none; padding: 0; margin: 0 0 3rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
@media (max-width: 1024px) { .realizacje__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .realizacje__grid { grid-template-columns: 1fr; } }

/* Hover-reveal card: image-only by default, overlay slides up on hover */
.realizacja-card {
    list-style: none;
}
.realizacja-card__inner {
    position: relative;
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--c-navy-deep);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    isolation: isolate;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.realizacja-card__inner:hover,
.realizacja-card__inner:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.realizacja-card__img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1), filter 400ms ease;
}
.realizacja-card__inner:hover .realizacja-card__img,
.realizacja-card__inner:focus-visible .realizacja-card__img {
    transform: scale(1.08);
    filter: brightness(0.7);
}

.realizacja-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
    font-size: 0.875rem;
    background: var(--c-navy);
}

/* Gradient overlay — visible enough to read title at rest, intensifies on hover */
.realizacja-card__gradient {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg,
        transparent 30%,
        rgba(31,45,63,0.55) 60%,
        rgba(31,45,63,0.95) 100%);
    transition: background var(--t-base);
    pointer-events: none;
}
.realizacja-card__inner:hover .realizacja-card__gradient,
.realizacja-card__inner:focus-visible .realizacja-card__gradient {
    background: linear-gradient(180deg,
        rgba(31,45,63,0.30) 0%,
        rgba(31,45,63,0.70) 50%,
        rgba(31,45,63,0.97) 100%);
}

/* Body — always at bottom; meta + title always visible; desc reveals on hover */
.realizacja-card__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 1.25rem 1.5rem 1.25rem;
    color: #fff;
}

.realizacja-card__meta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--c-brass);
    font-family: var(--ff-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.5rem;
}
.realizacja-card__loc,
.realizacja-card__year { color: var(--c-brass); }
.realizacja-card__dot { color: rgba(255,255,255,0.5); font-weight: 700; }

.realizacja-card__title {
    color: #fff;
    font-size: 1.0625rem;
    margin: 0;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description: smooth expand-from-zero on hover */
.realizacja-card__desc {
    color: rgba(255,255,255,0.88);
    font-size: 0.875rem;
    line-height: 1.55;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
        max-height 360ms cubic-bezier(0.2,0.8,0.2,1),
        opacity 240ms ease,
        margin-top 320ms cubic-bezier(0.2,0.8,0.2,1);
}
.realizacja-card__inner:hover .realizacja-card__desc,
.realizacja-card__inner:focus-visible .realizacja-card__desc {
    max-height: 200px;
    opacity: 1;
    margin-top: 0.625rem;
}

/* Mobile / touch: same overlay style as desktop, but reveal triggered by TAP (.is-revealed class) */
@media (hover: none) {
    /* Default state: image clean, gradient minimal, NO meta/title peeking */
    .realizacja-card__gradient {
        background: linear-gradient(180deg,
            transparent 50%,
            rgba(31,45,63,0.35) 100%);
    }

    .realizacja-card__meta,
    .realizacja-card__title {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 280ms ease, transform 320ms cubic-bezier(0.2,0.8,0.2,1);
    }
    .realizacja-card__desc {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        transition:
            max-height 360ms cubic-bezier(0.2,0.8,0.2,1),
            opacity 240ms ease,
            margin-top 320ms cubic-bezier(0.2,0.8,0.2,1);
    }

    /* Tap-active state: full reveal (mirrors desktop :hover) */
    .realizacja-card__inner.is-revealed .realizacja-card__gradient {
        background: linear-gradient(180deg,
            rgba(31,45,63,0.30) 0%,
            rgba(31,45,63,0.70) 50%,
            rgba(31,45,63,0.97) 100%);
    }
    .realizacja-card__inner.is-revealed .realizacja-card__img {
        transform: scale(1.06);
        filter: brightness(0.7);
    }
    .realizacja-card__inner.is-revealed .realizacja-card__meta,
    .realizacja-card__inner.is-revealed .realizacja-card__title {
        opacity: 1;
        transform: translateY(0);
    }
    .realizacja-card__inner.is-revealed .realizacja-card__title {
        font-size: 1.125rem;
        -webkit-line-clamp: 3;
        padding-bottom: 0.625rem;
        margin-bottom: 0.625rem;
        border-bottom: 1px solid rgba(200,168,106,0.4);
        position: relative;
    }
    .realizacja-card__inner.is-revealed .realizacja-card__desc {
        max-height: 320px;
        opacity: 1;
        margin-top: 0;
    }

    /* Small "tap to reveal" hint indicator — top right corner */
    .realizacja-card__inner::after {
        content: '+';
        position: absolute;
        top: 12px; right: 12px;
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: rgba(31,45,63,0.7);
        color: var(--c-brass);
        font-size: 1.5rem; font-weight: 300;
        border-radius: var(--radius-md);
        z-index: 3;
        transition: transform 280ms ease, background 280ms ease;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        pointer-events: none;
    }
    .realizacja-card__inner.is-revealed::after {
        content: '×';
        transform: rotate(0deg);
        background: var(--c-brass);
        color: var(--c-navy-deep);
    }
}

.realizacje__empty {
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(200,168,106,0.3);
    border-radius: var(--radius-md);
    padding: 3rem 2rem;
    text-align: center;
    color: rgba(255,255,255,0.7);
    font-size: 0.9375rem;
    margin-bottom: 2.5rem;
}
.realizacje__empty strong { color: var(--c-brass); }

.realizacje__cta { text-align: center; }

/* ===================================================================== */
/* PROCES (kept for backwards-compat — not rendered in current front-page) */
/* ===================================================================== */
.proces {
    position: relative;
    padding: 6rem 0 6rem;
    overflow: hidden;
    color: #fff;
    background: var(--c-navy);
}
.proces__bg { position: absolute; inset: 0; z-index: 0; }
.proces__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.proces__overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        /* Fine blueprint grid 48px */
        linear-gradient(rgba(200,168,106,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,168,106,0.05) 1px, transparent 1px),
        /* Brass glow top-right */
        radial-gradient(ellipse 600px 500px at 95% 0%, rgba(200,168,106,0.12), transparent 60%),
        /* Steel deepening bottom-left */
        radial-gradient(ellipse 700px 500px at 0% 100%, rgba(31,45,63,0.7), transparent 60%),
        linear-gradient(180deg, rgba(44,62,84,0.92) 0%, rgba(44,62,84,0.96) 100%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%, 100% 100%;
}
.proces .container { position: relative; z-index: 2; }
.proces__header { margin-bottom: 4rem; }

.proces__steps {
    list-style: none; padding: 0; margin: 0 0 3.5rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
    align-items: stretch;
    counter-reset: step;
}
@media (max-width: 1100px) { .proces__steps { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 600px) { .proces__steps { grid-template-columns: 1fr; gap: 1.5rem; } }

.proces-step {
    position: relative;
    background: #fff;
    color: var(--c-navy);
    border-radius: var(--radius-md);
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: var(--shadow-md);
    display: flex; flex-direction: column; gap: 0.875rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-base), box-shadow var(--t-base);
}
.proces-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Big watermark number in bottom-right corner */
.proces-step__number {
    position: absolute;
    bottom: -28px; right: -10px;
    font-size: 9rem;
    font-weight: 800;
    line-height: 1;
    color: var(--c-brass);
    opacity: 0.10;
    letter-spacing: -0.04em;
    z-index: 0;
    pointer-events: none;
    font-feature-settings: "tnum";
}

.proces-step > * { position: relative; z-index: 1; }

.proces-step__head {
    display: flex; align-items: center; gap: 0.75rem;
}
.proces-step__icon {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-brass);
    color: #fff;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.proces-step__icon svg { width: 24px; height: 24px; }
.proces-step__tag {
    color: var(--c-brass);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-family: var(--ff-mono);
}

.proces-step__title {
    color: var(--c-navy);
    font-size: 1.25rem;
    margin: 0;
    line-height: 1.2;
    font-weight: 700;
}
.proces-step__desc {
    font-size: 0.9375rem;
    color: var(--c-graphite);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}
.proces-step__meta {
    display: flex; align-items: center; gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--c-border);
    color: var(--c-navy);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--ff-mono);
}
.proces-step__meta-dot {
    width: 6px; height: 6px;
    background: var(--c-brass);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Brass arrow connecting steps (desktop only) */
.proces-step__arrow {
    position: absolute;
    right: -28px; top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    color: var(--c-brass);
    display: inline-flex; align-items: center; justify-content: center;
    z-index: 3;
    opacity: 0.7;
}
.proces-step__arrow svg { width: 100%; height: 100%; }

@media (max-width: 1100px) {
    .proces-step__arrow { display: none; }
}

.proces__cta {
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.875rem;
}
.proces__cta-note {
    color: rgba(255,255,255,0.55);
    font-size: 0.8125rem;
    margin: 0;
    font-family: var(--ff-mono);
    letter-spacing: 0.04em;
}

/* ===================================================================== */
/* TESTIMONIALS                                                            */
/* ===================================================================== */
.testi { background: var(--c-bg); }
.testi__head { max-width: 720px; margin-bottom: 3rem; }
.testi__head--full { text-align: center; margin-left: auto; margin-right: auto; }
.testi__head--full .section__lead { margin-left: auto; margin-right: auto; }
.testi__widget {
    width: 100%;
    display: flex;
    justify-content: center;
}
.testi__widget > * { margin-left: auto; margin-right: auto; }
/* Center Trustindex internal grid/flex containers */
.testi__widget .ti-widget,
.testi__widget .ti-container,
.testi__widget .ti-reviews-container,
.testi__widget [class*="ti-row"],
.testi__widget [class*="ti-col"] {
    margin-left: auto !important;
    margin-right: auto !important;
}
.testi__widget [class*="ti-row"],
.testi__widget [class*="ti-reviews-container"] {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Legacy 2-col layout (kept for backwards compat) */
.testi__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; }
.testi__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 1024px) { .testi__inner { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 700px) { .testi__list { grid-template-columns: 1fr; } }

.testi-card {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 1.75rem;
    display: flex; flex-direction: column; gap: 1.25rem;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-base), box-shadow var(--t-base);
    border: 1px solid var(--c-border);
}
.testi-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testi-card__stars { color: var(--c-brass); font-size: 1rem; letter-spacing: 2px; }
.testi-card__quote { color: var(--c-graphite); font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.testi-card__foot { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.875rem; align-items: center; padding-top: 1rem; border-top: 1px solid var(--c-border); }
.testi-card__avatar { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--c-brass); color: #fff; border-radius: var(--radius-md); font-weight: 700; font-size: 1.0625rem; }
.testi-card__meta { display: flex; flex-direction: column; gap: 2px; }
.testi-card__name { color: var(--c-navy); font-weight: 700; font-size: 0.9375rem; }
.testi-card__role { color: var(--c-graphite-soft); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.testi-card__mark { color: var(--c-brass); opacity: 0.5; font-size: 2rem; line-height: 1; font-weight: 700; }

/* ===================================================================== */
/* FAQ                                                                     */
/* ===================================================================== */
.faq { background: #fff; }
.faq__inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: start; }
.faq__media { border-radius: var(--radius-md); overflow: hidden; background: var(--c-olive-tint); aspect-ratio: 4/5; }
.faq__media img { width: 100%; height: 100%; object-fit: cover; }
.faq__media .placeholder { min-height: 100%; aspect-ratio: 4/5; }

.faq__content { display: flex; flex-direction: column; }
.faq__list { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: 0.625rem; }
.faq-item details { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.faq-item details[open] { border-color: var(--c-brass); box-shadow: var(--shadow-sm); }
.faq-item details:hover { border-color: var(--c-brass-soft); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.125rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--c-navy); font-weight: 600; font-size: 0.9375rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__arrow { color: var(--c-brass); transition: transform var(--t-fast); font-size: 1.25rem; line-height: 1; font-weight: 700; }
.faq-item details[open] .faq-item__arrow { transform: rotate(180deg); }
.faq-item__a { padding: 0 1.5rem 1.25rem; color: var(--c-graphite); font-size: 0.9375rem; line-height: 1.65; border-top: 1px solid var(--c-border); padding-top: 1rem; margin-top: 0; }

@media (max-width: 900px) {
    .faq__inner { grid-template-columns: 1fr; gap: 2rem; }
    .faq__media { aspect-ratio: 16/10; order: 2; }   /* zdjęcie POD treścią */
    .faq__content { order: 1; }                      /* treść NA GÓRZE */
}

/* ===================================================================== */
/* CTA BANNER                                                              */
/* ===================================================================== */
.cta-banner { background: var(--c-navy); color: #fff; padding: 5rem 0; text-align: center; }
.cta-banner__inner { display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem; }
.cta-banner__heading { color: #fff; font-size: clamp(2rem, 4vw, 3rem); max-width: 24ch; margin-bottom: 1.25rem; }
.cta-banner__lead { color: rgba(255,255,255,0.85); font-size: var(--fs-lead); max-width: 50ch; margin-bottom: 2rem; }
.cta-banner__ctas { display: flex; gap: 0.875rem; flex-wrap: wrap; justify-content: center; }

/* ===================================================================== */
/* KONTAKT — modern: map card LEFT + form card RIGHT                       */
/* ===================================================================== */
.kontakt {
    position: relative;
    background: var(--c-bg);
    padding: 6rem 0 5rem;
    overflow: hidden;
}
.kontakt::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(44,62,84,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44,62,84,0.04) 1px, transparent 1px),
        radial-gradient(ellipse 600px 500px at 100% 0%, rgba(200,168,106,0.08), transparent 60%);
    background-size: 48px 48px, 48px 48px, 100% 100%;
    mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
}
.kontakt__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.kontakt__cross {
    position: absolute;
    color: var(--c-brass);
    font-family: var(--ff-mono);
    font-size: 48px; font-weight: 200;
    line-height: 1; opacity: 0.18;
}
.kontakt__cross--tl { top: 60px;   left: 4%; }
.kontakt__cross--br { bottom: 80px; right: 4%; }
.kontakt > .container { position: relative; z-index: 2; }

.kontakt__header { max-width: 720px; margin: 0 auto 3.5rem; text-align: center; }
.kontakt__header .kicker { color: var(--c-brass); }
.kontakt__heading {
    font-size: clamp(1.875rem, 3.4vw, 2.75rem);
    color: var(--c-navy);
    margin: 0 0 0.875rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.kontakt__lead {
    color: var(--c-graphite);
    font-size: var(--fs-lead);
    max-width: 56ch;
    margin: 0 auto;
}

.kontakt__grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 2rem;
    align-items: stretch;
}
@media (max-width: 960px) {
    .kontakt__grid { grid-template-columns: 1fr; }
    .kontakt__form-card { order: 1; }   /* form FIRST on mobile */
    .kontakt__map-card  { order: 2; }   /* map BELOW form */
}

/* ─── MAP CARD (left) ─── */
.kontakt__map-card {
    position: relative;
    background: var(--c-navy);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}

.kontakt__map-frame {
    position: relative;
    flex: 1;
    min-height: 380px;
    background: var(--c-navy-deep);
}
.kontakt__map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
    filter: saturate(0.85) contrast(1.05);
}
.kontakt__map-placeholder {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.875rem;
    color: rgba(255,255,255,0.55);
    font-size: 0.875rem;
    padding: 2rem;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, rgba(200,168,106,0.04) 0 16px, transparent 16px 32px),
        var(--c-navy-deep);
}
.kontakt__map-placeholder strong { color: var(--c-brass); font-size: 1.0625rem; font-weight: 700; }
.kontakt__map-placeholder em { color: var(--c-brass); font-style: normal; font-family: var(--ff-mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.kontakt__map-placeholder-icon {
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(200,168,106,0.10);
    border: 1px solid rgba(200,168,106,0.3);
    border-radius: var(--radius-md);
    color: var(--c-brass);
}
.kontakt__map-placeholder-icon svg { width: 26px; height: 26px; }

/* Floating overlay on map */
.kontakt__map-overlay {
    position: absolute;
    left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
    background: rgba(31,45,63,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(200,168,106,0.25);
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.875rem;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(20,30,45,0.4);
}
.kontakt__map-pin {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--c-brass);
    color: var(--c-navy-deep);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.kontakt__map-pin svg { width: 20px; height: 20px; }
.kontakt__map-overlay-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kontakt__map-overlay-label {
    color: var(--c-brass);
    font-family: var(--ff-mono);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.kontakt__map-overlay-address {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}
.kontakt__map-overlay-link {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(200,168,106,0.3);
    border-radius: var(--radius-md);
    color: var(--c-brass);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    flex-shrink: 0;
}
.kontakt__map-overlay-link:hover {
    background: var(--c-brass);
    color: var(--c-navy-deep);
    transform: translate(2px, -2px);
}
.kontakt__map-overlay-link svg { width: 16px; height: 16px; }

/* Quick info bar at bottom of map card */
.kontakt__quick-info {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(200,168,106,0.18);
}
.kontakt__quick-info li {
    background: var(--c-navy);
    padding: 1rem 1.25rem;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.kontakt__quick-label {
    color: var(--c-brass);
    font-family: var(--ff-mono);
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}
.kontakt__quick-info a,
.kontakt__quick-info span {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
    transition: color var(--t-fast);
}
.kontakt__quick-info a:hover { color: var(--c-brass); }

@media (max-width: 600px) {
    .kontakt__quick-info { grid-template-columns: 1fr; }
    .kontakt__map-overlay { grid-template-columns: auto 1fr; }
    .kontakt__map-overlay-link { grid-column: 1 / -1; justify-self: end; margin-top: 0.25rem; }
}

/* ─── FORM CARD (right) ─── */
.kontakt__form-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem 2rem;
    box-shadow: var(--shadow-md);
    isolation: isolate;
}
.kontakt__form-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 60px; height: 3px;
    background: var(--c-brass);
}

.kontakt__form-badge {
    display: inline-block;
    background: var(--c-navy);
    color: var(--c-brass);
    padding: 0.5rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--ff-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
}
.kontakt__form-intro {
    color: var(--c-graphite);
    font-size: 0.9375rem;
    margin: 0 0 1.5rem;
    line-height: 1.55;
}

.kontakt__submit {
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: var(--c-brass);
    color: var(--c-navy-deep);
    border: 0;
    padding: 14px 28px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-base);
}
.kontakt__submit svg { width: 16px; height: 16px; }
.kontakt__submit:hover {
    background: var(--c-brass-soft);
    color: var(--c-navy-deep);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.kontakt__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

@media (max-width: 600px) {
    .kontakt__form-card { padding: 2rem 1.25rem 1.5rem; }
}