/* ============================================================
   3dum.cz site.css — sjednoceny styl pro vsechny stranky
   Slozeno z 4 preview souboru: homepage, sluzby, reference, kontakt
   ============================================================ */

/* ============================================================
   PISMO MANROPE — hostovane lokalne (zadne Google Fonts)
   latin + latin-ext (ceska diakritika), vahy 200-600
   ============================================================ */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/manrope-200-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/manrope-200-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/manrope-300-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/manrope-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latinext.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/manrope-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== HOMEPAGE styles (base + hero + about + services + lokality + photo-grid + footer) ===== */

    /* ============ TOP NAV ============ */
    /* Logo — transparent PNG, original proportions preserved */
    /* Triple-jump: hover or .logo-jump class added by JS for idle ping */
    .logo:hover img,
    .logo.jump img {
        animation: logoJump3 1.1s cubic-bezier(.4,1.6,.4,1) both;
    }

    /* Nav items with animated underline hover + active state */
    /* Arrow appears on hover — same as on /reference/ */
    /* Active link — fixed underline */
    /* Letter spans kept in HTML for future use, but no animation —
       menu now uses only the underline hover. */
    nav a .ltr { display: inline-block; }

    /* Mobile menu toggle */
    .nav-toggle span {
        transition: background .2s ease, transform .3s ease;
    }
    /* When menu is open: morph hamburger into X */

    /* ============ MAIN ============ */

    /* HERO — single layered section: slider underneath, text overlaid */
    .hero {
        position: relative;
        height: calc(100vh - 70px);
        min-height: 620px;
        max-height: 920px;
        overflow: hidden;
        margin-top: -1px;
    }
    /* Slide images stack — each one fades in and slowly zooms while active */
    .hero .slides {
        position: absolute;
        inset: 0;
    }
    .hero .slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1.4s ease;
    }
    .hero .slide.active { opacity: 1; }
    .hero .slide img {
        width: 100%; height: 100%;
        object-fit: cover;
        /* mirne zvetseni da prostor pro posun do strany bez prazdnych okraju */
        transform: scale(1.1) translateX(2.5%);
        transition: transform 9s ease-out;
    }
    .hero .slide.active img { transform: scale(1.1) translateX(-2.5%); }
    /* Dark gradient overlay — readability for the text */
    .hero::after {
        content: '';
        position: absolute; inset: 0;
        background:
          linear-gradient(135deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%),
          linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
        pointer-events: none;
        z-index: 1;
    }
    /* Text overlay — bottom-left positioned, generous breathing room */
    .hero-overlay {
        position: relative;
        z-index: 2;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 var(--gutter);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-bottom: 88px;
        padding-top: 140px;
    }
    .hero-meta {
        font-size: 13px;
        letter-spacing: .26em;
        text-transform: uppercase;
        color: rgba(255,255,255,.9);
        font-weight: 500;
        margin-bottom: 32px;
        display: block;
    }
    .hero h1 {
        font-size: clamp(40px, 6.5vw, 96px);
        font-weight: 200;
        letter-spacing: -.03em;
        line-height: 1;
        color: #fff;
        max-width: 980px;
        text-shadow: 0 2px 30px rgba(0,0,0,.25);
        position: relative;
        min-height: 1.05em;
    }
    /* slide titles stacked, only active visible */
    .hero h1 .slide-line {
        display: block;
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
        position: absolute;
        top: 0; left: 0;
        white-space: nowrap;
    }
    .hero h1 .slide-line.active {
        opacity: 1;
        transform: translateY(0);
        position: relative;
    }
    .hero h1 .blue { color: var(--accent); }
    /* Slider dots */
    .hero-dots {
        display: flex;
        gap: 10px;
        align-items: center;
    }
    .hero-dots button {
        width: 28px;
        height: 1px;
        background: rgba(255,255,255,.4);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background .35s ease, width .35s ease;
    }
    .hero-dots button.active {
        background: var(--accent);
        width: 44px;
    }
    .hero-dots button:hover { background: rgba(255,255,255,.9); }
    .hero-dots button.active:hover { background: var(--accent); }
    .hero .sub {
        margin-top: 36px;
        max-width: 540px;
        font-size: 16px;
        line-height: 1.65;
        color: rgba(255,255,255,.9);
        font-weight: 300;
    }
    /* Right-side vertical project label — anchored to TOP, reads downward */
    .hero-side {
        position: absolute;
        top: 140px;                      /* fixed top anchor */
        right: 40px;
        z-index: 2;
        writing-mode: vertical-rl;       /* text flows top-to-bottom on the right */
        text-orientation: mixed;
        color: rgba(255,255,255,.8);
        font-size: 12px;
        letter-spacing: .28em;
        text-transform: uppercase;
        font-weight: 500;
        max-height: calc(100% - 240px);
    }
    /* Scroll indicator — bottom center, subtle animation */
    .hero-scroll {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        color: rgba(255,255,255,.8);
        font-size: 12px;
        letter-spacing: .26em;
        text-transform: uppercase;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .hero-scroll::after {
        content: '';
        width: 1px;
        height: 36px;
        background: linear-gradient(to bottom, rgba(255,255,255,.6) 50%, transparent 50%);
        background-size: 100% 6px;
        animation: scrollHint 1.6s linear infinite;
    }
    @keyframes scrollHint {
        0% { background-position: 0 -6px; }
        100% { background-position: 0 6px; }
    }

    /* SECTION DIVIDER — minimal label between hero strip and about */
    .section-divider {
        max-width: 1320px;
        margin: 0 auto;
        padding: 48px var(--gutter) 0;
        display: flex;
        align-items: center;
        gap: 24px;
    }
    .section-divider .section-num {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .22em;
        color: var(--ink-soft);
    }
    .section-divider .section-name {
        font-size: 12px;
        font-weight: 500;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
    }
    .section-divider .line {
        flex: 1;
        height: 1px;
        background: var(--line);
    }

    /* ABOUT BLOCK */
    .about {
        padding: 60px var(--gutter) 140px;
        max-width: 1320px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 100px;
    }
    .about .label {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 500;
    }
    .about .label .n {
        color: var(--ink-soft);
        margin-right: 14px;
        font-weight: 400;
    }
    .about h2 {
        margin-top: 22px;
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1.05;
    }
    .about-body { max-width: 680px; }
    .about-body p {
        font-size: 17px;
        line-height: 1.7;
        color: var(--ink);
        font-weight: 300;
    }
    .about-body p + p { margin-top: 22px; }

    /* SERVICES PREVIEW */
    .services-preview {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 var(--gutter) 100px;
    }
    .services-preview .head {
        display: flex; justify-content: space-between; align-items: end;
        margin-bottom: 56px;
        padding-top: 60px;
        border-top: 1px solid var(--line);
        flex-wrap: wrap; gap: 24px;
    }
    .services-preview .head .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
    }
    .services-preview .head .label .n {
        color: var(--ink-soft); margin-right: 14px; font-weight: 400;
    }
    .services-preview .head h2 {
        margin-top: 16px;
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: 1.15;
    }
    .services-preview .head a.all {
        position: relative;
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ink);
        padding-bottom: 4px;
        font-weight: 400;
        display: inline-flex; gap: 12px; align-items: center;
    }
    .services-preview .head a.all::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0;
        height: 1px; background: var(--ink);
        transform: scaleX(1); transform-origin: left;
        transition: gap .3s ease, background .25s ease, color .25s ease;
    }
    .services-preview .head a.all:hover { color: var(--accent); gap: 22px; }
    .services-preview .head a.all:hover::after { background: var(--accent); }

    /* Services row — 5 services with icon + brief, no frames */
    .services-row {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 var(--gutter) 100px;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 32px;
    }
    .services-row .srv {
        display: block;
        color: var(--ink);
        transition: color .25s ease;
    }
    .services-row .srv:hover { color: var(--accent); }
    .services-row .srv .ico {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        transition: background .25s ease, transform .25s cubic-bezier(.4,1.4,.5,1);
    }
    .services-row .srv:hover .ico {
        background: var(--accent);
        transform: translateY(-3px);
    }
    .services-row .srv .ico svg {
        width: 24px;
        height: 24px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .services-row .srv .srv-name {
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: -.005em;
        margin-bottom: 8px;
        color: var(--ink);
        transition: color .25s ease;
    }
    .services-row .srv:hover .srv-name { color: var(--accent); }
    .services-row .srv .srv-desc {
        font-size: 13px;
        line-height: 1.6;
        color: var(--ink-mid);
        font-weight: 300;
    }

    /* KDE PROJEKTUJEME — split: map + 2 selected refs */
    .kde {
        max-width: 1320px;
        margin: 0 auto;
        padding: 60px var(--gutter) 100px;
        border-top: 1px solid var(--line);
    }
    .kde-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }
    .kde .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 16px;
        display: block;
    }
    .kde h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: 1.15;
        color: var(--ink);
        margin-bottom: 22px;
    }
    .kde-text {
        font-size: 16px;
        line-height: 1.7;
        color: var(--ink-mid);
        font-weight: 300;
        max-width: 480px;
        margin-bottom: 36px;
    }
    .map-wrap {
        background: transparent;
        margin-bottom: 28px;
    }
    .map-wrap svg {
        width: 100%;
        height: auto;
        max-width: 500px;
        display: block;
    }
    /* CR krajská mapa — sjednocená šedá s bílými hranicemi krajů */
    .map-wrap .region {
        fill: var(--gray);
        stroke: #fff;
        stroke-width: 1;
        stroke-linejoin: round;
    }
    .map-wrap .cz-city-other {
        fill: var(--ink-soft);
    }
    .map-wrap .cz-label-other {
        font-size: 11px;
        font-family: 'Manrope', sans-serif;
        font-weight: 400;
        fill: var(--ink-mid);
        letter-spacing: .04em;
    }
    .map-wrap .cz-city-main {
        fill: var(--accent);
    }
    .map-wrap .cz-label-main {
        font-size: 13px;
        font-family: 'Manrope', sans-serif;
        font-weight: 600;
        fill: var(--ink);
        letter-spacing: .04em;
    }
    /* Ripple effect around Ostrava */
    .map-wrap .ripple {
        fill: var(--accent);
        opacity: 0;
        transform-origin: center;
        transform-box: fill-box;
        animation: cz-ripple 3.6s ease-out infinite;
    }
    .map-wrap .ripple-2 { animation-delay: 1.2s; }
    .map-wrap .ripple-3 { animation-delay: 2.4s; }
    @keyframes cz-ripple {
        0%   { transform: scale(0.2); opacity: .55; }
        80%  { opacity: 0; }
        100% { transform: scale(3); opacity: 0; }
    }

    /* Right column: 2 selected reference cards (stacked vertically) */
    .kde-refs {
        gap: 32px;
    }
    .kde-refs .ref-card .img-wrap {
        aspect-ratio: 16/10;
    }
    .kde-all {
        align-self: flex-start;
        margin-top: 8px;
        position: relative;
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ink);
        padding-bottom: 4px;
        font-weight: 400;
        display: inline-flex;
        gap: 12px;
        align-items: center;
    }
    .kde-all::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: var(--ink);
        transition: gap .3s ease, background .25s ease;
    }
    .kde-all:hover { color: var(--accent); gap: 22px; }
    .kde-all:hover::after { background: var(--accent); }

    /* WORK LIST */
    .work {
        padding: 0 var(--gutter) 140px;
        max-width: 1320px;
        margin: 0 auto;
    }
    .work .head {
        display: flex; justify-content: space-between; align-items: end;
        margin-bottom: 56px;
        padding-top: 60px;
        border-top: 1px solid var(--line);
    }
    .work .head .label {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 500;
    }
    .work .head .label .n { color: var(--ink-soft); margin-right: 14px; font-weight: 400; }
    .work .head h2 {
        margin-top: 22px;
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1.05;
    }
    .work .head a.all {
        position: relative;
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ink);
        padding-bottom: 4px;
        font-weight: 400;
        display: inline-flex; gap: 12px; align-items: center;
    }
    .work .head a.all::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0;
        height: 1px; background: var(--ink);
        transform: scaleX(1); transform-origin: left;
        transition: transform .45s cubic-bezier(.7,0,.2,1), background .25s ease;
    }
    .work .head a.all:hover { color: var(--accent); gap: 22px; transition: gap .3s ease, color .25s ease; }
    .work .head a.all:hover::after { background: var(--accent); }

    /* Reference photo grid — same look as on /reference/ page */
    .ref-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 40px;
    }
    .ref-card { color: var(--ink); }

    /* CTA */
    .cta {
        padding: 120px var(--gutter);
        max-width: 1320px;
        margin: 0 auto;
        border-top: 1px solid var(--line);
    }
    .cta-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: end;
    }
    .cta .label {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 500;
        margin-bottom: 22px;
        display: block;
    }
    .cta .label .n { color: var(--ink-soft); margin-right: 14px; font-weight: 400; }
    .cta h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.03em;
        line-height: 1;
    }
    .cta .actions {
        display: flex; flex-direction: column; gap: 24px;
    }
    .cta .actions .group .key {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 400;
        margin-bottom: 6px;
        display: block;
    }
    .cta .actions .group .val {
        font-size: 22px;
        font-weight: 300;
        letter-spacing: -.01em;
        color: var(--ink);
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 2px;
    }
    .cta .actions .group .val svg {
        width: 18px; height: 18px;
        stroke: var(--accent); fill: none; stroke-width: 1.5;
        stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0;
    }
    .cta .actions a.val::after {
        content: ''; position: absolute; left: 28px; right: 0; bottom: 0;
        height: 1px; background: currentColor;
        transform: scaleX(0); transform-origin: right;
        transition: transform .55s cubic-bezier(.7,0,.2,1);
    }
    .cta .actions a.val:hover { color: var(--accent); }
    .cta .actions a.val:hover::after { transform: scaleX(1); transform-origin: left; }

    /* === LEAD ROW — motivation for inquiry (3-step process) === */
    .lead-row {
        border-bottom: none;
    }
    .lead-row .inner {
        border-top: none;
    }
    /* steps grid with connector lines between */
    /* Dashed connector line between steps (desktop) */
    .lead-row .step .icon-circle svg {
        transition: stroke .35s ease;
    }
    .lead-row .step:hover .icon-circle svg { stroke: #fff; }
    /* Big floating step number — sits over the icon circle */

    /* === FOOTER (legal strip) === */
    /* Navigation column — links stacked vertically, each on its own row */

    /* === Footer social pills — gray circles with white icon === */
    footer .col.social-col .footer-socials a:hover {
        color: #fff;
    }

    /* Reveal */

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
        :root { --gutter: 32px; }
        .nav-inner { padding: 18px var(--gutter); gap: 16px; }

        /* Mobile menu — full overlay (above everything except toggle button) */
        nav {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        body.nav-open { overflow: hidden; }
        body.nav-open nav {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        nav ul {
            flex-direction: column;
            gap: 32px;
            align-items: center;
            background: transparent;
        }
        nav a { font-size: 24px; letter-spacing: .04em; text-transform: none; font-weight: 300; padding: 8px 0; }

        /* Toggle button — always above nav overlay */
        .nav-toggle {
            display: flex;
            position: relative;
            z-index: 160;   /* over the nav overlay */
            background: #fff;
        }
        .nav-toggle span {
            transition: background .25s ease;
        }
        .nav-toggle span::before, .nav-toggle span::after {
            transition: transform .25s ease, top .25s ease;
        }
        body.nav-open .nav-toggle span { background: transparent; }
        body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
        body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

        main { padding-top: 76px; }
        .hero { height: 75vh; min-height: 520px; }
        .hero-overlay { padding-top: 100px; padding-bottom: 56px; }
        /* Na mobilu nech titulek zalamovat - jinak nowrap pretece sirku obrazovky
           a zpusobi vodorovne posouvani / nestejne bocni okraje */
        .hero h1 .slide-line { white-space: normal; }
        .hero-side { display: none; }
        .hero-scroll { bottom: 18px; }
        .strip { height: 60vh; min-height: 380px; }
        .about { padding: 90px var(--gutter); grid-template-columns: 1fr; gap: 32px; }
        .work { padding: 0 var(--gutter) 90px; }
        .services-preview { padding: 0 var(--gutter) 70px; }
        .services-grid { grid-template-columns: repeat(2, 1fr); }
        .kde { padding: 50px var(--gutter) 70px; }
        .kde-inner { grid-template-columns: 1fr; gap: 50px; }
        .map-wrap svg { max-width: 460px; margin: 0 auto; }
        .map-wrap { display: flex; justify-content: center; }
        .cta { padding: 90px var(--gutter); }
        .cta-inner { grid-template-columns: 1fr; gap: 40px; }
        .work-row { grid-template-columns: 36px 1fr auto; gap: 18px; }
        .work-row .meta { display: none; }

        /* Lead block — stack steps on tablet */
        .lead-row { padding: 0 var(--gutter) 80px; }
        .lead-row .inner { padding-top: 60px; }
        .lead-row .head { margin-bottom: 50px; }
        .lead-row .steps { grid-template-columns: 1fr; gap: 48px; margin-bottom: 50px; }
        .lead-row .step::after { display: none; } /* hide horizontal connector on mobile */
        .lead-row .step { padding: 0; }

        /* Footer — stack 4 columns into 2 */
        footer { padding: 36px var(--gutter) 32px; }
        footer .legal-grid {
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }
        footer .col.brand-col { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        :root { --gutter: 22px; }
        .nav-inner { padding: 14px var(--gutter); }
        .logo img { height: 36px; }
        .hero { height: 68vh; min-height: 460px; }
        .hero-overlay { padding-top: 80px; padding-bottom: 40px; }
        .hero-scroll { display: none; }
        .hero h1 br { display: none; }
        .strip .corner { padding: 14px 18px; font-size: 9px; gap: 12px; }

        /* Footer — single column on phones */
        footer .legal-grid { grid-template-columns: 1fr; gap: 28px; }
        footer .col.brand-col { grid-column: auto; }
        footer .bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }
        footer .bottom .legal-links { gap: 16px; }
    }

/* ===== SLUZBY page styles (toc chips, service blocks, phase, druhy staveb) ===== */

    /* ============ TOP NAV ============ */
    nav a {
        padding: 0 0 0 0;
        padding-right: 0;
    }
    /* Arrow that appears on hover */
    nav a::before {
        transition: opacity .3s ease, right .3s ease;
    }
    nav a:hover::before { right: -2px; }

    /* ============ PAGE HEADER ============ */
    .page-head h1 {
        display: inline-flex;
        align-items: baseline;
        gap: 18px;
    }
    .page-head h1 .count {
        font-size: 14px;
        letter-spacing: .22em;
        color: var(--ink-soft);
        font-weight: 500;
        text-transform: uppercase;
    }
    /* TOC chips — compact, fit on single line on desktop */
    /* Arrow hidden by default — only on hover (saves ~24px per chip) */
    .page-head .toc a:hover {
        padding-right: 12px;
    }
    /* Outline variant — used for 'Druhy staveb' to differentiate it */
    .page-head .toc a.outline {
        background: transparent;
        border-color: var(--gray);
        color: var(--ink-mid);
    }
    .page-head .toc a.outline:hover {
        background: transparent;
        border-color: var(--accent);
        color: var(--accent);
    }
    .page-head .toc a.outline:hover svg { stroke: var(--accent); }
    /* Each anchor section gets a scroll offset so the fixed header
       does not cover its top when jumped to via TOC */
    [id="prevereni"],
    [id="studie"],
    [id="povoleni"],
    [id="dozor"],
    [id="pasport"],
    [id="druhy"] {
        scroll-margin-top: 150px;
    }

    /* Hero image strip for the services page */
    .page-image {
        max-width: 1320px;
        margin: 0 auto 100px;
        padding: 0 var(--gutter);
    }
    .page-image .frame {
        position: relative;
        height: 56vh;
        min-height: 380px;
        overflow: hidden;
    }
    .page-image .frame img {
        width: 100%; height: 100%; object-fit: cover;
        transform: scale(1.02);
        opacity: 0;
        transition: opacity 1.4s ease, transform 18s linear;
    }
    .page-image .frame.in img { opacity: 1; transform: scale(1.08); }

    /* ============ PHASE SECTION ============ */
    .phase {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }
    .phase.right .phase-text { order: 2; }
    .phase.right .phase-photo { order: 1; }

    .phase-photo {
        position: relative;
        aspect-ratio: 4/5;
        overflow: hidden;
    }
    .phase-photo img {
        width: 100%; height: 100%; object-fit: cover;
        transform: scale(1.02);
        opacity: 0;
        transition: opacity 1.2s ease, transform 14s linear;
    }
    .phase-photo.in img { opacity: 1; transform: scale(1.08); }
    .phase-photo .frame-no {
        position: absolute;
        top: 32px;
        left: 32px;
        z-index: 2;
        color: rgba(255,255,255,.92);
        font-size: 13px;
        letter-spacing: .22em;
        text-transform: uppercase;
        font-weight: 500;
    }
    .phase-photo::after {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, transparent 35%);
        pointer-events: none;
    }

    .phase-text .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 18px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .phase-text .label svg,
    .phase-mini-left .label svg,
    .types .head .col-label .label svg,
    .pasport .head .label svg {
        width: 18px; height: 18px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }
    .phase-mini-left .label,
    .pasport .head .label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    /* Section meta key icons (Co dostanete, Doba zpracování) */
    .phase-meta .group .key {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .phase-meta .group .key svg {
        width: 13px; height: 13px;
        stroke: var(--ink-soft);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .phase-text h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1;
        margin-bottom: 32px;
    }
    .phase-text p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--ink);
        font-weight: 300;
        margin-bottom: 18px;
        max-width: 560px;
    }
    .phase-text p + p { margin-top: 0; }
    .phase-text p strong { font-weight: 500; }
    .phase-note {
        margin-top: 12px;
        padding: 16px 20px;
        background: rgba(45,160,206,.06);
        border-left: 2px solid var(--accent);
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: var(--ink) !important;
    }
    .phase-note strong { color: var(--accent) !important; }

    /* Documentation contents block (per vyhláška) */
    .doc-contents {
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
    }
    .doc-contents .heading {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 18px;
    }
    .doc-contents .heading svg {
        width: 14px; height: 14px;
        stroke: var(--ink-soft);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .doc-contents .list { display: flex; flex-direction: column; gap: 0; }
    .doc-contents .row {
        display: grid;
        grid-template-columns: 36px 1fr;
        gap: 18px;
        padding: 10px 0;
        border-bottom: 1px dashed var(--line);
        align-items: baseline;
    }
    .doc-contents .row:last-child { border-bottom: none; }
    .doc-contents .row .letter {
        font-size: 13px;
        font-weight: 600;
        color: var(--accent);
        letter-spacing: .1em;
    }
    .doc-contents .row .name {
        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
        color: var(--ink);
    }
    .doc-contents .row .name .sub {
        display: block;
        color: var(--ink-mid);
        font-size: 13px;
        font-weight: 300;
        margin-top: 2px;
    }

    /* AUTORSKÝ DOZOR — compact horizontal block */
    .phase-mini {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    /* Prvni sekce hned pod ukotvenou listou uz nema vlastni horni linku -
       tu dela spodni okraj listy (jinak by byly dve linky na sobe) */
    [id="prevereni"] { border-top: none; }
    .phase-mini-inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 80px;
        align-items: start;
    }
    .phase-mini-left .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 16px;
    }
    .phase-mini-left h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: 1.05;
    }
    .phase-mini-right p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--ink);
        font-weight: 300;
        margin-bottom: 28px;
    }
    .phase-mini-right .phase-meta {
        margin-top: 0;
        padding-top: 20px;
    }
    .phase-mini-right .phase-meta .val {
        font-size: 14px;
        line-height: 1.65;
        color: var(--ink);
    }

    /* Phase meta 3-column variant (used for Prověření pozemku) */
    .phase-meta.phase-meta-3 {
        grid-template-columns: 2fr 1fr 1fr;
    }

    /* What you get + duration line */
    .phase-meta {
        margin-top: 40px;
        padding-top: 28px;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .phase-meta .group .key {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 10px;
        display: block;
    }
    .phase-meta .group .val {
        font-size: 15px;
        color: var(--ink);
        font-weight: 300;
        line-height: 1.6;
    }
    .phase-meta .group .val ul {
        list-style: none;
        padding: 0;
    }
    .phase-meta .group .val li {
        padding: 3px 0;
    }
    .phase-meta .group .val li .sub {
        display: block;
        font-size: 13px;
        color: var(--ink-soft);
        font-weight: 300;
        margin-top: 1px;
    }

    /* ============ PASPORT BLOCK — white bg, two-service layout ============ */
    .pasport {
        background: #fff;
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .pasport .inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: start;
    }
    .pasport .head .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 18px;
        display: block;
    }
    .pasport h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1.05;
        margin-bottom: 18px;
        color: var(--ink);
    }
    .pasport .head .summary {
        font-size: 16px;
        line-height: 1.65;
        color: var(--ink-mid);
        font-weight: 300;
        max-width: 480px;
    }
    /* Two-service cards as the right column */
    .pasport .services {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .pasport .service {
        padding: 28px 0;
        border-top: 1px solid var(--line);
    }
    .pasport .service:first-child { border-top: none; padding-top: 0; }
    .pasport .service .name {
        font-size: 22px;
        font-weight: 400;
        letter-spacing: -.005em;
        color: var(--ink);
        margin-bottom: 8px;
    }
    .pasport .service .sub {
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 500;
        margin-bottom: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .pasport .service .sub svg {
        width: 16px; height: 16px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .pasport .service p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--ink-mid);
        font-weight: 300;
        margin: 0;
    }
    .pasport .service .when {
        margin-top: 12px;
        font-size: 13px;
        color: var(--ink-soft);
        line-height: 1.5;
    }

    /* ============ DRUHY STAVEB — simple list ============ */
    .types {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .types .head {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 80px;
        margin-bottom: 60px;
        align-items: end;
    }
    .types .head .col-label .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .types .head h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1;
    }
    /* DRUHY STAVEB — 2x2 photo grid */
    .types-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 44px 44px;
    }
    /* Druhy staveb - stejny vzhled jako sluzby/kroky: ikona v sedem kolecku */
    .type-card { display: block; }
    .type-card .type-ico {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        transition: background .3s ease, transform .3s cubic-bezier(.4,1.4,.5,1);
    }
    .type-card:hover .type-ico {
        background: var(--accent);
        transform: translateY(-3px);
    }
    .type-card .type-ico svg {
        width: 28px;
        height: 28px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        display: block;
    }
    .type-card .meta {
        display: block;
        margin: 0 0 10px;
        font-size: 12px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
    }
    .type-card .name {
        display: block;
        font-size: clamp(22px, 2.4vw, 28px);
        font-weight: 300;
        letter-spacing: -.01em;
        line-height: 1.15;
        color: var(--ink);
        margin-bottom: 12px;
    }
    .type-card .desc {
        display: block;
        max-width: 420px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--ink-mid);
        font-weight: 300;
    }

    /* ============ LEAD ROW (predpaticka) ============ */
    .lead-row .inner {
        padding-top: 0;
    }

    /* ============ FOOTER ============ */

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
        :root { --gutter: 32px; }
        .nav-inner { padding: 18px var(--gutter); gap: 16px; }
        nav {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        body.nav-open { overflow: hidden; }
        body.nav-open nav { opacity: 1; visibility: visible; pointer-events: auto; }
        nav ul { flex-direction: column; gap: 32px; align-items: center; background: transparent; }
        nav a { font-size: 24px; letter-spacing: .04em; text-transform: none; font-weight: 300; padding: 8px 0; }
        .nav-toggle { display: flex; position: relative; z-index: 160; background: #fff; }

        main { padding-top: 76px; }
        .page-head { grid-template-columns: 1fr; gap: 24px; padding: 50px var(--gutter) 30px; }
        .page-image { margin-bottom: 60px; }
        .page-image .frame { height: 44vh; min-height: 280px; }
        .phase { padding: 70px var(--gutter); grid-template-columns: 1fr; gap: 36px; }
        /* Na mobilu vzdy fotka NAD textem (i u bezne .phase i u .phase.right) */
        .phase .phase-photo { order: 0; }
        .phase .phase-text { order: 1; }
        .phase.right .phase-photo { order: 0; }
        .phase.right .phase-text { order: 1; }
        .phase-photo { aspect-ratio: 4/3; }
        .phase-mini { padding: 50px var(--gutter); }
        .phase-mini-inner { grid-template-columns: 1fr; gap: 28px; }
        .pasport { padding: 60px var(--gutter); margin: 40px auto; }
        .pasport .inner { grid-template-columns: 1fr; gap: 36px; }
        .types { padding: 70px var(--gutter); }
        .types .head { display: block; }
        .types-grid { grid-template-columns: 1fr; gap: 36px; }
        .lead-row { padding: 0 var(--gutter) 36px; }
        .lead-row .inner { padding-top: 36px; }
        .lead-row .steps { grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; }
        .lead-row .step::after { display: none; }
        .lead-row .step { padding: 0; }
        footer { padding: 36px var(--gutter) 32px; }
        footer .legal-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
        footer .col.brand-col { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        :root { --gutter: 22px; }
        .nav-inner { padding: 14px var(--gutter); }
        .logo img { height: 36px; }
        .page-head h1 { font-size: clamp(40px, 10vw, 70px); }
        footer .legal-grid { grid-template-columns: 1fr; gap: 28px; }
        footer .col.brand-col { grid-column: auto; }
        footer .bottom {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }
    }

/* ===== REFERENCE page styles (filter chips, ref grid 2-col, lead row) ===== */

    /* ============ TOP NAV ============ */

    /* ============ PAGE HEADER ============ */
    .page-head {
        padding: 80px var(--gutter) 50px;
    }
    .page-head h1 {
        margin-bottom: 30px;
    }
    .page-head .lede {
        margin-bottom: 40px;
    }
    /* Filter — rounded pill chips, same style as TOC on other pages */
    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }
    .filters button {
        display: inline-flex;
        align-items: center;
        padding: 9px 18px;
        background: var(--gray);
        border: 1px solid transparent;
        color: var(--ink);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -.005em;
        border-radius: 999px;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
        transition: background .25s ease, color .25s ease;
    }
    .filters button:hover {
        background: var(--accent);
        color: #fff;
    }
    .filters button.active {
        background: var(--ink);
        color: #fff;
    }

    /* ============ REFERENCE GRID ============ */
    .refs {
        max-width: 1320px;
        margin: 0 auto;
        padding: 30px var(--gutter) 100px;
    }
    .refs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 56px 40px;
    }
    .ref-card {
        display: block;
        transition: opacity .35s ease, transform .35s ease;
    }
    .ref-card.hidden {
        display: none;
    }
    .ref-card .img-wrap {
        position: relative;
        aspect-ratio: 4/3;
        overflow: hidden;
        background: var(--gray);
        margin-bottom: 16px;
    }
    .ref-card .img-wrap img {
        width: 100%; height: 100%; object-fit: cover;
        transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
    }
    .ref-card:hover .img-wrap img { transform: scale(1.06); }
    .ref-card .meta {
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 6px;
    }
    .ref-card .name {
        font-size: 17px;
        font-weight: 400;
        letter-spacing: -.005em;
        line-height: 1.3;
        color: var(--ink);
        transition: color .25s ease;
    }
    .ref-card:hover .name { color: var(--accent); }

    /* ============ LEAD ROW (předpatička) ============ */
    .lead-row {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .lead-row .head {
        text-align: center;
        margin-bottom: 36px;
    }
    .lead-row .label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 12px;
        display: block;
    }
    .lead-row h3 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: 1.15;
        color: var(--ink);
    }
    .lead-row .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-bottom: 36px;
        position: relative;
    }
    .lead-row .step {
        padding: 0 32px;
        position: relative;
        text-align: center;
    }
    .lead-row .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 32px;
        right: -28px;
        width: 56px;
        height: 1px;
        background: repeating-linear-gradient(to right, var(--ink-soft) 0 4px, transparent 4px 8px);
        opacity: .4;
    }
    .lead-row .step .icon-circle {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: var(--gray);
        margin: 0 auto 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: background .35s ease, transform .35s cubic-bezier(.4,1.4,.5,1);
    }
    .lead-row .step:hover .icon-circle {
        background: var(--accent);
        transform: scale(1.06);
    }
    .lead-row .step .icon-circle svg {
        width: 26px;
        height: 26px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .lead-row .step .num-badge {
        position: absolute;
        top: -8px;
        right: 50%;
        transform: translateX(42px);
        background: var(--gray);
        color: #fff;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .02em;
        z-index: 2;
        border: 2px solid #fff;
        transition: background .35s ease, color .35s ease;
    }
    .lead-row .step:hover .num-badge {
        background: var(--accent);
        color: #fff;
    }
    .lead-row .step .title {
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -.005em;
        line-height: 1.3;
        margin-bottom: 8px;
        color: var(--ink);
    }
    .lead-row .step .desc {
        font-size: 13px;
        color: var(--ink-mid);
        line-height: 1.6;
        font-weight: 300;
        max-width: 260px;
        margin: 0 auto;
    }
    .lead-row .lead-cta { text-align: center; }
    .lead-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 30px;
        background: var(--gray);
        color: var(--ink);
        font-size: 12px;
        letter-spacing: .16em;
        text-transform: uppercase;
        font-weight: 500;
        border: none;
        cursor: pointer;
        font-family: inherit;
        border-radius: 999px;
        transition: gap .3s ease, background .3s ease, color .3s ease;
    }
    .lead-btn:hover {
        gap: 18px;
        background: var(--accent);
        color: #fff;
    }

    /* ============ FOOTER ============ */

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1024px) {
        :root { --gutter: 32px; }
        .nav-inner { padding: 18px var(--gutter); gap: 16px; }
        nav {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        body.nav-open { overflow: hidden; }
        body.nav-open nav { opacity: 1; visibility: visible; pointer-events: auto; }
        nav ul { flex-direction: column; gap: 32px; align-items: center; background: transparent; }
        nav a { font-size: 24px; letter-spacing: .04em; text-transform: none; font-weight: 300; padding: 8px 0; }
        nav a::before { display: none; }
        .nav-toggle { display: flex; position: relative; z-index: 160; background: #fff; }

        main { padding-top: 76px; }
        .page-head { padding: 50px var(--gutter) 32px; }
        .refs { padding: 24px var(--gutter) 70px; }
        .refs-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
        footer .legal-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
        footer .col.brand-col { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        :root { --gutter: 22px; }
        .nav-inner { padding: 14px var(--gutter); }
        .logo img { height: 36px; }
        .filters .label { width: 100%; margin-bottom: 4px; }
        .refs-grid { grid-template-columns: 1fr; gap: 28px; }
        footer .legal-grid { grid-template-columns: 1fr; gap: 28px; }
        footer .col.brand-col { grid-column: auto; }
        footer .bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    }

/* ===== KONTAKT page styles (chat, contact list, company info, persons) ===== */
    :root {
        --accent: #2da0ce;
        --ink: #1a1a1a;
        --ink-mid: #555;
        --ink-soft: #999;
        --line: #e8e8e8;
        --gray: #d8d8d8;
        --bg: #ffffff;
        --gutter: 120px;
        --maxw: 1320px;
    }
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
        font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
        font-weight: 300;
        font-size: 15px;
        line-height: 1.55;
        color: var(--ink);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ============ TOP NAV ============ */
    header {
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 100;
        background: rgba(255,255,255,.94);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid transparent;
        transition: border-color .3s ease;
    }
    header.scrolled { border-bottom-color: var(--line); }
    .nav-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 18px var(--gutter);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
    }
    .logo { display: inline-block; line-height: 0; }
    .logo img {
        height: 42px;
        width: auto;
        display: block;
        transform-origin: 50% 100%;
    }
    .logo:hover img, .logo.jump img {
        animation: logoJump3 1.1s cubic-bezier(.4,1.6,.4,1) both;
    }
    @keyframes logoJump3 {
        0%   { transform: translateY(0); }
        12%  { transform: translateY(-9px); }
        24%  { transform: translateY(0); }
        38%  { transform: translateY(-7px); }
        50%  { transform: translateY(0); }
        64%  { transform: translateY(-5px); }
        76%  { transform: translateY(0); }
        100% { transform: translateY(0); }
    }
    nav ul { list-style: none; display: flex; gap: 48px; align-items: center; }
    nav a {
        position: relative;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink);
        padding: 0;
        line-height: 1;
        display: inline-block;
        transition: padding-right .3s ease;
    }
    nav a::after {
        content: '';
        position: absolute;
        /* right: .14em kompenzuje prostrkani (letter-spacing) za poslednim pismenem,
           aby podtrzeni sedelo presne pod textem, ne pod prazdnou mezerou za nim */
        left: 0; right: .14em;
        bottom: -7px;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .55s cubic-bezier(.7,0,.2,1);
    }
    nav a::before {
        content: '\2197';
        position: absolute;
        right: -2px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
        color: currentColor;
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }
    nav a:hover { padding-right: 22px; }
    /* pri najeti zustava podtrzeni pod textem, ne pod mistem pro sipku */
    nav a:hover::after { transform: scaleX(1); transform-origin: left center; right: calc(22px + .14em); }
    nav a:hover::before { opacity: 1; }
    nav a.active { color: var(--accent); }
    nav a.active::after {
        transform: scaleX(1);
        background: var(--accent);
        transform-origin: left center;
        transition: none;
    }
    .nav-toggle {
        display: none;
        background: transparent;
        border: none;
        padding: 0;
        width: 36px; height: 36px;
        align-items: center; justify-content: center;
        cursor: pointer;
        position: relative;
        z-index: 200;
    }
    .nav-toggle span {
        width: 18px; height: 1.5px; background: var(--ink); position: relative;
        transition: background .2s ease;
    }
    .nav-toggle span::before, .nav-toggle span::after {
        content: ''; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
        transition: transform .3s ease, top .3s ease;
    }
    .nav-toggle span::before { top: -6px; }
    .nav-toggle span::after { top: 6px; }
    body.nav-open .nav-toggle span { background: transparent; }
    body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
    body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }

    main { padding-top: 78px; }

    /* ============ PAGE HEADER ============ */
    .page-head {
        max-width: 1320px;
        margin: 0 auto;
        padding: 40px var(--gutter) 35px;
    }
    .page-head h1 {
        font-size: clamp(38px, 5vw, 64px);
        font-weight: 200;
        letter-spacing: -.025em;
        line-height: 1;
        color: var(--ink);
        margin-bottom: 36px;
    }
    /* TOC chips */
    .page-head .toc {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 40px;
    }
    .page-head .toc a {
        display: inline-flex;
        align-items: center;
        padding: 9px 18px;
        background: var(--gray);
        border: 1px solid transparent;
        color: var(--ink);
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -.005em;
        border-radius: 999px;
        white-space: nowrap;
        transition: background .25s ease, border-color .25s ease, color .25s ease, padding-right .25s ease;
    }
    .page-head .toc a svg {
        width: 0;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
        opacity: 0;
        margin-left: 0;
        transition: width .25s ease, opacity .25s ease, margin-left .25s ease, transform .25s ease;
    }
    .page-head .toc a:hover {
        background: var(--accent);
        color: #fff;
        padding-right: 14px;
    }
    .page-head .toc a:hover svg {
        opacity: 1;
        width: 13px;
        margin-left: 7px;
        transform: translate(0, -1px);
    }
    .page-head .lede {
        font-size: 18px;
        line-height: 1.6;
        max-width: 680px;
        color: var(--ink-mid);
        font-weight: 300;
    }

    /* Scroll offset for anchor links */
    [id="spojeni"], [id="poptavka"], [id="firma"], [id="loga"] {
        scroll-margin-top: 110px;
    }

    /* ============ KONTAKTY + CHAT side-by-side ============ */
    .contact-chat {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .contact-chat .inner {
        display: grid;
        grid-template-columns: 1.4fr 1fr;
        gap: 80px;
        align-items: start;
    }
    .contact-chat .head {
        margin-bottom: 40px;
    }
    .section-label {
        font-size: 14px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--accent);
        font-weight: 600;
        margin-bottom: 16px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .section-label svg {
        width: 18px; height: 18px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .section-h2 {
        font-size: clamp(26px, 2.6vw, 34px);
        font-weight: 200;
        letter-spacing: -.02em;
        line-height: 1.15;
        color: var(--ink);
    }
    /* Contact list — rows like firma-block (label left / value right) */
    .contact-list {
        display: flex;
        flex-direction: column;
    }
    .contact-item {
        display: grid;
        grid-template-columns: 140px 1fr auto;
        gap: 16px;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        align-items: baseline;
        position: relative;
    }
    .contact-item:last-child { border-bottom: none; }
    .contact-item .key {
        font-size: 13px;
        color: var(--ink-soft);
        font-weight: 400;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .contact-item .key svg {
        width: 14px; height: 14px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }
    .contact-item .val {
        font-size: 15px;
        color: var(--ink);
        font-weight: 400;
        letter-spacing: -.005em;
        line-height: 1.4;
    }
    .contact-item a.val {
        position: relative;
        padding-bottom: 1px;
        display: inline-block;
        width: fit-content;
    }
    .contact-item a.val::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    .contact-item a.val:hover { color: var(--accent); }
    .contact-item a.val:hover::after { transform: scaleX(1); transform-origin: left; }
    .contact-item .copy-btn {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .25s ease;
        padding: 0;
        align-self: center;
    }
    .contact-item .copy-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .contact-item .copy-btn:hover { color: var(--accent); }
    .contact-item .copy-btn.copied { color: #4caf50; }

    /* Poptavka chat container */
    .poptavka-block {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .gdpr-note {
        margin-top: 14px;
        font-size: 12px;
        line-height: 1.6;
        color: var(--ink-soft);
        font-weight: 300;
    }
    .gdpr-note a {
        color: var(--ink-mid);
        position: relative;
        padding-bottom: 1px;
    }
    .gdpr-note a::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    .gdpr-note a:hover { color: var(--accent); }
    .gdpr-note a:hover::after { transform: scaleX(1); transform-origin: left; }
    /* Chat — decent rounded frame, no inner backgrounds, just lines */
    #ai-chat {
        font-family: inherit;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
    }
    #ai-disclaimer {
        padding: 11px 20px;
        font-size: 12px;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--line);
    }
    #ai-disclaimer svg {
        width: 14px; height: 14px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        flex-shrink: 0;
    }
    #ai-messages {
        padding: 22px 20px;
        height: 300px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    #ai-messages .msg {
        max-width: 80%;
        font-size: 14px;
        line-height: 1.55;
        padding: 10px 14px;
        border-radius: 12px;
    }
    #ai-messages .msg.bot {
        background: #f6f6f6;
        color: var(--ink);
        align-self: flex-start;
        border-bottom-left-radius: 4px;
    }
    #ai-messages .msg.user {
        background: var(--gray);
        color: var(--ink);
        align-self: flex-end;
        border-bottom-right-radius: 4px;
    }
    #ai-chips {
        padding: 4px 20px 14px;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    #ai-chips button {
        border: 1px solid transparent;
        background: var(--gray);
        border-radius: 999px;
        padding: 7px 14px;
        font-size: 13px;
        cursor: pointer;
        font-family: inherit;
        color: var(--ink);
        transition: background .25s ease, color .25s ease;
    }
    #ai-chips button:hover {
        background: var(--accent);
        color: #fff;
    }
    #ai-input-wrap {
        display: flex;
        gap: 10px;
        padding: 14px 20px;
        border-top: 1px solid var(--line);
        background: transparent;
        align-items: center;
    }
    #ai-input {
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 9px 16px;
        font-size: 14px;
        outline: none;
        font-family: inherit;
        background: #fff;
        transition: border-color .25s ease;
        color: var(--ink);
    }
    #ai-input:focus { border-color: var(--accent); }
    /* Send button — same style as our gray pill across the site */
    #ai-send {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 18px;
        background: var(--gray);
        border: none;
        border-radius: 999px;
        cursor: pointer;
        color: var(--ink);
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 500;
        font-family: inherit;
        transition: background .25s ease, color .25s ease, gap .25s ease;
        white-space: nowrap;
    }
    #ai-send:hover {
        background: var(--accent);
        color: #fff;
        gap: 14px;
    }

    /* ============ FIRMA — provozovatel + fakturace ============ */
    .firma {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .firma .head {
        margin-bottom: 56px;
    }
    .firma-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
    .firma-block .block-label {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 18px;
        display: block;
    }
    .firma-block .row {
        display: grid;
        grid-template-columns: 140px 1fr auto;
        gap: 16px;
        padding: 12px 0;
        border-bottom: 1px solid var(--line);
        align-items: baseline;
    }
    .firma-block .row:last-child { border-bottom: none; }
    .firma-block .row .label {
        font-size: 13px;
        color: var(--ink-soft);
        font-weight: 400;
    }
    .firma-block .row .value {
        font-size: 15px;
        color: var(--ink);
        font-weight: 400;
    }
    .firma-block .row .copy-btn {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .25s ease;
        padding: 0;
        align-self: center;
    }
    .firma-block .row .copy-btn svg {
        width: 14px; height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .firma-block .row .copy-btn:hover { color: var(--accent); }
    .firma-block .row .copy-btn.copied { color: #4caf50; }
    .firma-block .row .value a {
        position: relative;
        padding-bottom: 1px;
    }
    .firma-block .row .value a::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    .firma-block .row .value a:hover { color: var(--accent); }
    .firma-block .row .value a:hover::after { transform: scaleX(1); transform-origin: left; }

    /* People */
    .lide-grid {
        margin-top: 60px;
        padding-top: 56px;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
    .person {
        display: flex;
        gap: 24px;
        align-items: flex-start;
    }
    .person .avatar {
        width: 64px; height: 64px;
        border-radius: 50%;
        background: var(--gray);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .person .avatar svg {
        width: 32px; height: 32px;
        stroke: #fff;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .person .info { flex: 1; }
    .person .role {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 10px;
    }
    .person .name {
        font-size: clamp(22px, 2.4vw, 28px);
        font-weight: 300;
        letter-spacing: -.01em;
        margin-bottom: 10px;
        color: var(--ink);
    }
    .person a.email {
        font-size: 16px;
        color: var(--ink);
        position: relative;
        padding-bottom: 1px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .person a.email svg {
        width: 16px; height: 16px;
        stroke: var(--accent);
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .person a.email::after {
        content: '';
        position: absolute;
        left: 24px; right: 0; bottom: 0;
        height: 1px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    .person a.email:hover { color: var(--accent); }
    .person a.email:hover::after { transform: scaleX(1); transform-origin: left; }
    .person .email-row {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    .person .email-row .copy-btn {
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--ink-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color .25s ease;
        padding: 0;
    }
    .person .email-row .copy-btn svg {
        width: 14px; height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .person .email-row .copy-btn:hover { color: var(--accent); }
    .person .email-row .copy-btn.copied { color: #4caf50; }

    /* ============ LOGA ============ */
    .loga {
        max-width: 1320px;
        margin: 0 auto;
        padding: 90px var(--gutter);
        border-top: 1px solid var(--line);
    }
    .loga .head {
        margin-bottom: 56px;
    }
    .loga-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .logo-block {
        padding: 40px;
        border: 1px solid var(--line);
        background: #fafafa;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .logo-block.dark {
        background: var(--ink);
    }
    .logo-block .preview {
        height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .logo-block .preview img {
        height: 56px;
        width: auto;
    }
    .logo-block .label {
        font-size: 12px;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
    }
    .logo-block.dark .label { color: rgba(255,255,255,.6); }
    .logo-block .name {
        font-size: 18px;
        font-weight: 400;
        color: var(--ink);
    }
    .logo-block.dark .name { color: #fff; }
    .logo-block .downloads {
        display: flex;
        gap: 14px;
    }
    .logo-block .downloads a {
        font-size: 13px;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 500;
        color: var(--ink);
        padding: 8px 14px;
        border: 1px solid var(--line);
        border-radius: 999px;
        transition: border-color .25s ease, background .25s ease, color .25s ease;
    }
    .logo-block.dark .downloads a {
        color: #fff;
        border-color: rgba(255,255,255,.2);
    }
    .logo-block .downloads a:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

    /* ============ FOOTER ============ */
    footer {
        padding: 36px var(--gutter) 32px;
        max-width: 1320px;
        margin: 0 auto;
        border-top: 1px solid var(--line);
    }
    footer .legal-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--line);
    }
    footer .col h4 {
        font-size: 12px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 500;
        margin-bottom: 14px;
    }
    footer .col p, footer .col a {
        font-size: 13px;
        color: var(--ink);
        font-weight: 300;
        line-height: 1.7;
        display: block;
    }
    footer .col p { color: var(--ink-mid); }
    footer .col a {
        position: relative;
        padding-bottom: 1px;
        display: flex;
        width: fit-content;
        max-width: 100%;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
    }
    footer .col a svg {
        width: 14px; height: 14px;
        stroke: var(--accent); fill: none; stroke-width: 1.5;
        stroke-linecap: round; stroke-linejoin: round;
        flex-shrink: 0;
    }
    footer .col a::after {
        content: ''; position: absolute; left: 22px; right: 0; bottom: 0;
        height: 1px; background: currentColor;
        transform: scaleX(0); transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    footer .col a:hover { color: var(--accent); }
    footer .col a:hover::after { transform: scaleX(1); transform-origin: left; }
    footer .col.nav-col a {
        display: block;
        width: fit-content;
        margin-bottom: 6px;
    }
    footer .col.nav-col a::after { left: 0; }
    footer .col.social-col .footer-socials {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 6px;
    }
    footer .col.social-col .footer-socials a {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--gray);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        gap: 0;
        transition: background .25s ease, transform .25s cubic-bezier(.4,1.4,.5,1);
    }
    footer .col.social-col .footer-socials a:hover {
        background: var(--accent);
        transform: translateY(-3px);
    }
    footer .col.social-col .footer-socials a::after { display: none; }
    footer .col.social-col .footer-socials a svg {
        width: 17px;
        height: 17px;
        fill: #fff;
        stroke: none;
        flex-shrink: 0;
    }
    footer .brand-col img { height: 32px; width: auto; margin-bottom: 12px; }
    footer .brand-col p { max-width: 360px; }
    footer .bottom {
        padding-top: 24px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink-soft);
        font-weight: 400;
    }
    footer .bottom span { display: inline-block; }
    footer .bottom .legal-links { display: inline-flex; gap: 24px; flex-wrap: wrap; }
    footer .bottom .legal-links a {
        position: relative;
        color: var(--ink-soft);
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
        font-weight: 400;
        padding-bottom: 2px;
        display: inline-block;
    }
    footer .bottom .legal-links a::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: 0;
        height: 1px; background: currentColor;
        transform: scaleX(0); transform-origin: right;
        transition: transform .5s cubic-bezier(.7,0,.2,1);
    }
    footer .bottom .legal-links a:hover { color: var(--accent); }
    footer .bottom .legal-links a:hover::after { transform: scaleX(1); transform-origin: left; }

    .reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
    }
    .reveal.in { opacity: 1; transform: translateY(0); }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 1700px) { :root { --gutter: 96px; } }
    @media (max-width: 1500px) { :root { --gutter: 80px; } }
    @media (max-width: 1300px) { :root { --gutter: 60px; } }
    @media (max-width: 1100px) { :root { --gutter: 44px; } }
    @media (max-width: 1024px) {
        :root { --gutter: 32px; }
        .nav-inner { padding: 18px var(--gutter); gap: 16px; }
        nav {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: #fff;
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 150;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
        }
        body.nav-open { overflow: hidden; }
        body.nav-open nav { opacity: 1; visibility: visible; pointer-events: auto; }
        nav ul { flex-direction: column; gap: 32px; align-items: center; background: transparent; }
        nav a { font-size: 24px; letter-spacing: .04em; text-transform: none; font-weight: 300; padding: 8px 0; }
        nav a::before { display: none; }
        .nav-toggle { display: flex; position: relative; z-index: 160; background: #fff; }

        main { padding-top: 76px; }
        .page-head { padding: 50px var(--gutter) 40px; }
        .contact-chat .inner { grid-template-columns: 1fr; gap: 60px; }
        .firma-grid { grid-template-columns: 1fr; gap: 40px; }
        .lide-grid { grid-template-columns: 1fr; gap: 36px; }
        .loga-grid { grid-template-columns: 1fr; gap: 24px; }
        footer .legal-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
        footer .col.brand-col { grid-column: 1 / -1; }
    }
    @media (max-width: 640px) {
        :root { --gutter: 22px; }
        .nav-inner { padding: 14px var(--gutter); }
        .logo img { height: 36px; }
        .contact-grid { grid-template-columns: 1fr; }
        .firma-block .row { grid-template-columns: 1fr; gap: 4px; }
        footer .legal-grid { grid-template-columns: 1fr; gap: 28px; }
        footer .col.brand-col { grid-column: auto; }
        footer .bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
    }

/* ============================================================
   MOBILE OVERRIDES (cascade winner) - vlozeno na konec aby
   prebilo vsechny duplicitni definice ze 4 zkombinovanych preview.
   ============================================================ */

@media (max-width: 1024px) {
    /* ===== TOP NAV ===== */
    header { z-index: 100; }
    .nav-inner {
        max-width: 100%;
        padding: 14px 22px !important;
        gap: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav-toggle {
        display: flex !important;
        position: relative;
        z-index: 200;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    nav {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: #fff;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
        z-index: 150;
        display: flex !important;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }
    body.nav-open nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    body.nav-open { overflow: hidden; }
    nav ul {
        list-style: none;
        flex-direction: column !important;
        gap: 28px !important;
        align-items: center !important;
        padding: 0;
        margin: 0;
    }
    nav li {
        display: block !important;
        list-style: none;
    }
    nav a {
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        letter-spacing: .04em !important;
        text-transform: none !important;
        padding: 8px 16px !important;
        color: var(--ink);
        opacity: 1 !important;
        visibility: visible !important;
    }
    nav a::after,
    nav a::before { display: none !important; }
    nav a.active { color: var(--accent); }

    /* ===== HOMEPAGE: Hero ===== */
    main { padding-top: 64px; }
    .hero {
        height: 78vh;
        min-height: 460px;
    }
    .hero-overlay {
        padding: 90px 22px 60px !important;
    }
    .hero h1 {
        font-size: clamp(32px, 9vw, 56px) !important;
    }
    .hero h1 br { display: none; }
    .hero .sub {
        font-size: 14px !important;
        max-width: 100%;
    }
    .hero-side { display: none; }
    .hero-scroll { display: none; }
    .hero-dots {
        right: 22px !important;
        bottom: 22px;
    }
    .hero-meta { font-size: 12px; margin-bottom: 18px !important; }

    /* ===== HOMEPAGE: About ===== */
    .about {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 50px 22px 60px !important;
    }
    .about h2 { font-size: clamp(22px, 6vw, 30px) !important; }
    .about-body p { font-size: 15px !important; }

    /* ===== HOMEPAGE: Services row (5 ikon) ===== */
    .services-row {
        grid-template-columns: 1fr 1fr !important;
        padding: 0 22px 60px !important;
        gap: 22px !important;
    }
    .services-row .srv { padding: 18px 14px !important; }
    .services-row .srv .ico {
        width: 48px !important;
        height: 48px !important;
    }
    .services-row .srv .srv-name { font-size: 14px !important; }
    .services-row .srv .srv-desc { font-size: 12px !important; }

    /* ===== HOMEPAGE: Kde projektujeme (mapa + reference) ===== */
    .kde {
        padding: 50px 22px 60px !important;
    }
    .kde-inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .kde h2 { font-size: clamp(22px, 6vw, 30px) !important; }
    .kde-text { font-size: 14px !important; }
    .map-wrap {
        display: flex;
        justify-content: center;
        max-width: 100%;
    }
    .map-wrap svg {
        width: 100%;
        max-width: 420px;
        height: auto;
    }
    .kde-refs .ref-card .img-wrap {
        aspect-ratio: 16 / 10;
    }

    /* ===== HOMEPAGE: Photo grid / Lead row ===== */
    .lead-row {
        padding: 60px 22px !important;
    }
    .lead-row h3 { font-size: clamp(22px, 6vw, 30px) !important; }
    .lead-row .steps {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .lead-row .step::after { display: none !important; }

    /* ===== FOOTER ===== */
    footer {
        padding: 36px 22px 28px !important;
    }
    footer .legal-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    footer .col.brand-col { grid-column: auto; }
    footer .bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        font-size: 12px;
    }

    /* ===== SLUZBY: TOC chipy + sekce ===== */
    .toc-chips, .toc {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 22px !important;
    }
    .toc-chips a, .toc a, .toc-chip {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    .service-block, .sluzba {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 40px 22px !important;
    }
    .phase, .phase-mini {
        padding: 18px !important;
    }

    /* ===== REFERENCE: Filter + 2-col grid -> 1 col ===== */
    /* POZN.: zadny horizontalni padding tady - rodice .page-head a .refs uz
       maji svuj gutter; pridani dalsiho 22px by filtry a karty odsadilo vic
       nez nadpis a vznikly by nestejne okraje. */
    .filter-chips, #filters {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #filters button {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
    .refs-grid, #refs-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ===== KONTAKT: Chat + kontakty stack ===== */
    .kontakt-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        padding: 0 22px !important;
    }
    .chat-wrap, .chat {
        max-width: 100% !important;
    }
    #ai-messages {
        height: 320px !important;
    }
    .contact-list {
        max-width: 100% !important;
    }
}

@media (max-width: 640px) {
    /* Hodne uzky display - jeste vic zjemnit */
    .services-row {
        grid-template-columns: 1fr !important;
    }
    .hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }
    .hero-meta { letter-spacing: .2em; font-size: 12px; }
    /* Hlavicka zarovnana se stejnym bocnim okrajem jako obsah (--gutter) */
    .nav-inner { padding: 12px var(--gutter) !important; }
    .logo img { height: 32px !important; }
}

/* ============================================================
   FINAL MOBILE FIX - bulletproof override
   ============================================================ */
@media (max-width: 1024px) {
    /* Nav overlay - jasne centrovany, opaque white */
    nav {
        background: #ffffff !important;
        align-items: center !important;
        justify-content: center !important;
    }
    nav ul {
        flex-direction: column !important;
        gap: 24px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 80px 24px 80px !important;
        margin: 0 !important;
        list-style: none !important;
        width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    nav li {
        display: list-item !important;
        list-style: none !important;
        text-align: center !important;
        width: auto !important;
        min-height: 32px !important;
    }
    nav a {
        display: inline-block !important;
        font-size: 20px !important;
        line-height: 1.2 !important;
        font-weight: 300 !important;
        letter-spacing: .02em !important;
        text-transform: none !important;
        padding: 6px 16px !important;
        color: var(--ink) !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-decoration: none !important;
    }
    nav a.active { color: var(--accent) !important; }
    nav a::after,
    nav a::before { display: none !important; content: none !important; }

    /* HEADER iOS safe-area aware */
    header {
        padding-top: env(safe-area-inset-top, 0) !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: saturate(180%) blur(14px) !important;
        -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    }
    .nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        position: relative !important;
        z-index: 200 !important;
    }

    /* Services row - FORCE 2 columns on tablet, 1 on phone */
    .services-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 0 22px 60px !important;
        gap: 16px !important;
    }
    /* Lead row steps - FORCE 1 column */
    .lead-row {
        padding: 60px 22px !important;
    }
    .lead-row .steps {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }
    .lead-row .step::after {
        display: none !important;
    }
    /* About - 1 column */
    .about {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 50px 22px !important;
    }
    /* Kde projektujeme - 1 column */
    .kde {
        padding: 50px 22px 60px !important;
    }
    .kde-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }
    .map-wrap svg {
        width: 100% !important;
        height: auto !important;
        max-width: 400px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    /* Photo grid v Kde -> 1 column */
    .kde-refs .kde-ref-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* Footer */
    footer .legal-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
}

@media (max-width: 640px) {
    .services-row {
        grid-template-columns: 1fr !important;
    }
    .hero h1 {
        font-size: clamp(28px, 8vw, 44px) !important;
    }
    nav a {
        font-size: 22px !important;
    }
}



/* ============================================================
   HAMBURGER MENU - garantovane 3 carky
   ============================================================ */
@media (max-width: 1024px) {
    /* Tlacitko viditelne v pravo hlavicky */
    .nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        z-index: 200 !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
    }
    /* Stredni cara */
    .nav-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--ink) !important;
        position: relative !important;
        transition: background .2s ease !important;
    }
    /* Horni a dolni cara - pres pseudo elementy */
    .nav-toggle span::before,
    .nav-toggle span::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--ink) !important;
        transition: transform .25s ease, top .25s ease !important;
    }
    .nav-toggle span::before { top: -7px !important; }
    .nav-toggle span::after { top: 7px !important; }
    /* Pri otevreni - prekrizit do X */
    body.nav-open .nav-toggle span {
        background: transparent !important;
    }
    body.nav-open .nav-toggle span::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }
    body.nav-open .nav-toggle span::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }
}

/* ============================================================
   MENU OVERLAY OPRAVA - ul je primo viewport, ne flex child nav.
   ============================================================ */
@media (max-width: 1024px) {
    /* nav = jenom container co rozhoduje show/hide */
    nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        z-index: 150 !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        overflow: hidden !important;
    }
    body.nav-open nav {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    body.nav-open { overflow: hidden !important; }
    /* ul vyplnuje cely nav a vystreduje polozky */
    nav ul {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        list-style: none !important;
        width: 100% !important;
        height: 100% !important;
        padding: 64px 22px !important;
        margin: 0 !important;
        gap: 28px !important;
        box-sizing: border-box !important;
        max-height: none !important;
        overflow: visible !important;
        background: transparent !important;
    }
    nav li {
        display: list-item !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        text-align: center !important;
        background: transparent !important;
    }
    nav a {
        display: inline-block !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        letter-spacing: .04em !important;
        text-transform: none !important;
        padding: 8px 16px !important;
        margin: 0 !important;
        color: var(--ink) !important;
        background: transparent !important;
        text-decoration: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    nav a.active { color: var(--accent) !important; }
    nav a::before, nav a::after {
        display: none !important;
        content: none !important;
    }
}

/* ============================================================
   LOGO VIDITELNE V OTEVRENEM MENU
   Header (logo + hamburger) vzdy nad overlay
   ============================================================ */
@media (max-width: 1024px) {
    header {
        z-index: 250 !important;
        background: #ffffff !important;
    }
    .nav-toggle {
        z-index: 260 !important;
    }
    /* Posun nav overlay aby zaclo pod hlavickou */
    nav {
        top: 64px !important;
        height: calc(100vh - 64px) !important;
        height: calc(100dvh - 64px) !important;
    }
    nav ul {
        height: 100% !important;
        padding: 30px 22px !important;
    }
}


/* Hero text shadow - lehka mlhovinka pro citelnost na svetlych fotkach */
.hero h1 {
    text-shadow: 0 2px 24px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5) !important;
}
.hero .sub {
    text-shadow: 0 1px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.5) !important;
}
.hero-meta {
    text-shadow: 0 1px 8px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.5) !important;
}
.hero-side {
    text-shadow: 0 1px 6px rgba(0,0,0,.5) !important;
}

/* Sjednoceni 'Co delame' label se zbytkem modrych eyebrow popisku */
.about .label {
    font-size: 14px !important;
    letter-spacing: .18em !important;
    font-weight: 600 !important;
}

/* Mapa CR - vsechny mesta a markery modre (firemni barva) */
.map-wrap .cz-city-other,
.map-wrap .cz-city-main {
    fill: var(--accent) !important;
}
.map-wrap .cz-label-other,
.map-wrap .cz-label-main {
    fill: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}

/* Vybrane realizace - vetsi mezera mezi 2 kartami */
.kde-refs .kde-ref-list {
    gap: 56px !important;
}

/* Statistiky atelieru - cela sirka kde sekce, 4 sloupce, ikona vedle cisla */
.kde-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-top: 60px;
    padding-top: 0;
    border-top: none;
}
.kde-stats .stat {
    text-align: left;
}
.kde-stats .stat-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 6px;
}
.kde-stats .stat-ico {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.4,1.4,.5,1);
}
.kde-stats .stat:hover .stat-ico {
    transform: translateY(-2px);
}
.kde-stats .stat-ico svg {
    width: 30px;
    height: 30px;
    stroke: var(--accent);
    color: var(--accent);     /* pro fill="currentColor" detaily (ocko, zobacek) */
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.kde-stats .stat-num {
    font-size: clamp(36px, 4.2vw, 52px);
    font-weight: 200;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ink);
}
.kde-stats .stat-num span {
    color: var(--accent);
    font-weight: 300;
    font-size: .5em;
    margin-left: 2px;
    vertical-align: top;
}
.kde-stats .stat-label {
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    padding-left: 52px;       /* zarovnani pod cislo, ne pod ikonu */
}
@media (max-width: 900px) {
    .kde-stats { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 480px) {
    .kde-stats { grid-template-columns: 1fr 1fr; gap: 18px; }
    .kde-stats .stat-num { font-size: clamp(28px, 8vw, 38px); }
    .kde-stats .stat-label { font-size: 10px; letter-spacing: .14em; }
}

/* Mapa CR - vsechna mesta stejne (4 mesta: Praha, Strakonice, Brno, Ostrava) */
.map-wrap .cz-city {
    fill: var(--accent) !important;
    stroke: #fff;
    stroke-width: 2;
}
.map-wrap .cz-label {
    font-size: 13px !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 600 !important;
    fill: var(--ink) !important;
    letter-spacing: .04em !important;
}
/* Ripple zustava jen u Ostravy - nase domaci mesto */
.map-wrap .ripple {
    fill: var(--accent) !important;
}

/* Mapa CR - domaci dosah kolem Ostravy */
.map-wrap { position: relative; }

/* ============================================================
   ROTUJICI REFERENCE u mapy - 1 karta + sipky + tlacitko vsechny
   ============================================================ */
.kde-refs {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.kde-refs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kde-refs-head .label {
    margin-bottom: 0;
}
.rot-arrows {
    display: flex;
    gap: 4px;
}
.rot-arrow {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--gray);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    padding: 0;
}
.rot-arrow:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}
.rot-arrow svg {
    width: 16px;
    height: 16px;
}

/* Rotator - karty pres sebe v gridu, popis pod fotkou */
.kde-rotator {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
}
.kde-rotator .rot-card {
    grid-row: 1;
    grid-column: 1;
    display: block;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
    color: var(--ink);
    text-decoration: none;
}
.kde-rotator .rot-card.active {
    opacity: 1;
    pointer-events: auto;
}
.kde-rotator .rot-card .img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--gray);
    margin-bottom: 14px;
}
.kde-rotator .rot-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.kde-rotator .rot-card:hover .img-wrap img { transform: scale(1.04); }
.kde-rotator .rot-card .meta {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 6px;
}
.kde-rotator .rot-card .name {
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    transition: color .25s ease;
}
.kde-rotator .rot-card:hover .name { color: var(--accent); }

/* Tlacitko 'Vsechny reference' - sede pill */
.kde-all-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: var(--gray);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 999px;
    transition: gap .3s ease, background .3s ease, color .3s ease;
    text-decoration: none;
}
.kde-all-btn:hover {
    gap: 16px;
    background: var(--accent);
    color: #fff;
}
.kde-all-btn span {
    font-size: 14px;
    line-height: 1;
}

/* (emoji styling odstranen - kure ted SVG v kolecku jako ostatni ikonky) */

/* ============================================================
   STYLIZOVANE OBRAZKY u sluzeb - skica (studie) a wireframe (povoleni)
   Cele videt, bez tmaveho gradientu, jemny ramecek
   ============================================================ */
.phase-photo-sketch,
.phase-photo-wire {
    aspect-ratio: 1/1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.phase-photo-sketch img,
.phase-photo-wire img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1 !important;
    transform: none !important;
}
/* Zrus tmavy gradient overlay co maji bezne fotky */
.phase-photo-sketch::after,
.phase-photo-wire::after {
    display: none !important;
}

/* Email a telefon u osoby - kazdy na svem radku pod sebou */
.person .email-row {
    display: flex;
    width: fit-content;
}
.person .email-row + .email-row {
    margin-top: 10px;
}

/* ============================================================
   HERO ovladani - pruh dole vpravo (sipky + tecky)
   ============================================================ */
/* Overlay s textem nesmi blokovat kliknuti na ovladani */
.hero-overlay { pointer-events: none; }
.hero-overlay a { pointer-events: auto; }

/* Hero lze tahat mysi - kurzor grab + zakaz nativniho dragu/vyberu */
.hero {
    cursor: grab;
    touch-action: pan-y;   /* svisle skrolovani OK, vodorovne tazeni chytime my */
}
.hero:active {
    cursor: grabbing;
}
.hero .slide img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.hero-controls {
    position: absolute;
    bottom: 28px;
    right: var(--gutter);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 16px;
}
/* Sipky bez kolecka a borderu - jen samotny glyf */
.hero-arrow {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
    transition: color .25s ease, transform .25s ease;
}
.hero-arrow:hover {
    color: var(--accent);
}
.hero-prev:hover { transform: translateX(-3px); }
.hero-next:hover { transform: translateX(3px); }
.hero-arrow svg {
    width: 26px;
    height: 26px;
}
/* Tecky (indikatory) pryc */
.hero-dots { display: none !important; }

@media (max-width: 640px) {
    .hero-controls {
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
        gap: 28px;
    }
    .hero-arrow { width: 36px; height: 36px; }
    .hero-arrow svg { width: 24px; height: 24px; }
}

/* Kruhy dosahu kolem Ostravy na mape */
.map-wrap .dosah-ring {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    opacity: .35;
}
.map-wrap .dosah-label {
    font-size: 10px;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    fill: var(--ink-soft);
    letter-spacing: .04em;
}

/* ============================================================
   TYPOVE PROJEKTY - konfigurator (vyber vstup + strecha)
   ============================================================ */
.config {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gutter) 90px;
}
.config-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}
.config-stage {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--gray);
}
.config-stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity .3s ease;
}
.config-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255,255,255,.92);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
}
.config-panel {
    padding-top: 8px;
}
.config-group {
    margin-bottom: 32px;
}
.config-glabel {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 14px;
}
.config-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.config-opt {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    background: var(--gray);
    border: 1px solid transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.005em;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.config-opt:hover {
    background: var(--accent);
    color: #fff;
}
.config-opt.active {
    background: var(--ink);
    color: #fff;
}
.config-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-mid);
    font-weight: 300;
}
.config-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 14px 28px;
    background: var(--gray);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 999px;
    transition: gap .3s ease, background .3s ease, color .3s ease;
}
.config-cta:hover {
    gap: 16px;
    background: var(--accent);
    color: #fff;
}

/* (Blok ".typ-why" 01/02/03 byl odstranen - nahrazen sdilenou
   patickou "Co se stane" na strance typovych projektu.) */

@media (max-width: 900px) {
    .config-inner { grid-template-columns: 1fr; gap: 32px; }
    .config { padding: 0 22px 60px; }
}

/* Typove projekty - teaser na strance Sluzby */
.typ-teaser {
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 90px var(--gutter);
    /* carkovana linka = typove projekty navazuji na sekci Povoleni */
    border-top: 1px dashed var(--ink-soft);
}
/* Kolecko se sipkou dolu na carkovane lince (navaznost na Povoleni) */
.typ-teaser-mark {
    position: absolute;
    top: 0; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--gray);
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.typ-teaser-mark svg {
    width: 20px; height: 20px;
    fill: none; stroke: #fff; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.typ-teaser-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.typ-teaser-text .label {
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}
.typ-teaser-text h2 {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 200;
    letter-spacing: -.025em;
    line-height: 1.05;
    margin-bottom: 18px;
    color: var(--ink);
}
.typ-teaser-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-mid);
    font-weight: 300;
    margin-bottom: 28px;
    max-width: 480px;
}
.typ-teaser-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    background: var(--gray);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 999px;
    transition: gap .3s ease, background .3s ease, color .3s ease;
}
.typ-teaser-btn:hover { gap: 16px; background: var(--accent); color: #fff; }
.typ-teaser-img {
    display: block;
    aspect-ratio: 3/2;
    overflow: hidden;
    background: var(--gray);
}
.typ-teaser-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.typ-teaser-img:hover img { transform: scale(1.04); }
@media (max-width: 900px) {
    .typ-teaser-inner { grid-template-columns: 1fr; gap: 32px; }
    .typ-teaser { padding: 50px 22px; }
    .typ-teaser-img { order: -1; }
}

/* Dispozice - pudorys + legenda */
.dispo {
    max-width: 1320px;
    margin: 0 auto;
    padding: 80px var(--gutter);
    border-top: 1px solid var(--line);
}
.dispo-head {
    margin-bottom: 48px;
    max-width: 680px;
}
.dispo-head .label {
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 16px;
    display: block;
}
.dispo-head h2 {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 200;
    letter-spacing: -.025em;
    line-height: 1.05;
    margin-bottom: 16px;
    color: var(--ink);
}
.dispo-head p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-mid);
    font-weight: 300;
}
.dispo-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
}
.dispo-switch {
    margin-bottom: 16px;
}
.dispo-plan {
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}
.dispo-plan img {
    width: 100%;
    max-width: 460px;       /* mensi pudorys */
    height: auto;
    object-fit: contain;
    transition: opacity .3s ease;
}
.dispo-legend {
    padding-top: 4px;
}
.dispo-legend[hidden] { display: none; }
.dispo-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
}
.dispo-row .n {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: .02em;
}
.dispo-row .rname {
    font-size: 14px;
    color: var(--ink);
    font-weight: 400;
}
.dispo-row .area {
    font-size: 14px;
    color: var(--ink-soft);
    font-weight: 400;
}
.dispo-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--ink);
}
.dispo-total .rname {
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}
.dispo-total .area {
    font-size: 20px;
    font-weight: 300;
    color: var(--ink);
}
@media (max-width: 900px) {
    .dispo-inner { grid-template-columns: 1fr; gap: 32px; }
    .dispo { padding: 50px 22px; }
}

/* ============================================================
   DETAIL REFERENCE - nova sablona
   ============================================================ */
.ref-detail {
    max-width: 1320px;
    margin: 0 auto;
    padding: 70px var(--gutter) 0;
}
.ref-detail-head {
    margin-bottom: 40px;
}
.ref-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
    margin-bottom: 28px;
    transition: color .25s ease, gap .25s ease;
}
.ref-back span { font-size: 14px; line-height: 1; }
.ref-back:hover { color: var(--accent); gap: 12px; }
.ref-detail-head h1 {
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 200;
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--ink);
}
.ref-hero {
    width: 100%;
    margin-bottom: 60px;
    cursor: pointer;
}
.ref-hero img {
    width: 100%; height: auto;
    display: block;
    transition: filter .25s ease;
}
.ref-hero:hover img { filter: brightness(.8); }
.ref-body {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    margin-bottom: 70px;
    align-items: start;
}
.ref-info {
    display: flex;
    flex-direction: column;
}
.ref-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.ref-info-row:first-child { border-top: 1px solid var(--line); }
.ref-info-key {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 400;
}
.ref-info-key svg {
    width: 16px; height: 16px;
    stroke: var(--accent); fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.ref-info-val {
    font-size: 14px;
    color: var(--ink);
    font-weight: 400;
    text-align: right;
}
.ref-desc .label {
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 18px;
    display: block;
}
.ref-desc p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--ink);
    font-weight: 300;
}
.ref-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-bottom: 90px;
    align-items: start;
}
.ref-gallery-item {
    display: block;
    cursor: pointer;
}
.ref-gallery-item img {
    width: 100%; height: auto;
    display: block;
    transition: filter .25s ease;
}
.ref-gallery-item:hover img { filter: brightness(.8); }
.ref-cta {
    text-align: center;
    padding: 80px var(--gutter);
    border-top: 1px solid var(--line);
    margin: 0 calc(-1 * var(--gutter));
}
.ref-cta h2 {
    font-size: clamp(26px, 2.6vw, 34px);
    font-weight: 200;
    letter-spacing: -.02em;
    margin-bottom: 14px;
    color: var(--ink);
}
.ref-cta p {
    font-size: 16px;
    color: var(--ink-mid);
    font-weight: 300;
    margin-bottom: 28px;
}
.ref-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    background: var(--gray);
    color: var(--ink);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 999px;
    transition: gap .3s ease, background .3s ease, color .3s ease;
}
.ref-cta-btn:hover { gap: 16px; background: var(--accent); color: #fff; }
/* CTA ikona v kolecku (jako jinde na webu) */
.ref-cta-ico {
    display: flex;
    width: 64px; height: 64px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--gray);
    align-items: center;
    justify-content: center;
}
.ref-cta-ico svg {
    width: 28px; height: 28px;
    stroke: #fff; fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   LIGHTBOX (zvetseni fotek v detailu reference)
   ============================================================ */
.ref-lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(0,0,0,.9);
    display: flex; align-items: center; justify-content: center;
}
.ref-lightbox[hidden] { display: none; }
.ref-lightbox .lb-image {
    max-width: 92vw; max-height: 88vh;
    object-fit: contain; display: block;
    box-shadow: 0 12px 60px rgba(0,0,0,.5);
}
.ref-lightbox .lb-close,
.ref-lightbox .lb-nav {
    position: absolute;
    background: rgba(255,255,255,.12);
    color: #fff; border: none; cursor: pointer;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.ref-lightbox .lb-close:hover,
.ref-lightbox .lb-nav:hover { background: rgba(255,255,255,.3); }
.ref-lightbox .lb-close { top: 20px; right: 20px; width: 46px; height: 46px; }
.ref-lightbox .lb-close svg { width: 22px; height: 22px; }
.ref-lightbox .lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; }
.ref-lightbox .lb-nav svg { width: 26px; height: 26px; }
.ref-lightbox .lb-prev { left: 20px; }
.ref-lightbox .lb-next { right: 20px; }
@media (max-width: 640px) {
    .ref-lightbox .lb-nav { width: 44px; height: 44px; }
    .ref-lightbox .lb-prev { left: 8px; }
    .ref-lightbox .lb-next { right: 8px; }
    .ref-lightbox .lb-close { top: 12px; right: 12px; }
}

@media (max-width: 900px) {
    .ref-detail { padding: 50px 22px 0; }
    .ref-hero { margin-bottom: 40px; }
    .ref-body { grid-template-columns: 1fr; gap: 32px; margin-bottom: 50px; }
    .ref-gallery { grid-template-columns: 1fr; gap: 16px; margin-bottom: 60px; }
    .ref-cta { padding: 50px 22px; margin: 0 -22px; }
}

/* ============================================================
   TYPOVY DUM jako ucelene bloky (skalovatelne pro vice domu)
   ============================================================ */
.typ-model {
    max-width: 1320px;
    margin: 0 auto;
    padding: 70px var(--gutter);
    border-top: 1px solid var(--line);
}
.typ-model:first-of-type { border-top: none; }
.typ-model-head {
    margin-bottom: 40px;
    max-width: 680px;
}
.typ-model-head .label {
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 14px;
    display: block;
}
.typ-model-head h2 {
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 200;
    letter-spacing: -.025em;
    line-height: 1.02;
    margin-bottom: 14px;
    color: var(--ink);
}
.typ-model-head p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-mid);
    font-weight: 300;
}
/* config-inner uvnitr modelu uz neni samostatna sekce */
.typ-model .config-inner { margin-bottom: 28px; }

/* Galerie vice fotek domu */
.typ-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.typ-gphoto {
    display: block;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--gray);
}
.typ-gphoto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.6,.2,1);
}
.typ-gphoto:hover img { transform: scale(1.05); }

/* Dispozice uvnitr modelu */
.typ-dispo {
    margin-top: 40px;
    padding-top: 36px;
    border-top: 1px solid var(--line);
}
.typ-dispo .dispo-head { margin-bottom: 28px; }
.typ-dispo .dispo-head h3 {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 200;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-bottom: 10px;
}
.typ-dispo .dispo-head .label {
    font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 14px; display: block;
}
.typ-dispo .dispo-head p { font-size: 15px; line-height: 1.7; color: var(--ink-mid); font-weight: 300; }
.typ-dispo .dispo-inner { grid-template-columns: auto 1fr; gap: 48px; }

@media (max-width: 900px) {
    .typ-model { padding: 50px 22px; }
    .typ-gallery { grid-template-columns: 1fr 1fr; }
    .typ-dispo .dispo-inner { grid-template-columns: 1fr; gap: 28px; }
    .dispo-plan img { max-width: 100%; }
}

/* ============================================================
   TYP-MODEL novy layout: slider + pudorys vedle sebe, kompaktni legenda
   ============================================================ */
.typ-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 24px;
}
.typ-controls .config-group { margin-bottom: 0; }

/* Vizual: slider vlevo, pudorys vpravo - pusobi spolu */
.typ-visual {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 36px;
}
/* Slider */
.typ-slider {
    position: relative;
    overflow: hidden;
    background: var(--gray);
    border-radius: 4px;
}
.typ-slides { position: relative; width: 100%; aspect-ratio: 3/2; }
.typ-slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}
.typ-slide.active { opacity: 1; pointer-events: auto; }
.typ-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.typ-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 40px; height: 40px; border-radius: 50%;
    border: none; background: rgba(0,0,0,.35); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; backdrop-filter: blur(3px);
    transition: background .25s ease;
}
.typ-arrow:hover { background: var(--accent); }
.typ-arrow svg { width: 22px; height: 22px; }
.typ-prev { left: 12px; }
.typ-next { right: 12px; }
/* Pocitadlo fotek ve slideru (1 / 2) */
.typ-counter {
    position: absolute;
    bottom: 12px; right: 12px;
    z-index: 3;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 12px;
    letter-spacing: .04em;
    padding: 4px 11px;
    border-radius: 999px;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

/* Pudorys vedle slideru - vetsi, bez ramu */
/* Popisek "Pudorys" je nahore (zarovnany s vrskem slideru),
   samotny pudorys je svisle na stred zbyleho prostoru vedle slideru. */
.typ-plan {
    background: transparent;
    display: flex;
    flex-direction: column;
}
.typ-plan-label {
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500; margin-bottom: 16px;
}
.typ-plan img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: auto 0;
}

/* Patka modelu: popis vlevo, legenda vpravo - oboji zarovnane nahoru */
.typ-foot {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: start;
    padding-top: 36px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}
/* Kompaktni legenda - 2 sloupce mistnosti, mensi mezery */
/* :not([hidden]) zajisti, ze skryta legenda (druhy vstup) opravdu zmizi */
.typ-legend-wrap .dispo-legend:not([hidden]) {
    padding-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}
.typ-legend-wrap .dispo-row {
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    padding: 6px 0;
}
.typ-legend-wrap .dispo-total {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding-top: 12px;
}

@media (max-width: 900px) {
    .typ-visual { grid-template-columns: 1fr; gap: 20px; }
    .typ-foot { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .typ-legend-wrap .dispo-legend:not([hidden]) { grid-template-columns: 1fr; }
    /* Na mobilu legenda nad popisem (navazuje na pudorys) */
    .typ-foot .typ-legend-wrap { order: 1; }
    .typ-foot .typ-desc { order: 2; }
}

/* ============================================================
   TYP-MODEL: popis (typ-desc) v paticce
   ============================================================ */
.typ-desc { max-width: 460px; }
.typ-desc .label {
    font-size: 14px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 16px; display: block;
}
.typ-desc p {
    font-size: 16px; line-height: 1.75; color: var(--ink); font-weight: 300;
    margin-bottom: 18px;
}
.typ-desc .config-cta { margin-top: 14px; }
/* Parametry typoveho domu (dispozice, plochy, rozmer) */
.typ-params {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    border-top: 1px solid var(--line);
}
.typ-params li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.typ-params li span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink-soft);
    font-weight: 300;
}
.typ-params li span:first-child svg {
    width: 16px; height: 16px;
    stroke: var(--accent); fill: none; stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
}
.typ-params li span:last-child { color: var(--ink); font-weight: 500; }
/* Cena typoveho domu - neklikatelne "tlacitko" + poznamka co zahrnuje */
.typ-price { margin-top: 24px; text-align: right; }
.typ-price-tag {
    display: inline-block;
    background: var(--gray);
    color: var(--ink);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 13px 30px;
    border-radius: 999px;
    cursor: default;
}
.typ-price-note {
    margin-top: 12px;
    margin-left: auto;
    max-width: 440px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-soft);
    font-weight: 300;
}
.typ-price-note + .typ-price-note { margin-top: 8px; }

/* ============================================================
   GLOBALNI SROVNANI BOCNICH OKRAJU NA MOBILU
   (jeden konzistentni --gutter vsude + zadne vodorovne pretekani)
   Tento blok je na konci souboru, takze ma prednost.
   ============================================================ */

/* 1) Zadne vodorovne posouvani -> okraje uz neposkakuji mezi sekcemi.
      overflow-x: clip nevytvari scroll-kontejner, takze nerozbije fixovanou
      hlavicku na iOS (na rozdil od hidden). */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* 2) Sluzby: 3-sloupcova / 2-sloupcova tabulka (CO OVERIME / DOBA / CENA)
      se na uzkych displejich slozi, aby nebyla zmacknuta */
@media (max-width: 900px) {
    .phase-meta.phase-meta-3 { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
}
@media (max-width: 640px) {
    .phase-meta,
    .phase-meta.phase-meta-3 { grid-template-columns: 1fr; gap: 22px; }
}

/* 3) Kontakt: radky spojeni mely pevny 140px sloupec + nezalomitelny e-mail,
      coz na uzkem telefonu pretekalo sirku obrazovky. Zuzime popisek a
      povolime zalamovani hodnot. */
@media (max-width: 640px) {
    .contact-item {
        grid-template-columns: 84px 1fr auto;
        gap: 10px;
    }
    .contact-item .val,
    .contact-item a.val {
        overflow-wrap: anywhere;
    }
    /* Pojistka i pro firemni radky */
    .firma-block .row .value { overflow-wrap: anywhere; }
}

/* 4) Grid/flex prvky nesmi pretekat svuj sloupec kvuli dlouhemu obsahu.
      min-width:0 jim dovoli se zmensit -> okraj (gutter) zustane zachovany
      a nic se neoreze. Tohle je hlavni duvod, proc chat/karty pusobily
      bez praveho okraje. */
.contact-chat .inner > *,
.kde-inner > *,
.phase-mini-inner > *,
.firma-grid > * { min-width: 0; }

/* AI chat: vstupni pole se musi umet zmensit, aby tlacitko Odeslat
   nepretlacilo chat pres okraj obrazovky */
#ai-input { min-width: 0; }

/* 5) Reference: rozestup karet resi pravidlo #refs-grid vyse (gap 48px). */

/* 6) SJEDNOCENI DELKY ODDELOVACICH LINEK NA CELEM WEBU.
      Vetsina sekci kresli linku na hrane elementu (sirka az 1320px vc. gutteru).
      Tyto vnitrni linky byly ale o gutter zkracene (lezi uvnitr odsazeni rodice):
        - osoby na Kontaktu (.lide-grid)
        - paticka (footer .legal-grid)
        - hlavicka seznamu praci na HP (.work .head)
      Roztahneme je zapornym okrajem na stejnou hranu jako sekce a obsah
      vratime dovnitr paddingem -> vsechny linky maji stejnou delku. */
.lide-grid,
footer .legal-grid,
.work .head {
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* ============================================================
   PRAVNI STRANKY (GDPR, Cookies) - cista citelna sazba
   ============================================================ */
.legal {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gutter) 100px;
}
.legal-inner { max-width: 760px; }
.legal-meta {
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500; margin-bottom: 32px;
}
.legal h2 {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 300;
    letter-spacing: -.01em;
    color: var(--ink);
    margin: 40px 0 14px;
}
.legal p {
    font-size: 16px; line-height: 1.75; color: var(--ink-mid); font-weight: 300;
    margin-bottom: 14px;
}
.legal p strong { color: var(--ink); font-weight: 500; }
.legal a { color: var(--accent); }
.legal ul { list-style: none; padding: 0; margin: 0 0 18px; }
.legal li {
    position: relative;
    padding-left: 20px;
    font-size: 16px; line-height: 1.7; color: var(--ink-mid); font-weight: 300;
    margin-bottom: 8px;
}
.legal li::before {
    content: ''; position: absolute; left: 0; top: 11px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.legal li strong { color: var(--ink); font-weight: 500; }
.legal-note {
    margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-soft);
}
@media (max-width: 640px) {
    .legal h2 { margin-top: 32px; }
    .legal p, .legal li { font-size: 15px; }
}

/* ============================================================
   COOKIE LISTA
   ============================================================ */
.cookie-bar {
    position: fixed;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 200;
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,.14);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease;
}
.cookie-bar.show { opacity: 1; transform: none; }
.cookie-bar-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    flex-wrap: wrap;
}
.cookie-bar-inner p {
    margin: 0;
    flex: 1;
    min-width: 200px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-mid);
    font-weight: 300;
}
.cookie-bar-inner a { color: var(--accent); }
.cookie-bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cookie-accept { background: var(--ink); color: #fff; }
.cookie-accept:hover { background: var(--accent); }
.cookie-reject { background: transparent; color: var(--ink-mid); border-color: var(--gray); }
.cookie-reject:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 560px) {
    .cookie-bar { left: 12px; right: 12px; bottom: 12px; }
    .cookie-bar-actions { width: 100%; }
    .cookie-btn { flex: 1; }
}

/* ============================================================
   CTA ikona zmodra pri najeti na tlacitko (detail reference)
   ============================================================ */
.ref-cta-ico { transition: background .25s ease; }
.ref-cta:has(.ref-cta-btn:hover) .ref-cta-ico { background: var(--accent); }

/* ============================================================
   VODOZNAK "3" v paticce - obrovska svetle seda trojka, castecne mimo
   ============================================================ */
footer { position: relative; overflow: hidden; }
.footer-mark {
    position: absolute;
    right: -10px;
    bottom: -70px;
    height: clamp(260px, 38vw, 460px);
    width: auto;
    color: #ededed;            /* svetle seda vodoznak - barvu lze snadno zmenit */
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.footer-mark path { fill: currentColor; }
footer .legal-grid,
footer .bottom { position: relative; z-index: 1; }

/* ============================================================
   PREHLED REFERENCI - dva sloupce, ale cela (neorezana) fotka
   ============================================================ */
.refs-grid { grid-template-columns: repeat(2, 1fr); gap: 56px 40px; align-items: start; }
.refs-grid .ref-card .img-wrap {
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    margin-bottom: 16px;
}
.refs-grid .ref-card .img-wrap img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: filter .25s ease;
}
.refs-grid .ref-card:hover .img-wrap img { transform: none; filter: brightness(.8); }

/* ============================================================
   PODMENU SEKCI (Sluzby) — PC: ukotvene chipsy pod hlavickou.
   Mobil: tenky prouzek s aktualni sekci + rozbaleni seznamu (varianta C).
   ============================================================ */
.subnav {
    position: sticky;
    top: 78px;
    z-index: 90;
    margin-top: -35px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
.subnav-bar { display: none; }
.subnav-links {
    max-width: 1320px;
    margin: 0 auto;
    padding: 18px var(--gutter);
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
}
.subnav-links a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--gray);
    color: var(--ink);
    font-size: 14px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}
.subnav-links a:hover { background: var(--accent); color: #fff; }
.subnav-links a.active { background: var(--accent); color: #fff; }

@media (max-width: 1024px) {
    .subnav { top: 72px; margin-top: 0; }
    .subnav-bar {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 48px;
        padding: 0 var(--gutter);
        background: none;
        border: none;
        font: inherit;
        cursor: pointer;
        color: var(--accent);
        font-weight: 500;
        font-size: 15px;
        line-height: 1;
        text-align: left;
    }
    .subnav-bar svg {
        width: 20px; height: 20px;
        stroke: var(--ink-mid); fill: none;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        transition: transform .25s ease;
        flex-shrink: 0;
    }
    .subnav.open .subnav-bar svg { transform: rotate(180deg); }
    .subnav-links {
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        overflow-x: visible;
        padding: 0 var(--gutter) 10px;
    }
    .subnav.open .subnav-links { display: flex; }
    .subnav-links a {
        background: none;
        border-radius: 8px;
        padding: 11px 12px;
        font-size: 15px;
    }
    .subnav-links a:hover { background: var(--gray); color: var(--ink); }
    .subnav-links a.active { background: var(--accent); color: #fff; }
    [id="prevereni"], [id="studie"], [id="povoleni"],
    [id="dozor"], [id="pasport"], [id="druhy"] {
        scroll-margin-top: 128px;
    }
}
@media (max-width: 640px) {
    .subnav { top: 64px; }
}

/* Tlacitko "Nacist dalsi" pod referencemi (stejny styl jako lead-btn) */
.refs-more-wrap { text-align: center; margin-top: 48px; }
.refs-more-wrap[hidden] { display: none; }

/* Vodoznak "3" v mobilnim overlay menu - stejny jako v paticce (vpravo dole, castecne mimo) */
.nav-mark { display: none; }
@media (max-width: 1024px) {
    .nav-mark {
        display: block;
        position: absolute;
        right: -10px;
        bottom: -64px;
        height: clamp(240px, 56vw, 420px);
        color: #ededed;
        pointer-events: none;
        z-index: 0;
    }
    .nav-mark path { fill: currentColor; }
    body.nav-open nav ul { position: relative; z-index: 1; }
}