:root {
    --bg: #FAFAF8;
    --surface: #FFFFFF;
    --text: #17191C;
    --muted: #666B73;
    --line: #E5E7E8;
    --soft: #F3F5F6;
    --primary: #2864DC;
    --primary-hover: #1F51BA;
    --section-space: clamp(78px, 9vw, 160px);
    --container: 1240px;
}


/* ==========================================================================
   ZÁKLAD
   ========================================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

.container {
    width: min(calc(100% - 64px), var(--container));
    margin-inline: auto;
}

.section {
    padding: var(--section-space) 0;
}

.section-muted {
    background: #F7F8F9;
}


/* ==========================================================================
   TYPOGRAFIE
   ========================================================================== */

.eyebrow {
    margin-bottom: 20px;
    color: var(--primary);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.eyebrow-dark {
    color: var(--text);
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    margin-bottom: 0.55em;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 600;
}

h1 span {
    color: var(--primary);
}

h2 {
    font-size: clamp(34px, 3.8vw, 50px);
    font-weight: 600;
}

h3 {
    font-size: clamp(23px, 2vw, 30px);
    font-weight: 600;
}

p {
    color: var(--muted);
}

.lead {
    max-width: 690px;
    font-size: clamp(18px, 1.5vw, 20px);
}


/* ==========================================================================
   TLAČÍTKA A ODKAZY
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 8px;
    background: var(--primary);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 180ms ease;
}

.button:hover {
    background: var(--primary-hover);
}

.button span,
.text-link span {
    display: inline-block;
    transition: transform 180ms ease;
}

.button:hover span,
.text-link:hover span {
    transform: translateX(4px);
}

.button-small {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 14px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
}

.text-link-blue {
    color: var(--primary);
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(250, 250, 248, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(229, 231, 232, 0.7);
}

.header-inner {
    min-height: 78px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 34px;
}

.brand {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    line-height: 1.2;
}

.brand strong {
    font-size: 15px;
    text-transform: uppercase;
}

.brand span {
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.main-nav a,
.site-footer a {
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.main-nav a:hover,
.site-footer a:hover {
    color: var(--primary);
}

.nav-toggle {
    display: none;
}


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

.hero {
    padding-top: clamp(80px, 8vw, 130px);
    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7.4fr) minmax(360px, 4.6fr);
    align-items: center;
    gap: clamp(40px, 5vw, 76px);
}

.hero-copy h1 {
    max-width: 820px;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 36px;
}

.hero-art {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-art img {
    width: min(100%, 560px);
    height: auto;
    opacity: 0.96;
    transform: none;
}


/* ==========================================================================
   JAK SPOLUPRÁCE PROBÍHÁ
   ========================================================================== */

.grid-intro {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 70px;
}

.steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 70px;
}

.step {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 38px 0;
    border-top: 1px solid var(--line);
}

.step-number {
    color: #C9CDD3;
    font-size: clamp(54px, 6vw, 82px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.step h3 {
    margin-bottom: 12px;
    font-size: 22px;
}

.step strong {
    color: var(--primary);
    font-size: 14px;
}

.statement {
    margin-top: 55px;
    padding: clamp(45px, 6vw, 72px) 30px;
    background: linear-gradient(
        90deg,
        rgba(238, 243, 253, 0.6),
        rgba(255, 255, 255, 0.7),
        rgba(238, 243, 253, 0.6)
    );
    text-align: center;
}

.statement strong {
    display: block;
    font-size: clamp(32px, 4vw, 50px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.statement span {
    display: block;
    margin-top: 14px;
    color: var(--primary);
    font-weight: 600;
}


/* ==========================================================================
   CO ZÍSKÁTE
   ========================================================================== */

.benefits-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 80px;
    align-items: start;
}

.benefits-title {
    position: sticky;
    top: 120px;
}

.benefits-list {
    border-top: 1px solid var(--line);
}

.benefit {
    display: grid;
    grid-template-columns: 70px 1fr 30px;
    gap: 24px;
    align-items: start;
    padding: 27px 0;
    border-bottom: 1px solid var(--line);
}

.benefit > span {
    color: #BCC2CA;
    font-size: 30px;
}

.benefit h3 {
    margin-bottom: 5px;
    font-size: 18px;
}

.benefit p {
    margin-bottom: 0;
    font-size: 15px;
}

.benefit b {
    color: #AAB2BD;
    font-size: 22px;
    font-weight: 400;
    transition:
        transform 180ms ease,
        color 180ms ease;
}

.benefit:hover b {
    color: var(--primary);
    transform: translateX(4px);
}

.benefit-closing {
    margin-top: 46px;
    text-align: center;
    font-size: 18px;
}


/* ==========================================================================
   PROJEKTY
   ========================================================================== */

.section-projects {
    background: #F8F9FA;
}

.projects-heading {
    display: grid;
    grid-template-columns: 1fr 0.9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 72px;
}

.project {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    min-height: 460px;
    border-top: 1px solid var(--line);
}

.project-two {
    grid-template-columns: 0.75fr 1.25fr;
}

.project-image-placeholder {
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 40px;
    background:
        linear-gradient(
            135deg,
            rgba(40, 100, 220, 0.06),
            transparent 35%
        ),
        #ECEFF2;
    color: #8A929C;
    text-align: center;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-copy {
    padding: clamp(38px, 5vw, 68px);
}

.project-index {
    margin-bottom: 28px;
    color: var(--primary);
    font-weight: 700;
}

.project-copy h3 {
    font-size: clamp(28px, 3vw, 40px);
}

.projects-closing {
    padding-top: 42px;
    text-align: center;
    border-top: 1px solid var(--line);
}

.projects-closing strong,
.projects-closing span {
    display: block;
}

.projects-closing span {
    margin-top: 7px;
    color: var(--primary);
}


/* ==========================================================================
   O MNĚ
   ========================================================================== */

.section-about {
    background: #FFFFFF;
}

.about-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: clamp(50px, 7vw, 110px);
    align-items: center;
}

.about-photo {
    max-width: 430px;
}

.about-photo img {
    width: 100%;
    border-radius: 12px;
}

.about-copy {
    max-width: 720px;
}

blockquote {
    margin: 30px 0;
    padding-left: 24px;
    border-left: 2px solid var(--primary);
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.5;
    letter-spacing: -0.02em;
}


/* ==========================================================================
   KONTAKT
   ========================================================================== */

.section-contact {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 80px;
    align-items: center;
}

.contact-copy {
    max-width: 700px;
}

.contact-details {
    border-left: 1px solid var(--line);
    padding-left: clamp(35px, 5vw, 70px);
}

.contact-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px 0;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.contact-item:first-child {
    border-top: 1px solid var(--line);
}

.contact-item img {
    width: 27px;
}

.contact-item strong,
.contact-item small {
    display: block;
}

.contact-item small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}


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

.site-footer {
    padding: 32px 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 30px;
    align-items: center;
    color: var(--muted);
    font-size: 12px;
}

.footer-inner nav {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}


/* ==========================================================================
   ANIMACE
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 520ms ease,
        transform 520ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ==========================================================================
   VELKÝ DESKTOP
   ========================================================================== */

@media (min-width: 1300px) {
    .hero-art {
        transform: translateX(18px);
    }
}


/* ==========================================================================
   MENŠÍ DESKTOP / TABLET
   ========================================================================== */

@media (max-width: 1050px) {
    .header-cta {
        display: none;
    }

    .header-inner {
        grid-template-columns: auto 1fr;
    }

    .main-nav {
        justify-content: flex-end;
        gap: 22px;
    }

    .hero-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }

    .benefits-layout {
        grid-template-columns: 300px 1fr;
        gap: 50px;
    }
}


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

@media (max-width: 820px) {
    .container {
        width: min(calc(100% - 40px), var(--container));
    }

    .site-header {
        position: relative;
    }

    .header-inner {
        grid-template-columns: 1fr auto;
        min-height: 70px;
        padding: 17px 0;
    }

    .nav-toggle {
        display: inline-flex;
        border: 0;
        background: transparent;
        color: var(--text);
        font-weight: 600;
    }

    .main-nav {
        display: none;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 6px 0 18px;
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        width: 100%;
        padding: 10px 0;
        border-top: 1px solid var(--line);
    }

    .hero-grid,
    .grid-intro,
    .benefits-layout,
    .projects-heading,
    .about-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .hero-art {
        width: min(100%, 560px);
        margin: 38px auto 0;
        transform: none;
    }

    .hero-art img {
        width: 100%;
        opacity: 0.9;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .step {
        grid-template-columns: 90px 1fr;
    }

    .benefits-title {
        position: static;
    }

    .project,
    .project-two {
        grid-template-columns: 1fr;
    }

    .project-two .project-image {
        order: -1;
    }

    .about-photo {
        max-width: 360px;
    }

    .contact-details {
        border-left: 0;
        padding-left: 0;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-inner nav {
        justify-content: center;
        flex-wrap: wrap;
    }
}


/* ==========================================================================
   MOBIL
   ========================================================================== */

@media (max-width: 560px) {
    body {
        font-size: 16px;
    }

    .section {
        padding: 78px 0;
    }

    .hero {
        padding-top: 65px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .hero-art {
        width: 92%;
        margin-top: 30px;
    }

    .step {
        grid-template-columns: 64px 1fr;
        gap: 14px;
    }

    .step-number {
        font-size: 48px;
    }

    .benefit {
        grid-template-columns: 48px 1fr 20px;
        gap: 14px;
    }

    .benefit > span {
        font-size: 23px;
    }

    .project-copy {
        padding: 35px 0;
    }

    .project-image-placeholder {
        margin-inline: -20px;
    }
}

/* ============================================================================
   SAMOSTATNÁ STRÁNKA — JAK SPOLUPRÁCE PROBÍHÁ
   ========================================================================== */

.main-nav a.is-active { color: var(--primary); }

.process-hero {
    padding: clamp(95px, 10vw, 165px) 0 clamp(90px, 9vw, 145px);
    overflow: hidden;
}
.process-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}
.process-hero-copy { max-width: 900px; }
.process-hero-copy h1 { max-width: 900px; }
.process-hero-copy .lead { max-width: 760px; margin-bottom: 0; }
.process-hero-note { margin: 28px 0 0; color: var(--text); font-weight: 600; }
.process-hero-mark {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    color: #C9CDD3;
    font-size: 16px;
    font-weight: 600;
}
.process-hero-mark i { display:block; height:1px; background:var(--line); position:relative; }
.process-hero-mark i::after {
    content:"";
    position:absolute;
    right:0;
    top:50%;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--primary);
    transform:translate(50%,-50%);
}
.process-story { overflow:hidden; }
.process-phase {
    display:grid;
    grid-template-columns:minmax(180px,.38fr) minmax(0,.95fr);
    gap:clamp(50px,8vw,120px);
    align-items:start;
    padding:clamp(70px,8vw,120px) 0;
    border-top:1px solid var(--line);
}
.process-phase:first-child { padding-top:0; border-top:0; }
.process-phase-reverse { grid-template-columns:minmax(0,.95fr) minmax(180px,.38fr); }
.process-phase-reverse .process-phase-number { order:2; text-align:right; }
.process-phase-reverse .process-phase-copy { order:1; margin-left:auto; }
.process-phase-number {
    color:#D4D8DE;
    font-size:clamp(92px,12vw,170px);
    line-height:.78;
    letter-spacing:-.075em;
    font-weight:400;
}
.process-phase-copy { max-width:760px; }
.process-phase-copy h2 { max-width:760px; margin-bottom:28px; }
.process-phase-copy p { max-width:720px; }
.process-emphasis { margin-top:30px; color:var(--text); font-weight:600; }
.process-example { margin-top:40px; padding:28px 0 28px 28px; border-left:2px solid var(--primary); }
.process-example span,.process-example strong { display:block; }
.process-example span { margin-bottom:8px; color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.process-example strong { max-width:620px; font-size:clamp(20px,2vw,27px); line-height:1.45; letter-spacing:-.02em; }
.process-example p { margin:10px 0 0; }
.process-quote {
    margin:clamp(20px,4vw,55px) 0 clamp(90px,10vw,150px);
    padding:clamp(52px,7vw,86px) clamp(28px,6vw,80px);
    background:linear-gradient(90deg,rgba(238,243,253,.58),rgba(255,255,255,.82),rgba(238,243,253,.58));
    text-align:center;
}
.process-quote span,.process-quote strong { display:block; }
.process-quote span { font-size:clamp(27px,3.5vw,45px); line-height:1.2; letter-spacing:-.035em; }
.process-quote strong { margin-top:8px; color:var(--primary); font-size:clamp(29px,3.7vw,48px); line-height:1.2; letter-spacing:-.035em; }
.process-growth { background:#FFF; }
.process-growth-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(60px,8vw,120px); align-items:start; }
.process-growth-heading { position:sticky; top:120px; }
.process-growth-copy { max-width:680px; }
.process-growth-copy p { font-size:18px; }
.process-growth-copy strong { color:var(--text); }
.process-growth-statement { margin-top:clamp(70px,8vw,120px); padding-top:clamp(42px,5vw,68px); border-top:1px solid var(--line); }
.process-growth-statement span,.process-growth-statement strong { display:block; max-width:1000px; font-size:clamp(29px,4vw,50px); line-height:1.18; letter-spacing:-.04em; }
.process-growth-statement span { color:var(--muted); font-weight:500; }
.process-growth-statement strong { margin-top:6px; color:var(--primary); font-weight:600; }
.process-ready-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(60px,8vw,120px); align-items:start; }
.process-ready-list { border-top:1px solid var(--line); }
.process-ready-list > div { position:relative; padding:25px 0 25px 36px; border-bottom:1px solid var(--line); font-size:clamp(18px,1.8vw,22px); font-weight:500; }
.process-ready-list > div::before { content:"—"; position:absolute; left:0; color:var(--primary); }
.process-ready-list p { margin:38px 0 8px; }
.process-ready-list > strong { display:block; color:var(--primary); font-size:clamp(21px,2.2vw,28px); line-height:1.4; }
@media (max-width:1050px) {
    .process-hero-grid { grid-template-columns:minmax(0,1fr) 200px; }
    .process-phase,.process-phase-reverse { grid-template-columns:150px 1fr; gap:55px; }
    .process-phase-reverse .process-phase-number,.process-phase-reverse .process-phase-copy { order:initial; }
    .process-phase-reverse .process-phase-number { text-align:left; }
    .process-growth-grid,.process-ready-grid { gap:60px; }
}
@media (max-width:820px) {
    .process-hero { padding:85px 0 90px; }
    .process-hero-grid,.process-phase,.process-phase-reverse,.process-growth-grid,.process-ready-grid { grid-template-columns:1fr; }
    .process-hero-mark { max-width:260px; margin-top:5px; }
    .process-phase { gap:34px; padding:75px 0; }
    .process-phase-number { font-size:88px; }
    .process-phase-reverse .process-phase-copy { margin-left:0; }
    .process-growth-heading { position:static; }
}
@media (max-width:560px) {
    .process-hero { padding:64px 0 70px; }
    .process-hero-note { margin-top:22px; }
    .process-phase { gap:24px; padding:62px 0; }
    .process-phase-number { font-size:66px; }
    .process-phase-copy h2 { margin-bottom:22px; }
    .process-example { margin-top:30px; padding:22px 0 22px 20px; }
    .process-quote { margin-bottom:75px; padding-inline:20px; }
    .process-growth-copy p { font-size:16px; }
    .process-ready-list > div { padding-left:28px; }
}


/* ==========================================================================
   SAMOSTATNÁ STRÁNKA — PROJEKTY
   ========================================================================== */

.projects-page-hero {
    padding: clamp(95px, 10vw, 165px) 0 clamp(90px, 9vw, 145px);
    overflow: hidden;
}

.projects-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
}

.projects-page-hero-copy {
    max-width: 900px;
}

.projects-page-hero-copy h1 {
    max-width: 850px;
}

.projects-page-hero-copy .lead {
    max-width: 760px;
    margin-bottom: 0;
}

.projects-page-hero-note {
    margin: 28px 0 0;
    max-width: 680px;
    color: var(--text);
    font-weight: 600;
}

.projects-page-hero-mark {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    color: #C9CDD3;
    font-size: 16px;
    font-weight: 600;
}

.projects-page-hero-mark i {
    position: relative;
    display: block;
    height: 1px;
    background: var(--line);
}

.projects-page-hero-mark i::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    transform: translate(50%, -50%);
}

.case-study {
    overflow: hidden;
}

.case-study-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
    gap: clamp(50px, 7vw, 100px);
    align-items: end;
    margin-bottom: clamp(60px, 7vw, 100px);
}

.case-study-heading h2 {
    max-width: 820px;
    margin-bottom: 0;
}

.case-study-flow {
    padding-bottom: 12px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.case-study-flow span {
    margin-inline: 7px;
    color: var(--primary);
}

.case-study-grid {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    gap: clamp(50px, 7vw, 100px);
    align-items: center;
    margin-top: clamp(55px, 7vw, 100px);
}

.case-study-grid:first-of-type {
    margin-top: 0;
}

.case-study-grid-reverse {
    grid-template-columns: 1.1fr 0.9fr;
}

.case-study-grid-reverse .case-study-copy {
    order: 2;
}

.case-study-grid-reverse .case-image,
.case-study-grid-reverse .case-side-note {
    order: 1;
}

.case-study-copy {
    max-width: 650px;
}

.case-text-block {
    padding-top: 28px;
    border-top: 1px solid var(--line);
}

.case-kicker {
    margin-bottom: 24px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.case-text-block p:last-child {
    margin-bottom: 0;
}

.case-image {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #ECEFF2;
}

.case-image img {
    width: 100%;
    height: auto;
}

.case-image-large {
    box-shadow: 0 20px 55px rgba(23, 25, 28, 0.06);
}

.case-side-note {
    max-width: 520px;
    padding: clamp(38px, 5vw, 62px);
    background: #FFFFFF;
    border-left: 2px solid var(--primary);
}

.case-side-note span,
.case-side-note strong {
    display: block;
}

.case-side-note span {
    margin-bottom: 13px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.case-side-note strong {
    font-size: clamp(22px, 2.5vw, 31px);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.case-statement {
    margin-top: clamp(75px, 9vw, 130px);
    padding: clamp(50px, 6vw, 76px) clamp(28px, 6vw, 80px);
    background: #FFFFFF;
    text-align: center;
}

.case-statement span,
.case-statement strong {
    display: block;
    font-size: clamp(29px, 4vw, 50px);
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.case-statement span {
    color: var(--muted);
    font-weight: 500;
}

.case-statement strong {
    margin-top: 5px;
    color: var(--primary);
    font-weight: 600;
}

.case-statement p {
    max-width: 760px;
    margin: 28px auto 0;
}

.project-transition {
    padding: clamp(95px, 11vw, 175px) 0;
    background: var(--bg);
}

.project-transition p {
    max-width: 980px;
    margin: 0;
    color: var(--text);
    font-size: clamp(31px, 4.7vw, 59px);
    line-height: 1.16;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.case-study-dark {
    background: #FFFFFF;
}

.case-study-dark .case-statement {
    background: linear-gradient(
        90deg,
        rgba(238, 243, 253, 0.68),
        rgba(255, 255, 255, 0.95),
        rgba(238, 243, 253, 0.68)
    );
}

.case-statement-blue p {
    display: none;
}

.projects-common {
    border-top: 1px solid var(--line);
}

.projects-common-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(60px, 8vw, 120px);
    align-items: end;
}

.projects-common h2 {
    margin-bottom: 0;
}

.projects-common h2 span {
    color: var(--primary);
}

.projects-common-copy {
    max-width: 620px;
}

.projects-common-copy > strong {
    display: block;
    margin-bottom: 24px;
    color: var(--primary);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
}

@media (max-width: 1050px) {
    .projects-page-hero-grid {
        grid-template-columns: minmax(0, 1fr) 200px;
    }

    .case-study-grid,
    .case-study-grid-reverse {
        gap: 55px;
    }
}

@media (max-width: 820px) {
    .projects-page-hero {
        padding: 85px 0 90px;
    }

    .projects-page-hero-grid,
    .case-study-heading,
    .case-study-grid,
    .case-study-grid-reverse,
    .projects-common-grid {
        grid-template-columns: 1fr;
    }

    .projects-page-hero-mark {
        max-width: 260px;
        margin-top: 5px;
    }

    .case-study-heading {
        align-items: start;
    }

    .case-study-flow {
        padding-bottom: 0;
    }

    .case-study-grid-reverse .case-study-copy,
    .case-study-grid-reverse .case-image,
    .case-study-grid-reverse .case-side-note {
        order: initial;
    }

    .case-study-grid-reverse .case-image,
    .case-study-grid-reverse .case-side-note {
        order: -1;
    }

    .case-study-copy,
    .case-side-note {
        max-width: none;
    }

    .projects-common-grid {
        align-items: start;
    }
}

@media (max-width: 560px) {
    .projects-page-hero {
        padding: 64px 0 70px;
    }

    .projects-page-hero-note {
        margin-top: 22px;
    }

    .case-study-heading {
        margin-bottom: 48px;
    }

    .case-study-grid,
    .case-study-grid-reverse {
        gap: 34px;
        margin-top: 62px;
    }

    .case-study-flow {
        font-size: 13px;
    }

    .case-image {
        margin-inline: -20px;
        border-radius: 0;
    }

    .case-side-note {
        padding: 30px 24px;
    }

    .case-statement {
        margin-top: 72px;
        padding-inline: 20px;
    }

    .project-transition {
        padding: 82px 0;
    }
}


/* ==========================================================================
   SAMOSTATNÁ STRÁNKA — O MNĚ
   ========================================================================== */

.about-page-hero {
    padding: clamp(85px, 9vw, 145px) 0 clamp(90px, 10vw, 155px);
}

.about-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
    gap: clamp(55px, 8vw, 115px);
    align-items: center;
}

.about-page-hero-copy h1 {
    max-width: 870px;
}

.about-page-hero-copy h1 span {
    color: var(--primary);
}

.about-page-hero-copy .lead {
    max-width: 760px;
}

.about-page-portrait {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.about-page-portrait img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 0.34fr minmax(0, 1fr);
    gap: clamp(45px, 8vw, 120px);
    align-items: start;
}

.about-story-index {
    color: #E4E7EB;
    font-size: clamp(88px, 12vw, 165px);
    line-height: 0.8;
    font-weight: 600;
    letter-spacing: -0.07em;
}

.about-story-copy {
    max-width: 820px;
}

.about-story-copy h2 {
    max-width: 760px;
}

.about-story-highlight {
    margin: clamp(30px, 4vw, 46px) 0;
    padding: 24px 0 24px 28px;
    border-left: 2px solid var(--primary);
    color: var(--text);
    font-size: clamp(20px, 2.4vw, 28px);
    line-height: 1.45;
    font-weight: 600;
}

.about-path-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(60px, 9vw, 130px);
    align-items: center;
}

.about-path-copy {
    max-width: 680px;
}

.about-path-statement {
    padding: clamp(44px, 6vw, 72px);
    background: #FFFFFF;
    border-top: 2px solid var(--primary);
}

.about-path-statement span,
.about-path-statement strong {
    display: block;
    font-size: clamp(28px, 3.8vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.04em;
}

.about-path-statement span {
    color: var(--muted);
    font-weight: 500;
}

.about-path-statement strong {
    margin-top: 8px;
    color: var(--primary);
    font-weight: 600;
}

.about-challenge-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.about-challenge-heading {
    max-width: 590px;
}

.about-challenge-copy {
    max-width: 720px;
}

.about-challenge-copy h3,
.about-direct-copy h3 {
    margin: 0 0 26px;
    font-size: clamp(24px, 2.5vw, 31px);
    line-height: 1.35;
    letter-spacing: -0.025em;
}

.about-quote {
    margin-top: clamp(80px, 10vw, 145px);
    padding: clamp(48px, 7vw, 86px) clamp(28px, 7vw, 90px);
    background: var(--light-blue);
}

.about-quote span,
.about-quote strong {
    display: block;
    font-size: clamp(31px, 4.6vw, 58px);
    line-height: 1.15;
    letter-spacing: -0.045em;
}

.about-quote span {
    color: var(--muted);
    font-weight: 500;
}

.about-quote strong {
    margin-top: 8px;
    color: var(--primary);
    font-weight: 600;
}

.about-values-heading {
    max-width: 850px;
    margin-bottom: clamp(55px, 7vw, 90px);
}

.about-values-list {
    border-top: 1px solid var(--line);
}

.about-value {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 28px;
    padding: clamp(34px, 4vw, 50px) 0;
    border-bottom: 1px solid var(--line);
}

.about-value > span {
    color: #C7CBD1;
    font-size: 14px;
    font-weight: 700;
}

.about-value h3 {
    margin: 0 0 14px;
    font-size: clamp(24px, 2.4vw, 31px);
    line-height: 1.3;
    letter-spacing: -0.025em;
}

.about-value p {
    max-width: 780px;
    margin-bottom: 0;
}

.about-values-signature {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin-top: clamp(45px, 6vw, 70px);
    color: var(--primary);
    font-size: clamp(20px, 2.2vw, 27px);
    font-weight: 600;
}

.about-direct-grid {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: clamp(60px, 9vw, 130px);
    align-items: start;
}

.about-direct-heading {
    max-width: 600px;
}

.about-direct-copy {
    max-width: 760px;
}

.about-direct-highlight {
    margin-top: 32px;
    padding: 28px 0 28px 30px;
    border-left: 2px solid var(--primary);
    color: var(--text);
    font-weight: 600;
}

.about-still {
    background: #FFFFFF;
}

.about-still-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(60px, 9vw, 130px);
    align-items: center;
}

.about-still-photo {
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface);
}

.about-still-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.about-still-copy {
    max-width: 760px;
}

.about-still-copy blockquote {
    margin: 0 0 36px;
    padding: 0;
    border: 0;
    color: var(--text);
    font-size: clamp(31px, 4.5vw, 56px);
    line-height: 1.16;
    letter-spacing: -0.045em;
    font-weight: 500;
}

.about-still-copy p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1050px) {
    .about-page-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    }

    .about-path-grid,
    .about-challenge-grid,
    .about-direct-grid,
    .about-still-grid {
        gap: 65px;
    }
}

@media (max-width: 820px) {
    .about-page-hero-grid,
    .about-story-grid,
    .about-path-grid,
    .about-challenge-grid,
    .about-direct-grid,
    .about-still-grid {
        grid-template-columns: 1fr;
    }

    .about-page-portrait {
        max-width: 520px;
    }

    .about-story-index {
        font-size: 90px;
        margin-bottom: -6px;
    }

    .about-path-statement,
    .about-quote {
        padding: 42px 32px;
    }

    .about-still-photo {
        max-width: 520px;
    }
}

@media (max-width: 560px) {
    .about-page-hero {
        padding: 64px 0 72px;
    }

    .about-page-portrait,
    .about-still-photo {
        margin-inline: -20px;
        border-radius: 0;
    }

    .about-story-highlight,
    .about-direct-highlight {
        padding-left: 20px;
    }

    .about-value {
        grid-template-columns: 42px 1fr;
        gap: 16px;
    }

    .about-values-signature {
        display: grid;
        gap: 7px;
    }

    .about-path-statement,
    .about-quote {
        padding: 34px 22px;
    }
}


/* ==========================================================================
   SAMOSTATNÁ STRÁNKA — KONTAKT
   ========================================================================== */
.contact-page-hero{padding:clamp(90px,10vw,155px) 0 clamp(65px,7vw,105px)}
.contact-page-hero-copy{max-width:950px}
.contact-page-hero-copy h1{max-width:900px}
.contact-page-hero-copy h1 span{color:var(--primary)}
.contact-page-hero-copy .lead{max-width:790px;margin-bottom:0}
.contact-page-note{margin:26px 0 0;color:var(--text);font-weight:600}
.contact-page-main{padding:0 0 clamp(105px,12vw,175px)}
.contact-page-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-page-option{display:block;min-width:0;padding:clamp(38px,5vw,68px) clamp(28px,5vw,64px);color:var(--text);text-decoration:none;transition:background-color 220ms ease}
.contact-page-option:first-child{padding-left:0;border-right:1px solid var(--line)}
.contact-page-option:last-child{padding-right:0;padding-left:clamp(40px,6vw,82px)}
.contact-page-option:hover{background:rgba(238,243,253,.45)}
.contact-page-option-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:clamp(42px,5vw,65px)}
.contact-page-number{color:#C8CCD2;font-size:13px;font-weight:700}
.contact-page-arrow{color:var(--primary);font-size:26px;line-height:1;transition:transform 220ms ease}
.contact-page-option:hover .contact-page-arrow{transform:translate(3px,-3px)}
.contact-page-value{display:block;margin:12px 0 24px;overflow-wrap:anywhere;color:var(--text);font-size:clamp(27px,3.4vw,45px);line-height:1.2;letter-spacing:-.035em;font-weight:600}
.contact-page-option p{max-width:540px;margin-bottom:0;color:var(--muted)}
.contact-start-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(60px,9vw,130px);align-items:start}
.contact-start-heading{max-width:520px}
.contact-start-heading p{margin-top:24px;color:var(--muted)}
.contact-start-examples{border-top:1px solid var(--line)}
.contact-example{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:clamp(28px,3.5vw,42px) 0;border-bottom:1px solid var(--line)}
.contact-example span{padding-top:5px;color:#BEC3CA;font-size:13px;font-weight:700}
.contact-example p{max-width:760px;margin:0;color:var(--text);font-size:clamp(20px,2.2vw,27px);line-height:1.5;letter-spacing:-.02em;font-weight:500}
.contact-start-statement{margin-top:clamp(75px,9vw,125px);padding:clamp(46px,6vw,72px) clamp(28px,6vw,80px);background:#fff}
.contact-start-statement span,.contact-start-statement strong{display:block;font-size:clamp(29px,4vw,50px);line-height:1.18;letter-spacing:-.04em}
.contact-start-statement span{color:var(--muted);font-weight:500}
.contact-start-statement strong{margin-top:6px;color:var(--primary);font-weight:600}
.contact-personal-grid{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);gap:clamp(60px,9vw,135px);align-items:center}
.contact-personal-photo{margin:0;border-radius:12px;overflow:hidden;background:var(--surface)}
.contact-personal-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.contact-personal-copy{max-width:750px}
.contact-personal-copy h2{max-width:680px}
.contact-personal-signature{margin-top:clamp(36px,5vw,52px);padding-top:28px;border-top:1px solid var(--line)}
.contact-personal-signature strong,.contact-personal-signature span{display:block}
.contact-personal-signature strong{margin-bottom:5px;font-size:19px}
.contact-personal-signature span{color:var(--muted);font-size:13px;font-weight:500;letter-spacing:.045em;text-transform:uppercase}
.contact-personal-links{display:grid;gap:13px;margin-top:30px}
.contact-personal-links a{display:flex;justify-content:space-between;gap:20px;padding-bottom:13px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:600}
.contact-personal-links a span{color:var(--primary);transition:transform 220ms ease}
.contact-personal-links a:hover{color:var(--primary)}
.contact-personal-links a:hover span{transform:translateX(4px)}
@media(max-width:820px){
.contact-page-options,.contact-start-grid,.contact-personal-grid{grid-template-columns:1fr}
.contact-page-option:first-child{padding-left:0;padding-right:0;border-right:0;border-bottom:1px solid var(--line)}
.contact-page-option:last-child{padding-left:0;padding-right:0}
.contact-personal-photo{max-width:520px}
}
@media(max-width:560px){
.contact-page-hero{padding:64px 0 58px}
.contact-page-main{padding-bottom:82px}
.contact-page-option{padding-top:36px;padding-bottom:40px}
.contact-page-option-top{margin-bottom:30px}
.contact-example{grid-template-columns:38px 1fr;gap:12px}
.contact-start-statement{margin-top:65px;padding:34px 22px}
.contact-personal-photo{margin-inline:-20px;border-radius:0}
.contact-personal-signature span{line-height:1.5}
}